280 likes | 505 Views
Loops. animation scripting. c sc 233. Loops. 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. What is Iteration?.
E N D
Loops animation scripting csc 233
Loops 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 Smith
What is Iteration? • 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 Smith
Why use Iteration? 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…. // 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);
Iterations to the rescue:Let’s discover what changes in the code so that we can utilize the power of loops (iteration) • Without Iteration: // 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
Planning iteration is step 1Improve upon the old way by using variables…Remember we want to repeat an action for a certain number of times // 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
Lets Compare…Did this improve? Did we write less code and get the same results? 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); With variables int x = 50; int spacing = 10; //length of leg intlen = 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);…
Lets Compare…Actually we end up writing more code this way 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); With variables int x = 50; int spacing = 10; //length of leg intlen = 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);… X
There has got to be a better way 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.
a better way, the Loop 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.
How to plan a loop: • 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
How to plan a loop: • 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) Setup Test Condition True Action(s) Change test variable False
The only Loop You Really Need: while • Use a Boolean Expression to test if we are done • Just like in if-else Condition True Action(s) False
Simplest while loop example 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 } }
Try This:Simple While example // This example with draw a rectangle across the canvas // until the stopping point is reached. intposX = 0; intposY = 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
Lets talk:Simple While example // This example with draw a rectangle across the canvas // until the stopping point is reached. intposX = 0; intposY = 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.
Lets try making a bunch of legs legs using Iteration // With x variable int x = 50; int spacing = 10; intlen = 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); .. // Loop Version int x = 50; int spacing = 10; int endLegs = 150; while(x < endLegs) { line(x,60,x,80); x = x + spacing; } VS.
Three Parts of the Loop • Find the three parts: • Setup • Test • Change // Loop Version int x = 50; int spacing = 10; intendLegs = 150; while(x < endLegs) { line(x,60,x,80); x = x + spacing; }
Exit Conditions: When to stop! • 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 dayOfMonthis 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 Smith
Your next loop: for • 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 } Setup Test Condition True Action(s) Change test variable False
Simplest FOR loop example 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 } }
forloopSyntax and Example 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
forloopIncrement and Decrement operators • 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;
Local vs. Global variables 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. Learning Processing: Slides by Don Smith
Guess the outcome • Global versus Local variables in loops • Which will these produce? A, B or C? // Global " count " int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); } ________ // Local " count " void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } ________ Learning Processing: Slides by Don Smith
Summary • 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
Exercises 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 Learning Processing: Slides by Don Smith