Often being different

Control flow By default Java (and therefore Processing) executes lines of a program one after the other –Doesn’t matter what happened earlier Often we want to control which steps are executed depending on what else has happened That is, we want conditional control flow –This is necessary in order to make anything that is interactive

if if statements create conditional flow if ( ) { // do this code } –Note the { }s Boolean expressions have one of two values: true or false

Boolean Expressions used in Conditional Flow Conditional tests use the following operators Relational operators > (greater than) < (less than) >= (greater than or equal to) <= (less than or equal to) == (equals) != (not equal to) Logical operators || (logical OR) && (logical AND) ! (logical NOT)

Examples of Boolean Expressions used for Conditional Tests Simple equality tests: (5 == 6)false (5 == 5) true Relational tests: (5 < 6) true (5 > 5) false (5 <= 5) true Logical tests: (true || false)true (!false) true Combined tests: !(15 > 20) true ((5 == 6) && (5 == 5))false ((5 == 6) || (5 == 5)) true

In Processing println(3 > 5); // prints false println(5 > 3); // prints true println(5 > 5); // prints false println(3 < 5); // prints true println(5 < 3); // prints false println(5 < 5); // prints false println(3 >= 5); // prints false println(5 >= 3); // prints true println(5 >= 5); // prints true println(3 <= 5); // prints true println(5 <= 3); // prints false println(5 <= 5); // prints true

Example of Simple Conditional Statement Print a different message depending on the value of a variable: int x = 5; if (x == 5) { println(”x is 5”); }

Graphic Example from the Text // The text expressions are "x > 100" and "x < 100" // Because x is 150, the code inside the first block // runs and the ellipse draws, but the code in the second // block is not run and the rectangle is not drawn int x = 150; if (x > 100) { // If x is greater than 100, ellipse(50, 50, 36, 36);// draw this ellipse } if (x < 100) { // If x is less than 100 rect(35, 35, 30, 30);// draw this rectangle } line(20, 20, 80, 80);

if-else variation if ( ) { // do this code } else { // do this other code } –Note the { }s

Example from the Text // Because x is 90, only the rectangle draws int x = 90; if (x > 100) {// If x is greater than 100, ellipse(50, 50, 36, 36);// draw this ellipse. } else {// Otherwise, rect(33, 33, 34, 34);// draw this rectangle } line(20, 20, 80, 80);

if-elseif variation if ( ) { // do this code } else if ( ) { // do this other code } if ( ) { // do this code } else if ( ) { // do this other code } else { // do this other code }

Example From the Text // If x is less than or equal to 100, then draw // the rectangle. Otherwise, if x is greater than // or equal to 300, draw the line. If x is between // 100 and 300, draw the ellipse. Because x is 101, // only the ellipse draws. int x = 101; if (x <= 100) { rect(33, 33, 34, 34); } else if (x >= 300) { line(50, 0, 50, 100); } else { ellipse(50, 50, 36, 36); }

Using Conditional Statements Declare a variable temp of type int. Assume that you will use temp to determine what to wear. Your outerwear(?) choices are “ none ”, “ heavy jacket ”, “ hoodie ”, and “ raincoat ”. Write a processing program that will look at temp to determine what outerwear is appropriate for any value of temp. Write the appropriate outerwear choice using println.

So far… We've seen how to write commands in Processing –We've learned that commands need to end with a ; –We've learned how to call methods with specific arguments –We've learned how to declare variables and assign values to them –We've learned how to print values to the text output area –We've learned about the primitive variable types –We've learned how to control flow with conditional if- else statements By default, the sequence of commands we write in Processing will execute once and then the program will terminate

Motivation size(300,300); background(0); stroke(255); point( (width/11)*1, height/2); point( (width/11)*2, height/2); point( (width/11)*3, height/2); point( (width/11)*4, height/2); point( (width/11)*5, height/2); point( (width/11)*6, height/2); point( (width/11)*7, height/2); point( (width/11)*8, height/2); point( (width/11)*9, height/2); point( (width/11)*10, height/2);

A Better Way size(300,300); background(0); stroke(255); int i = 1; while(i<11) { point( (width/11)*i, height/2 ); i++; }

while Loops while( ) { } Executes the code within the code block (or the curly brackets) while the boolean expression is true

++ The Increment Operator -- The Decrement Operator Within a loop, we often want to count up (increment) and count down (decrement) often. For this the C designers created two special operators x++ is the same as writing x = x + 1 x-- is the same as writing x = x - 1

Other Operators Operators in Java/Processing also include shorthand ways to write simple addition, subtraction, multiplication and division statements: x += 2 is the same as writing x = x + 2 x *= 3 is the same as writing x = x * 3

Lines size(480, 120); smooth(); strokeWeight(2); int x = 20, inc = 8; while(x < 400) { line(x, 40, x + 60, 80); x += inc; }

Stripes size(500,500); background(255) ; noStroke() ; int numStripes = 8 ; int stripeWidth = height/numStripes ; int count = 0 ; while (count < numStripes) { if (count % 2 == 0) { fill(0) ; } else { fill(255, 0, 0) ; } rect(count*stripeWidth, 0, stripeWidth, height); count++ ; }

Checkers With Loops size(500,800); int numColumns=3, numRows=4; int x=0, y=0, count=0; int xSize= width/numColumns, ySize=height/numRows; while (count < numColumns * numRows) { if(count % 2 == 0) { fill(0); } else { fill(255); } rect(x, y, xSize, ySize); count++; x += xSize; if (count % numColumns == 0) { y += ySize; x = 0; }

for loops for ( ; ; ) { } First executes the initialization statement Then tests the boolean expression – if it's true, executes the code inside the curly brackets once Then repeats the following: execute final statement, test boolean expression, execute code if true This structure is often used to execute a block of code a specific number of times as follows: Init statement -> start counter, e.g. int counter = 0; Boolean exp -> looping condition, e.g. counter < 10; Final statement -> increment counter, e.g. counter++; (same as counter=counter+1;)

Example int i, spacing; spacing=width/5; for (i=1; i<5; i++) { ellipse(spacing*i,spacing*i,spacing,spacing); }

An Example from the Text size(500,500); for(int d=width; d>0; d-=10) { ellipse(width/2, height/2, d, d); }

Converting a for Loop to a while Loop Seeing how for loops can be converted to while loops helps you understand for loops for( ; ; ) { } is the same as while( ) { }

Example int max =500; size(max,max); colorMode(RGB, max); for(int i=0; i<=max; i++) { stroke(i,0,0); line(i, 0, i, height); } int max =500; size(max,max); colorMode(RGB, max); int i=0; while(i<=max) { stroke(i,0,0); line(i, 0, i, height); i++; }

Nested Loops noStroke(); colorMode(RGB, 100); for(int i=0; i<100; i++) { for(int j=0; j<100; j++) { stroke(i, j, 0); point(i, j); }

Checkers (again) size(500,500); background(255) ; noStroke() ; int numStripes = 8 ; int cellSize = min(width, height)/numStripes ; for (int i=0; i<numStripes; ++i) { for (int j=0; j<numStripes; ++j) { if ((i+j)%2==0) { fill(0) ; } else { fill(255, 0, 0) ; } rect(i*cellSize, j*cellSize, cellSize, cellSize) ; }

Usage Use a for loop if you know how many times you want to repeat. Use a while loop if you don’t know how many times you want the loop to execute. The while loop is considered a general purpose loop construct, but remember the test or boolean expression is evaluated outside the loop, so the loop body may not execute.

In-class Lab Modify the checkers program to –Display four different colors in some interesting way Use an else-if –Put white “checkers” in the squares –Make the checkers on the edge green

More In-class Lab Initialize variables x and y to 0. Using a while statement, create a program that writes a point out at (x,y), and incrementing x and y at each repetition until x==width or y==height. Create a regular pattern with 5 lines using a for statement. Create an image (where you change every pixel in the window) using a nested for loop.

Assignment 2 - Due Feb 3 Electronic quilts Remember to comment your code, and to submit only your source code.