1 Turtle Graphics and Math Functions And how you can use them to draw cool pictures!

2 5 Cool Programming Topics… 1.Variables and Arithmetic (last class) 2.Branches for variety (last class) 3.Using Functions (today) 4.Building your own Functions (Next class) 5.Loops to repeat (in two classes)

3 Review: 1) Variables and Arithmetic var n, x, y; n = 4; y = 2; x = n + y; y = n * 2; document.write(“x=” + x + “, y=” + y); This + concatenates the string “x=“ with the value in x, resulting in a larger string “x=6” Declare variables for use in program

4 Review: Your Turn, what is printed? var n=2, x, y=4; x = n + y * n; y = y + x * n; x = x + y; document.write(“x=” + x + “, y=” + y); ANSWER: x=34, y=24 x=2 + 4*2 = 10 y=4+10*2=24 x=10+24=34

5 Review: 2) Branches (Conditionals) var x, y=2, n=4; if ( y > n ) x = y - n; else x = n - y; document.write(“x=” + x + “, y=” + y); ANSWER: x=2, y=2 FALSE! (2 is not > 4) x=4-2=2

6 Review: Your turn…what is printed? var x=5, y=6, n=7; if ( x == 5) y = n; else n = x; if ( y < n) y = y + n; else x = n; document.write(“x=” + x + “, y=” + y); TRUE! y=7 FALSE! x=7 ANS: x=7, y=7

7 From the JavaScript Reference link

8 TODAY: Built in JavaScript Functions Sometimes your math needs will go beyond standard arithmetic Square roots, raising to the power, etc JS provides built in Math functions We also can use Turtle functions (if we include a file called a ‘library’) Not perfect… only works on your local machine, can’t make web enabled Still a lot of fun

9 From JavaScript Reference link

10 Your turn…what is printed? var n, x, y=4; x = Math.sqrt( y ); y = Math.sqrt( (x+2)*16 ); document.write(“x=” + x + “, y=” + y); y = Math.min( x, y ); document.write(“x=” + x + “, y=” + y); x=2 y=sqrt(64)=8 x=2, y=8 y=2 ANSWER: x=2,y=2

11 Some terminology… var n, x, y=4; x = Math.sqrt( y ); y = Math.sqrt( (x+2)*16 ); document.write(“x=” + x + “, y=” + y); y = Math.min( x, y ); document.write(“x=” + x + “, y=” + y); arguments Function calls Function calls are when you use a function Arguments are the data (variable or number) the function needs to do its work

12 Turtle Graphics Functions We have a nifty turtle graphics library of functions available for drawing Not standard JS…in a separate file File turtle.js has to be downloaded to the same folder as the assignment html file we are working on Any file using Turtle Graphics needs to include turtle.js

13 A simple turtle example forward(20); left(90); forward(20); right(135); backward(40); arguments Function calls x

14 For your art project, Only use these pre-made functions: forward -- move turtle forward some number of pixels backward -- move turtle backward left – turn left some number of degrees right – turn right moveTo -- move to an x,y coordinate turnTo – turn to a particular degree heading home – send turtle back to center of screen, facing up drawString – draw text at current position color – change the color of the line width – change the thickness of the line penUp – lift up the pen so no line will be drawn penDown – lower the pen so a line will be drawn rand – generate random integers between two values

15 Some Further Turtle Examples width(50); color("blue"); forward(50); width(50); color("blue"); forward(50); width(20); color("yellow"); backward(50);

16 home( ) takes you to screen center width(10); color("green"); forward(100); right(135); forward(60); home();

17 You can move without drawing… using penUp and penDown turnTo(0); // horizontal pointing right color("#C312AF"); width(50); forward(50); penUp(); forward(100); penDown(); forward(50);

18 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

19 moveTo(x,y) puts you here: moveTo(-200, 0) moveTo(200, 100) moveTo(100, -100)moveTo(-400, -200)

20 turnTo(angle) points you like so turnTo(120) turnTo(45) turnTo(315) or -45 turnTo(210) turnTo(30)

21 You can mix absolute and relative moveTo(350, -180); forward(300); turnTo(200); forward(500); moveTo(-350, 180); (350, -180) (-350, 180);

22 A cool Turtle function…rand( ) var x, y; x = rand(-200, 200); y = rand(0, 50); moveTo(x, y); random value -200 to 200 random value 0 to 50 go to that random point, will be different each time you refresh

23 You can use rand with if-else to select random colors var n; n = rand(1, 4); if (n = = 1) color(“red”); else if (n = = 2) color(“yellow”); else if (n = = 3) color(("#C312AF”); else color(“lime”); last branch is like “none of the above” You can add as many branches as you like Notice the cascading if, else if structure

24 To print your picture… Can’t print from web browser (doesn’t show) Do a screen capture…Alt-PrtScr Open Paint Edit > Paste Page Setup Orientation: Landscape Fit to: 1 by 1 pages OK Now File > Print will work