It's a for loop that draws some number of circles on the left border of the window. ;)
What's going on inside?
The for loop has four parts:
- begining state, so where to start from (the "int y = 0;" part)
- the condition under which it shoud do sth (the "y < height + 45;" part)
- what to do (the part between the curly braces {} called loop body)
- where to move after the previous one is done (the step: "y += 40" part)
Let's assume that the window size was: 200x200px. Then this for loop is equivalent to:
- int y = 0;
- if( y < height + 45 ) { // so if y is less then 245, y is 0, so it't true
- fill( 255, 140 ); // white color that is semi-transparent
- ellipse( 0, y, 40, 40 ); // y is 0 - it's in the left-top corner!
- y += 40; // that is equivalent to y = y + 40 so y = 0 + 40
- }
- // and once again
- if( y < height + 45 ) { // y is 40, so it's true
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 ); // next circle is 40 px to the bottom of the window
- y += 40; // y = 40 + 40 --> y is 80
- }
- // and... once again
- if( y < height + 45 ) { // y is 80, so it's true
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 ); // and lower again
- y += 40; // y = 80 + 40 --> y is 120
- }
- // and...
- if( y < height + 45 ) { // y is 120, so well... ;)
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 ); // and so on
- y += 40; // y = 120 + 40 --> y is 160
- }
- // you know what will happen, right?
- if( y < height + 45 ) { // now y is 160 - still running
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 );
- y += 40; // y = 160 + 40 --> y is 200
- }
- // we're almost done
- if( y < height + 45 ) { // y is 200 - still less then 245
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 ); // on the bottom-left corner now
- y += 40; // y = 200 + 40 --> and finally y is 240
- }
- // the final run
- if( y < height + 45 ) { // y is 240 - less then 245 for the last time!
- fill( 255, 140 );
- ellipse( 0, y, 40, 40 ); // drawn outside the window - no visible results
- y += 40; // y = 240 + 40 --> 280
- }
- // we're almost done
- if( y < height + 45 ) { // y is 280 --> good bye
- fill( 255, 140 ); // none of these statements will be executed
- ellipse( 0, y, 40, 40 );
- y += 40;
- }
So as you see in the loop the y started as 0 (the starting point "int y = 0;") and the code inside the curly braces (the body part) was executed until y got bigger then 245 (the condition "y < height+45;") which happened because after each time the body was done, y got bigger ("y += 40" part).
Take a look at this for loop:
- size( 400, 400 );
- background( 0 );
- smooth();
- fill( 255, 140 );
- for( int i = 0; i < 10; i += 1 ) {
- ellipse( 20 + ( i * 40 ), 20 + i * 40, 40, 40 );
- }
It's doing more or less the same thing (a bit less general), but with the counter more explicit. You see that it will draw a circle 10 times. The vertical and horizontal offset of the circles will be then:
20 + (0*40) --> 20
20 + (1*40) --> 60
20 + (2*40) --> 100
20 + (3*40) --> 140
...
20 + (9*40) --> 380
See that in this small snippet of code the fill() was moved out the loop as it doesn't change actually, so it can be run just once for all the circles in the loop. On the margin: the 20x20px offset could be done with translate() function.
I hope it gives you some orientation is the code. M advice would be as well: love loops! ;)
