# Fill in a nested loop

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.

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

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

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

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