Fill in a nested loop

Processing Coding Questions
1

Hello,

So I’m a little confused on how to manage what I’m trying to fill, and how, inside nested loops.

I’m trying to have 3 rows of 20 circles each (to represent 60 seconds), where 1 circle is filled black every second. But I can only get as far as filling all 3 rows during the first 20 seconds and can’t figure out how to tell the program to fill 1 row, then continue filling on the next line.

P.S. I’m sorry for the messy code. I’m a coding fetus and I’ve just been trying a lot of random things trying to get it to work so there’s probably some stuff that doesn’t make much logical sense or dead code or something sorry…

int spacing = 20;

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

void draw() {
  background(255); // white
  int s = second();  
  int m = minute();  
  int h = hour();  

  // text
  fill(0); // black
  textSize(14);
  text("Current Hour:", 20, 20);
  text(h, 120, 20);
  text("Current Minute:", 20, 130);
  text(m, 140, 130);
  text("Current Second:", 20, 300);
  text(s, 140, 300);

  // hour loop

  for (int i = 0; i < 24; i++) {
    ellipse((i*spacing) + 20, 50, 20, 20);
    if (i + 1 < h) {
      fill(0); //black
    } else {
      fill(255); // white
    }
  }

  // minute loop
  fill(0); // black
  int x = 0;
  int y = 0;
  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 20; j++) {
      ellipse(x + 20, y + 160, 24, 24);
      x = x + 24;

      if (i + 1 == m) {
        fill(255); // white
      }
    }
    y = y + 24;
    x = 0;
    if ( i < m);
    fill(0);
  }

  // second loop
  int z = 0;
  int w = 0;

  for (int i = 0; i < 20; i++) {
    for (int j = 0; j < 3; j++) {
      ellipse(z + 20, w + 330, 24, 24);
      w = w + 24;
      if (i + 1 == s && j < 1) {
        fill(255); // white
      }
    }
    z = z + 24;
    w = 0;
  }
}

So basically my minutes and seconds counters are jacked up and i was wondering if anyone could help me out.

2

You should first of all set fill before drawing the corresponsione ellipse.
And use j20+i = s. Meaning since you have 3rows a 20 and you have the Second row it’s 1 * 20+1. and the 1 Circle in the Second row is the 21 Second. Also, Loops Start at 0, so the first row is 020+1, so 1 Second.
Also, you can just use i *20+20, j *20+20 to set the Position (and an Offset of 20).
And i Would suggest you to invert the loops, so that <3 is first and then <20. That way it goes 20 to the right and then goes to the Next row underneath.

1 Like
3

Thank you for the reply!

But I’m just a bit confused on the j20+i = s part. I understand the theory of it now, but now my mind is running circles around how it fits into the syntax. Specifically how I would call j20.

I’ve tried it like this but nothing happens.

int s = second();

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

void draw() {
  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 20; j++) {
      fill(255);
      ellipse(j*24 + 20, i*24 + 330, 24, 24);
      if ((j * 20 ) + i == s) {
        fill(0); // black
      }
    }
  }
}
4

A painter dos not paint a picture and then decide which colors to use afterwards.

Make sure you are setting the fill color BEFORE you are drawing your ellipse. Always before!

1 Like
5

J20 means j * 20, But the Post somehow turned it into j*20 if written without space.