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

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=2y=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 FunctionsWe 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 backwardleft – turn left some number of degrees right – turn right moveTo -- move to an x,y coordinateturnTo – turn to a particular degree heading home – send turtle back to center of screen, facing updrawString – 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 drawnrand – generate random integers between two values

15

Some Further Turtle Exampleswidth(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)

90

180

270

0

21

You can mix absolute and relativemoveTo(350, -180); forward(300);

turnTo(200); forward(500);

moveTo(-350, 180);

(350, -180)

300

500

(-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-elseto 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 SetupOrientation: Landscape

Fit to: 1 by 1 pages

OK

Now File > Print will work