Using fill() on objects with for loop

Question

I'm creating a game in Processing (JavaScript) which allows you to color a grid of rectangles as they become highlighted one by one.

I'm trying to color an array of objects using a for loop and the fill() function, but when I use it, it colors not only colors the current rectangle in the array (which would be correct), but also all previous rectangles. I want it to only color the current rectangle.

void setup () {
  size (1200, 700);
  background (255, 255, 255);
  smooth();
  rect = new Rectangle [count]; //creates a grid of possible rectangles, based on the dimensions of the screen
  for (int i = 0; i<= (count-1); i++) {
    fill (255, 255, 255);
    ypos = ypos + heigh;
    if (ypos >= 700) {
      ypos = 0;
      xpos = xpos + wid;
    }
    rect[i] = new Rectangle(xpos, ypos, wid, heigh, redPressed, greenPressed, yellowPressed, bluePressed, blackPressed);
  }
  int now = millis();
}

void draw() {
  for (int i = 0; i < control; i++) {
    if (keyPressed) { //detects if key is pressed and colors the current rectangle that way
      if (key == 'r' ||key == 'R') {
        fill (255, 0, 0);
      }
      if (key == 'g' ||key == 'G') {
        fill (0, 255, 0);
      }
      if (key == 'y' || key == 'Y') {
        fill (255, 255, 0);
      }
      if (key == 'b' || key == 'B') {
        fill (0, 0, 255);
      }
      if (key == 'k' || key == 'K') {
        fill (0, 0, 0);
      }
    }
    stroke (0, 0, 0);
    rect (rect[i].xpos, rect[i].ypos, rect[i].xdim, rect[i].ydim); //draws the current rectangle, moving through the grid
  }
  if (millis() - now >= wait) { //causes a 1 second delay between rectangles
    now = millis();
    control++;
    if (control > (count-1)) {
      control = (count-1);
      i = 0;
    }
  }
}

Thanks in advance!

What is the 'control' variable in for-loop? It looks like the draw function could be drawing multiple rectangles since it's in the for-loop. Also, how do you determine the "current rectangle" in the array? — miir, Oct 13 '15 at 21:39
@Bergi the control variable forces a 1-second delay between the drawing of each rectangle. It increases by 1 every 1 second. And by "current rectangle" I mean whatever value "i" is in the for-loop. So when i = 1, the current triangle is rect[1]. — lgouvin, Oct 13 '15 at 23:16
@AmirS the control variable forces a 1-second delay between the drawing of each rectangle. It increases by 1 every 1 second. And by "current rectangle" I mean whatever value "i" is in the for-loop. So when i = 1, the current triangle is rect[1]. — lgouvin, Oct 13 '15 at 23:34

score 1 · Answer 1 · edited May 23 '17 at 11:48

First of all, we can't run this code because you haven't posted your Rectangle class or your control, 'count', 'xpos', 'ypos', wid, heigh, redPressed, greenPressed, yellowPressed, bluePressed, or blackPressed variables. variables. If you want help, you have to post an MCVE that we can actually run.

Secondly, you're doing some weird things here: why are you looping through your Rectangle array if you only want to draw one of them at a time? Why are you manually causing a wait instead of just setting the framerate?

Instead of looping through your rectangles every time draw() is called, keep track of the index and directly access it. Instead of doing the waiting yourself, just set the framerate:

int index = 0;
Rectange[] rect;

void setup () {
  size (1200, 700);
  background (255, 255, 255);
  smooth();
  rect = new Rectangle [count]; //creates a grid of possible rectangles, based on the dimensions of the screen
  for (int i = 0; i<= (count-1); i++) {
    fill (255, 255, 255);
    ypos = ypos + heigh;
    if (ypos >= 700) {
      ypos = 0;
      xpos = xpos + wid;
    }
    rect[i] = new Rectangle(xpos, ypos, wid, heigh, redPressed, greenPressed, yellowPressed, bluePressed, blackPressed);
  }
  int now = millis();
  frameRate(1);
}

void draw() {

  if (keyPressed) { //detects if key is pressed and colors the current rectangle that way
    if (key == 'r' ||key == 'R') {
      fill (255, 0, 0);
    }
    if (key == 'g' ||key == 'G') {
      fill (0, 255, 0);
    }
    if (key == 'y' || key == 'Y') {
      fill (255, 255, 0);
    }
    if (key == 'b' || key == 'B') {
      fill (0, 0, 255);
    }
    if (key == 'k' || key == 'K') {
      fill (0, 0, 0);
    }
  }
  stroke (0, 0, 0);
  rect (rect[index].xpos, rect[index].ypos, rect[index].xdim, rect[index].ydim);  
  index++;
  if (index >= rect.length) {
    noLoop();
  }
}

Please make an effort to post an MCVE next time.

Using fill() on objects with for loop

1 Answers1