Change the array items color one by one

Processing Coding Questions
1

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 :slight_smile:

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
  }
}
2

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()).

3

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

4

Consider this simple example:

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?

5

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.

6

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.

7

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 ?

8 
// 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.
9 
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

1 Like