# Change the array items color one by one

**URL:** <https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832>\
**Category:** Coding Questions\
**Created:** [August 22, 2018, 4:21am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832 "2018-08-22T04:21:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 22, 2018, 4:21am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/1 "2018-08-22T04:21:39Z")

</div>

Hello processors! this is my first question here (two questions), I hope to get quick answers.  
I made an array of 4 ellipses and I want to change their color one by one to red, each time I mousePressed accordingly in order and when it ends in the fourth ellipse to start again back at the first ellipse. Me second question is that I have the background set on ‘void draw’ but the ellipses drawn are still apparent on the canvas, appearing one in top of the other (not showing with a single smooth stroke). Thank you in advanced for your time 🙂

```auto
int[] bolas;
color red = color(255, 0, 0);
int counter = 1;

void setup() {
  size (600, 600);
  bolas = new int[4];
  for (int i = 0; i < 4; i++) {
    bolas[i] = i;
  }
}

void draw() {
  background(255);
  if (mousePressed == true) {
    for (int i = 0; i < bolas.length; i++) {
      fill(red);
      bolas[i] = i;
      counter++;
      println(i);
    }
  }
  for (int x = 0; x < 4; x++) {
    for (int y = 0; y < 4; y++) {
      ellipse(bolas[x]*width/3, height/2+bolas[y], 50, 50);
    }
  }
}
void mouseReleased() {
  fill(0);
  if (counter == 4) {
    counter = 1; // loop after 3
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 22, 2018, 4:26am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/2 "2018-08-22T04:26:54Z")

</div>

Edit your post, select your code, and hit the format code button, which looks like this: \</\>

Do all your drawing in `draw()`. If you need to remember the different colors that the ellipses are, have an array of colors. Use those colors when you draw the ellipses (in `draw()`!). Change those values when the mouse is pressed (in `mousePressed()`).

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 22, 2018, 4:32am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/3 "2018-08-22T04:32:10Z")

</div>

Thank you. I only want to use one color, should I make an array for just a single color?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 22, 2018, 4:39am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/4 "2018-08-22T04:39:19Z")

</div>

Consider this simple example:

```auto
int redCount = 0;

void setup() {
  size (600, 600);
}

void draw() {
  background(255);
  fill(255,0,0);
  for (int x = 0; x < 4; x++) {
    if( x >= redCount ){
      fill(0);
    }
    ellipse(50 + 70 * x, 50, 50, 50);
  }
}
void mousePressed() {
  redCount++;
  redCount%=5;
}

```

See how there is a single variable that tracks how many red ellipses there are?

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 22, 2018, 5:03am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/5 "2018-08-22T05:03:05Z")

</div>

Thank you! sorry, my question was not clear. I want to change it so that if the second one is red the the rest is black, and so on, if the third is red the rest is black.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 22, 2018, 5:08am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/6 "2018-08-22T05:08:31Z")

</div>

Alright, so that’s a simple change to make. Set the fill color to black inside the loop instead of before it, and then immediately change it to red if the value of i is the same at the position that you want a red circle at. Attempt this yourself, and post the code of your attempt. This will ensure you understand the example code, and I’m not just doing the work for you.

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 22, 2018, 5:39am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/7 "2018-08-22T05:39:09Z")

</div>

I understand, but when you say set the fill color to black inside the loop instead of before it, you mean take the fill out of the if statement into the for loop? and then make another for loop replacing the if statement ?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 22, 2018, 5:42am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/8 "2018-08-22T05:42:16Z")

</div>

```auto
// Loop over each ellipse.
  // Set the fill to black.
  // If this is the ellipse that should be red,
    // Set the fill to red.
  // Draw this one ellipse.
// Loop ends, go to next ellipse in loop.

```

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 22, 2018, 5:50am UTC](https://discourse.processing.org/t/change-the-array-items-color-one-by-one/2832/9 "2018-08-22T05:50:48Z")

</div>

```auto
int redCount = 0;

void setup() {
  size (600, 600);
}

void draw() {
  background(255);
  // Loop over each ellipse.
  for (int x = 0; x < 4; x++) {
    // Set the fill to black
    fill(0);
    // If this is the ellipse that should be red,
    if (x == redCount) {
       // Set the fill to red.
      fill(255, 0, 0);
    } 
    // Draw this one ellipse.
    ellipse(50 + 70 * x, 50, 50, 50);
  }
}

void mousePressed() {
  redCount++;
  redCount%=5;
}

```

thank you so much