1. 1 Loops and Branches Ch 21 and Ch18 And how you can use them to draw cool pictures!

2. 2 5 Programming Concepts… 1.Variables and Arithmetic 2.Branches 3.Using Functions 4.Building your own Functions 5.Loops to repeat (Today) …and Branches again (Today)

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

4. 4 3) Using Functions 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); Function calls arguments x=9, y=3

5. 5 Absolute vs Relative Positioning Relative Position: forward, backward, left, right keeps track of where you are and 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

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

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

8. 8 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);

9. 9 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

10. 10 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

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

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

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

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

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

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

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

18. 18 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); }

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

20. 20 Solve the previous problem Your Circle Function Definition: The Code that uses circle: Remember, these go in 2 different places: Function defn’s go in 1 st block, other code in 2 nd

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

22. 22 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

23. 23 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); }

24. 24 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

25. 25 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)

26. 26 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);

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

28. 28 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

29. 29 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); }

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

31. 31 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)

32. 32 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