1 turtle graphics and math functions and how you can use them to draw cool pictures!
TRANSCRIPT
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