1. Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 11 Fall 2010

2. Processing - Loops We know about variables and some kinds of expressions. We know about conditions/flow of control (IF-THEN-ELSE) Consider now how we could do something many times. Of course, each time step our program gets called, and we can draw things and update positions, speeds, and so on. Let’s write some code that changes each line in the display to a different color or grey value each step, so that it seems to slowly shift in hue or brightness.

3. Loops Here’s what I mean:

4. Loops How to do it: 1.Let i be the column under consideration. 2.Draw a vertical line with grey level I 3. Repeat for i=0..255 i

5. Loops We can use a new statement: while while (expression) statement The statement gets executed repeatedly so long as the expression is true (IE not equal to 0)

6. Loops The statement can be a bunch of statements within begin-end braces. while (expression) { statement; … statement; }

7. Loops So increase I by 1 until it becomes greater than 255 i = 0; // Initialize i while (i < 256) // Done yet?? { statement;// here I = 0, then 1, then 2, … statement; … i = i + 1;// Increment i }

8. Loops So increase I by 1 until it becomes greater than 255 i = 0; // Initialize i while (i < 256) // Done yet?? { stroke (i);// set stroke colour to i statement; … i = i + 1;// Increment i }

9. Loops So increase I by 1 until it becomes greater than 255 i = 0; // Initialize i while (i < 256) // Done yet?? { stroke (i); // set stroke colour to i line (i, 0, i, 256);// Draw a line, color i … i = i + 1;// Increment i }

10. Loops void (draw) { i = 0; // Initialize i while (i < 256) // Done yet?? { stroke (i); // set stroke colour to i line (i, 0, i, 256);// Draw a line, color i i = i + 1;// Increment i }

11. Loops int i; // counters void setup () { size (256,256); } void draw () { i = 0; // Start at the first row. while (i<256) // Repeat for all 256 rows { stroke(i); line (i,0,i,255); i += 1; }

12. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. This pointer will slide right from 0 to the end. Levels will be changed

13. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. This pointer will slide right from 0 to the end. Levels will be changed 21222324252627 ……

14. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 22 2324252627 ……

15. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 2223 24252627 ……

16. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 222324 252627 ……

17. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 22232425 2627 ……

18. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 2223242526 27 ……

19. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 222324252627 ……

20. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 2223242526272827 ……

21. Loops – make it move New problem: Make the grey level change by one each step. It will now be an animation where the greys change – it will have the illusion of the image moving. 2223242526272829 ……

22. This can be done with a loop 1.Start the program with the left column = 0 and the right one =255(white). 2.Each step (draw) change the start value (increase by 1). 3.Need a variable for the start value. Call it v. Otherwise, the program is as it was.

23. This can be done with a loop 1.Start the program with the left column = 0 and the right one =255(white). 2.Each step (draw) change the start value (increase by 1). 3.Need a variable for the start value. Call it v. And one for the current colour (call it s) Otherwise, the program is as it was.

24. Modify the program int i; void setup () { size (256,256); } void draw () { i = 0; while (i<256) { stroke(i); line (i,0,i,255); i += 1; } int i,s,v; void setup () { size (256,256); v=0; } void draw () { i = 0; s = v; while (i<256) { stroke(s); line (i,0,i,300); i = i + 1; s = s + 1; } v = v + 1; }

25. Here’s what it does

26. A bug! We keep adding 1 to the color. At some point it gets bigger than 255, and then is useless – there’s no white that is whiter than 255. So after a while, all parts of the image become white, and don’t seem to change after that. We can fix that by checking the current color and not letting it get bigger than 255 – set it to 0 instead and start over.

27. A Bug fix We keep adding 1 to the color. At some point it gets bigger than 255, and then is useless – there’s no white that is whiter than 255. So after a while, all parts of the image become white, and don’t seem to change after that. We can fix that by checking the current color and not letting it get bigger than 255 – set it to 0 instead and start over.

28. A Bug fix

29. void draw () { i = 0; s = v; while (i<256) { stroke(s); if (s>255) s = 0; line (i,0,i,300); i = i + 1; s = s + 1; } v = v + 1; if (v>255) v = 0; } Check colour – make Sure it stays less than 255 The same for start colour, or else at some point, when v>255, all images look the same (all start at 0)

30. The FOR statment The WHILE statement creates a very general loop, and is all we really need. On the other hand … the most common type of loop involves adding 1 to a variable each time through. A FOR loop does this.

31. The FOR statement i = 0; while (i<256) { i = i + 1; } for (i=0; i<256; i=i+1) { }

32. The FOR statement void draw () { i = 0; s = v; for (i=0; i<256; i=i+1) { stroke(s); if (s>255) s = 0; line (i,0,i,300); s = s + 1; } v = v + 1; if (v>255) v = 0; } This is the same program as before, but using a FOR statement instead of a WHILE A FOR statement can always be turned into a WHILE in a simple way.

33. Loops Let’s try a new program. It’ll be artistic. Start at some point, say 20,20 Draw a line to another point; say 200,200 Now modify the endpoint and start point in a regular way: startx = startx + 1 starty = starty + 10 endx = endx – 1 endy = endy-12

34. Loops Let’s try a new program. It’ll be artistic. Start at some point, say 20,20 Draw a line to another point; say 200,200 Now modify the endpoint and start point in a regular way: startx = startx + 1 starty = starty + 10 endx = endx – 1 endy = endy-12

35. Loops int startx=20, starty=20; int endx = 200, endy=200; int sx1, sx2, sy1, sy2; void setup () { size (256,256); } void draw () { stroke (255); sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 =0)) { line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; }

36. 36 Loops Now animate the colour = change from a start value through the range. Each time DRAW is called, change the colour a little bit. Need a variable for current colour, and need to check to see that it does not get bigger than 255.

37. 37 Loops int startx=20, starty=20; int endx = 200, endy=200; int sx1, sx2, sy1, sy2; int s = 128; void setup () { size (256,256 } void draw () { stroke (s); sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 =0)) { line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; } s = s + 1; if (s > 255) s = 0; }

38. 38 Loops

39. 39 Loops That’s okay, but not great. How about changing the colour of each line each time. I’ll bet it won’t look like what you imagine. Change the line colour by 5 every time a line is drawn.

40. 40 Loops int startx=20, starty=20; int endx = 200, endy=200; int sx1, sx2, sy1, sy2; int s = 128; void setup () { size (256,256); } void draw () { sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 =0)) { stroke (s); line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; s = s + 5; if (s > 255) s = 0; }

41. 41 ??

42. 42 Loops Most of our programs will use loops. Practice with simple problems Try new things Use the print statements for easy to understand output.

43. 43 Printing … void draw () { sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 =0)) { stroke (s); line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; s = s + 5; if (s > 255) s = 0; } n = n + 1; print ("Iteration "); print(n); print (" Color "); println(s); }

44. 44 Printing …