2. Variables Conditionals Loops The concept of Iteration Two types of loops: While For When do we use them? Iteration in the context of computer graphics Learning Processing: Slides by Don Smith2

3. Iteration is the generative process of repeating a set of rules or steps over and over again. It is a fundamental concept in computer programming. Understanding how the different types of loops work will make your life as a coder happier. Each ‘iteration’ may do something different Usually has a defined condition to stop repeating You have already ‘used’ loops! Recall, Processing calls draw() over and over until you end your program. Learning Processing: Slides by Don Smith3

4. Lets draw a series of lines for say a caterpillar. Without iterations you would have to code a long series of line functions changing certain values a little bit for every point of the line. Imagine if you have to do this for 200 or 300 lines …. 4 // No iterations stroke(0); line( 50,60, 50,80); line 1 line( 60,60, 60,80); line 2 line( 70,60, 70,80); line 3 line( 80,60, 80,80); line 4 line( 90,60, 90,80); line… line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80);

5.  Without Iteration: 5 // No variables stroke(0); line( 50,60, 50,80); line( 60,60, 60,80); line( 70,60, 70,80); line( 80,60, 80,80); line( 90,60, 90,80); line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80); So what changes? x’s increase each time Can you see the pattern? Add 10 each time When does it stop? Last line is at x = 150

6. 6 // With variables int x = 50; int spacing = 10; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); The Old, Hard way // No variables stroke(0); line( 50,60, 50,80); line( 60,60, 60,80); line( 70,60, 70,80); line( 80,60, 80,80); line( 90,60, 90,80); line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80); Increments the variable by adding the value of the variable spacing

7. 7 With variables int x = 50; int spacing = 10; //length of leg int len = 20; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80);… The Old, Hard way vs. // No variables stroke(0); line( 50,60, 50,80); line( 60,60, 60,80); line( 70,60, 70,80); line( 80,60, 80,80); line( 90,60, 90,80); line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80);

8. 8 With variables int x = 50; int spacing = 10; //length of leg int len = 20; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80);… The Old, Hard way vs. // No variables stroke(0); line( 50,60, 50,80); line( 60,60, 60,80); line( 70,60, 70,80); line( 80,60, 80,80); line( 90,60, 90,80); line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80); X X

9. 9 Although the code that utilized variables is technically better, because you can make changes to spacing with one small adjustment, this did not cut down on our code writing. What would be better is to be able to say…"draw one line one hundred times" In one simple line of code.. That also tells the computer where to start and where to end. This situation can be resolved using what is called a control structure known as… the loop.

10. 10 A Loop structure is similar to what we have already done with conditionals. Instead of asking a YES or NO question to determine whether a block of code should be executed one time, our code will ask a YES or NO question to determine how many times the block of code should be repeated. This is known as Iteration.

11.  There are three types of loops in Processing  While loops: Employs a Boolean test condition  For loops: Great shorthand for simple counting operations  Do – while loops: Rarely used 11

12.  Three Parts in every loop:  Setup variables  Test Condition  Change test variable  You must make sure the loop will end!  The condition should be false at some point… ▪ Or you have an ‘infinite’ loop! (not good) 12 Action(s) Change test variable Test Condition True False Setup

13.  Use a Boolean Expression to test if we are done  Just like in if-else 13 Action(s) Condition True False

14. 14 int count = 0; void setup(){ while (count <= 100){ // boolean test edit condition must always be met println ("count is " + count); // action to do while test is true count = count + 1; increment or decrement variable }

15. 15 // This example with draw a rectangle across the canvas // until the stopping point is reached. int posX = 0; int posY = 100; int spacing = 10; // controls how wide the gaps are between rectangles int stop = 300; //change this value to control when the exit event occurs void setup(){ size (500, 500); rectMode(CORNER); fill(200,0,0); strokeWeight(1); while (posX <= stop){ //Boolean Condition start and stopping points rect (posX, posY, 5, 200); //actions to repeat println(posX); posX = posX + spacing; //Increment variable } // closes while } //closes setup

16. 16 // This example with draw a rectangle across the canvas // until the stopping point is reached. int posX = 0; int posY = 100; int spacing = 10; // controls how wide the gaps are between rectangles int stop = 300; //change this value to control when the exit event occurs void setup(){ size (500, 500); rectMode(CORNER); fill(200,0,0); strokeWeight(1); while (posX <= stop){ //Boolean Condition start and stopping points rect (posX, posY, 5, 200); //actions to repeat println(posX); posX = posX + spacing; //Increment variable } Before we just blindly copy code and hit RUN lets talk about what is going on with this code and make a prediction to what might happen when we press RUN.

17. 17 // Loop Version int x = 50; int spacing = 10; int endLegs = 150; while(x < endLegs) { line(x,60,x,80); x = x + spacing; } // With x variable int x = 50; int spacing = 10; int len = 20; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80); x = x + spacing; line(x,60,x,80);.. VS.

18.  Find the three parts:  Setup  Test  Change 18 // Loop Version int x = 50; int spacing = 10; int endLegs = 150; while(x < endLegs) { line(x,60,x,80); x = x + spacing; }

19.  How do we know when to stop?  Test is usually based on a comparison with a variable ▪ Until age is 21 ▪ While changeCount is greater than 5 ▪ While not done ▪ Until hitSomething is true ▪ While dayOfMonth is less than daysInMonth  What if we don’t stop?  You probably forgot to change the test variable! ▪ Or you changed it in the wrong direction  You have written an ‘infinite’ loop  Not good. Must ‘kill’ processing to get out! Learning Processing: Slides by Don Smith19

20.  Use a for loop when:  1) Your ‘test’ variable is a number  2) You know when to stop before you start  With a for loop you put all three parts of a loop on one line: for( Setup variables ; Test Condition ; Change test variable ){ // Action(s) go here } 20 Action(s) Change test variable Test Condition True False Setup

21. 21 void setup(){ for (int count = 0; count <= 200; count++){ // boolean test edit condition must always be met println("count is " + count); // action to do while test is true }

22. Use two semicolons ( ; ) as separators: for( Setup variables ; Test Condition ; Change test variable ){ actions go in the block } for( int x = 1 ; x < 10 ; x = x + 1){ // Action(s) go here }  Who came up with this?  Programmers of course  Why?  It saves typing, and it puts all three parts on one line 22

23.  A short cut for adding or subtracting one (1) from a variable is as follows  X++; is equal to X = X + 1;  X- -; is equal to X = X – 1;  X += 2; is equal to X = X + 2;  X * = 3; is equal to X = X * 3; 23

24. Learning Processing: Slides by Don Smith24 Variables can be declared anywhere within a program. For simplicity we have declared variables at the top of our code but this does not always have to be the case. Let’s discuss why… Some variables need to be accessible, and exist, through out the entire program, but other variables may not be so important. they could be considered short term use variables or used in a localize part of a program. This describes the idea of global and local variables. Global variables live the entire life of the program and are accessible always Local variable live a short time and are only used in localized areas of the program, like within a loop or function and can only be accessed there.

25. // Global " count " int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); } ________ Learning Processing: Slides by Don Smith25 // Local " count " void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } ________ // Local " count " void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } ________ Global versus Local variables in loops Which will these produce? A, B or C? Guess the outcome

26.  Iteration (looping) is another way to control the flow  Every loop must have three elements:  1) Initialization (of something to count or test)  2) Test if you are done yet  3) Update the test variable  The ‘while’ loop can do everything you need  Initialize before the test, test up front, don’t forget to update!  A ‘for’ loop puts all three elements on one line  A variable’s ‘scope’ can be:  Global, Local to the method, or inside a block of code { }  Increment (++) or decrement (--) operators save typing!  You can use print() and println() to help debug your programs while you are developing them 26

27. Learning Processing: Slides by Don Smith27 How would you go about creating these images utilizing loops? Think about the values that change and the values that remain the same. A B

28. 28