Run until all conditions are met

To demonstrate a for loop, this program runs only in the setup block. The program draws horizontal lines that are black at the top. As several lines are displayed, the colour changes gradually to white at the bottom of the display window.

background (180); A light grey background.

strokeWeight (4); A line width of 4 pixels.

strokeCap (SQUARE); Squares the ends of a line.

for (int h = 10; h <= (height - 15); h += 10) { The variable h = 10. If h is less than or equal to height - 15. Then 10 pixels are added to h.

stroke (0, 255 - h); line (10, h, width - 20, h); stroke (255, h); line (10, h + 4, width - 20, h + 4); This line raises h by 4 pixels in the y direction. So every four pixels, a new line is displayed. And then the for loop starts again until all conditions are met.

The colour of the line is black. A transparency of the value h is added to each image of a line.

The first line drawn is 10 pixels from the left. h = 10. So 10 pixels from the top. Width - 20 = 480. Why 20? And then again the value of h (10).

This was not clear to me. Especially since we have already specified stroke colour and transparency once. I just commented out this line. And then you can see that the transparency goes to the background colour. But you want the lines to go to white. So h goes to full transparency in steps of 10. And that‘s full white and also cleverly thought out.

Variations For loops