Turtle Graphics and
Math Functions
And how you can use them
to draw cool pictures!
1
5 Cool Programming Topics…
1.
2.
3.
4.
5.
Variables and Arithmetic (last class)
Branches for variety (last class)
Using Functions (today)
Building your own Functions (Next class)
Loops to repeat (in two classes)
2
Review:
1) Variables and Arithmetic
Declare variables
var n, x, y;
for use in program
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”
3
Review:
Your Turn, what is printed?
var n=2, x, y=4;
x=2 + 4*2 = 10
x = n + y * n;
y=4+10*2=24
y = y + x * n;
x=10+24=34
x = x + y;
document.write(“x=” + x + “, y=” + y);
ANSWER: x=34, y=24
4
Review:
2) Branches (Conditionals)
var x, y=2, n=4;
FALSE! (2 is not > 4)
if ( y > n )
x = y - n;
else
x = n - y;
x=4-2=2
document.write(“x=” + x + “, y=” + y);
ANSWER: x=2, y=2
5
Review:
Your turn…what is printed?
var x=5, y=6, n=7;
TRUE!
if ( x == 5)
y=7
y = n;
else
n = x;
FALSE!
if ( y < n)
y = y + n;
else
ANS: x=7, y=7
x = n;
x=7
document.write(“x=” + x + “, y=” + y);
6
From the JavaScript Reference link
7
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
8
From JavaScript Reference link
9
Your turn…what is printed?
var n, x, y=4;
x = Math.sqrt( y );
x=2
y=sqrt(64)=8
y = Math.sqrt( (x+2)*16 );
document.write(“x=” + x + “, y=” + y); x=2, y=8
y=2
y = Math.min( x, y );
document.write(“x=” + x + “, y=” + y);
ANSWER: x=2,y=2
10
Some terminology…
Function calls
var n, x, y=4;
x = Math.sqrt( y );
arguments
y = Math.sqrt( (x+2)*16 );
document.write(“x=” + x + “, y=” + y);
y = Math.min( x, y );
document.write(“x=” + x + “, y=” + y);
Function calls are when you use a function
Arguments are the data (variable or number) the
function needs to do its work
11
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
12
A simple turtle example
Function calls
forward(20);
left(90);
forward(20);
right(135);
backward(40);
x
arguments
13
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
14
Some Further Turtle Examples
width(50);
color("blue");
forward(50);
-----------------width(50); color("blue"); forward(50);
width(20); color("yellow"); backward(50);
15
home( ) takes you to
screen center
width(10);
color("green");
forward(100); right(135);
forward(60); home();
16
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);
17
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
18
moveTo(x,y) puts you here:
moveTo(200, 100)
moveTo(-200, 0)
moveTo(-400, -200)
moveTo(100,
-100)
19
turnTo(angle) points you like so
turnTo(120)
turnTo(45)
90
turnTo(30)
180
0
turnTo(210)
270
turnTo(315) or -45
20
You can mix absolute and relative
(-350, 180);
moveTo(350, -180); forward(300);
turnTo(200); forward(500);
moveTo(-350, 180);
500
300
(350, -180)
21
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
22
You can use rand with if-else
to select random colors
var n;
Notice the cascading if, else if
n = rand(1, 4);
structure
if (n = = 1)
color(“red”);
You can add as many branches as
else if (n = = 2)
you like
color(“yellow”);
else if (n = = 3)
color(("#C312AF”);
else
last branch is like “none of the
color(“lime”);
above”
23
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
24