Loops and Branches Ch 21 and Ch18

Loops and BranchesCh 21 and Ch18 And how you can use them to draw cool pictures!

5 Programming Concepts… • Variables and Arithmetic • Branches • Using Functions • Building your own Functions • Loops to repeat (Today) …and Branches again (Today)

Review:1) Variables and Arithmetic n = 4; y = 2; x = n + y; y = n * 2; document.write(“x=” + x + “, y=” + y);

3) Using Functions Function calls Math Functions: x = Math.sqrt(81); y = Math.sqrt(x); document.write(“x=” + x + “, y=” + y); Turtle Functions:forward(20); left(90); forward(20); right(135); backward(40); x=9, y=3 arguments

Absolute vs Relative Positioning • Relative Position: • forward, backward, left, right • keeps track of where you areand makes adjustments from your current position • Absolute motion: • moveTo, turnTo • Lets you specify exactly where or what angle • Using Cartesian geometry…a little refresher may help

4) Building your own functions • Lets you “abstract” a collection of moves • For example, these lines make a square: forward(20); right(90); forward(20); right(90); forward(20); right(90); forward(20); right(90);

If you want to draw a lot of squares, put this at the top of your script… function square(n) { forward(n); right(90); forward(n); right(90); forward(n); right(90); forward(n); right(90); }

Now you can ‘call’ your square function square(20); -------------------- left(30); square(20); left(180); square(20); moveTo(-300, -100); left(30); square(20); left(180); square(20);

Functions help manage complexity • You can do interesting patterns without a lot of repetition of code • They save time and effort • Functions can use other functions

Functions allow “vertical structure” • Top Down Programming: • A city consists of several subdivisions • A subdivision consists of many blocks of houses • A block of houses is based on a single house • Most software is designed in this way

Function Quiz: • Write a function that draws a triangle of size n: function triangle(n) { }

Function Quiz, Part II • Now write code that draws this: (start here)

5) Loops repeat blocks of code Try this: for (i=1; i<=5; i=i+1) { square(20);right(72); } Instead of this: square(20); right(72); square(20); right(72); square(20); right(72); square(20); right(72); square(20); right(72);

Syntax of a loop Start counting at 1 Add 1 to i after each cycle through for( i=1; i<=5; i=i+1 ) { STATEMENTS TO REPEAT; } Stop when you pass 5

Flow chart of a loop i = 1; Statements to repeat: square(40); right(72); true i < = 5 i = i+1; false Finish, go to next statement

World Famous Iteration (C, C++, Java) Start counting at 0 Add 1 to i after each cycle through for( i=0; i<5; i++ ) { STATEMENTS TO REPEAT; } Stop when you reach 5

Advanced: you can use the counter to represent real values like angles for (ang=0; ang<=360; ang=ang+72) { turnTo(ang); square(20); }

Application: Drawing arcs and circles for (i=0; i<180; i++) { forward(1); right(1); } for (i=0; i<360; i++) { forward(1); right(1); }

Loop and Function Quiz: We want to draw this: Naturally we decide to • Abstract a circle function • Use a loop to repeat circles

Solve the previous problem Remember, these go in 2 different places: Function defn’s go in 1st <script> block, other code in 2nd

Application: Drawing a row of triangles Use the Hex Color Code Pallete To choose colors width(10); color("#00FF33"); jumpTo(-350, 0); turnTo(0); for (i=0; i<7; i++) { triangle(50); jumpFwd(100); } <body bgcolor="#FFCCFF">

Application: Drawing a lot of random sized squares in random locations width(5); color("#993399"); for (i=0; i<100; i++) {randX=rand(-400,400); randY=rand(-300,200); jumpTo(randX, randY); size=rand(10,100); square(size); } Great idea for a function

Abstraction Again!Programmers keep an eye out for useful tasks to turn into functions: function jumpRandom( ) {var randX=rand(-400,400); var randY=rand(-300,200); jumpTo(randX, randY); }

Previous Application Simplified using new function: width(5); color("#993399"); for (i=0; i<100; i++) {jumpRandom( ); size=rand(10,100); square(size); } You can now easily use this in other places too

5) Branches give you variety What if you want a square or triangle chosen at random? choice=rand(1,2); if (choice= = 1) triangle(50); if (choice= = 2) square(50); First Try Refresh (perhaps several times)

if statement syntax if (condition) statement ; Condition – is a logical expression like score == 100 x+y>10 Statement – is any executable statement like forward(20); OR square(50);

If Statement Flowchart true choice==1 triangle(50); false Next statement

Application: Row of random squares & triangles What if you want a row of squares and triangles chosen at random? width(10); color("#00FF33"); jumpTo(-350,180); turnTo(0); for (i=0; i<7; i++) { choice=rand(1,2); if (choice= =1) triangle(50); if (choice= =2) square(50); jumpFwd(100); } First Try Refresh

Application: set line to a randomly selected color function randColor() { c=rand(1,4); if (c= =1) color("red"); if (c= =2) color("blue"); if (c= =3) color("yellow"); if (c= =4) color("green"); } width(10);for (i=0; i<9; i++){ randColor(); right(40); square(50);}

WARNING • Use { } if you want to do more than one thing: • if (choice= = 1) { triangle(50); forward(100); }

Capture your images in a “screen shot” • Press Alt and PrtScr at same time • Open Paint • Edit/Paste • You can chop out image using select tool • Dotted line box • Then paste into Microsoft Word • Or save as a .jpg file (project 2)

Additional Functions defined in Lab 4.4(plus you can use all the regular turtle functions) • square(n) – draws square of size n • triangle(n) – draws triangle of size n • jumpTo(x,y) – jumps to coordinate x, y • jumpFwd(x) – jumps forward x units • jumpBwd(x) – jumps backwards x units • randColor( ) – change the color randomly

Loops and Branches Ch 21 and Ch18