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 (<boolean expression>) {// 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 Processingprintln(3 > 5); // prints falseprintln(5 > 3); // prints trueprintln(5 > 5); // prints false

println(3 < 5); // prints trueprintln(5 < 3); // prints falseprintln(5 < 5); // prints false

println(3 >= 5); // prints falseprintln(5 >= 3); // prints trueprintln(5 >= 5); // prints true

println(3 <= 5); // prints trueprintln(5 <= 3); // prints falseprintln(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 ( <boolean expression> ) { // 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 ( <boolean expression> ) { // do this code} else if ( <another boolean expression> ) { // do this other code}

if ( <boolean expression> ) { // do this code} else if ( <another boolean expression> ) { // 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(<boolean exp>) {

<code to execute multiple times>

}

• 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 loopsfor (<init statement>; <boolean exp>; <final statement>) { <code to execute in loop>}

• 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(<init statement>; <boolean exp>; <final statement>) { <code>}

is the same as

<init statement>while(<boolean exp>) { <code> <final statement>

}

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.