prev

next

of 24

Published on

02-Jan-2016View

212Download

0

Embed Size (px)

Transcript

Turtle Graphics and Math FunctionsAnd how you can use them to draw cool pictures!

5 Cool Programming TopicsVariables and Arithmetic (last class)Branches for variety (last class)Using Functions (today)Building your own Functions (Next class)Loops to repeat (in two classes)

Review:1) Variables and Arithmeticvar 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=6Declare variables for use in program

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=24x=2 + 4*2 = 10y=4+10*2=24x=10+24=34

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=2FALSE! (2 is not > 4)x=4-2=2

Review:Your turnwhat 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=7ANS: x=7, y=7

From the JavaScript Reference link

TODAY:Built in JavaScript FunctionsSometimes your math needs will go beyond standard arithmeticSquare roots, raising to the power, etcJS provides built in Math functionsWe also can use Turtle functions (if we include a file called a library)Not perfect only works on your local machine, cant make web enabledStill a lot of fun

From JavaScript Reference link

Your turnwhat 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=8y=2

ANSWER: x=2,y=2

Some terminologyvar 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);

argumentsFunction callsFunction calls are when you use a functionArguments are the data (variable or number) the function needs to do its work

Turtle Graphics FunctionsWe have a nifty turtle graphics library of functions available for drawingNot standard JSin a separate fileFile turtle.js has to be downloaded to the same folder as the assignment html file we are working onAny file using Turtle Graphics needs to include turtle.js

A simple turtle example

forward(20);left(90);forward(20);right(135);backward(40);argumentsFunction callsx

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

Some Further Turtle Exampleswidth(50);color("blue");forward(50);------------------width(50); color("blue"); forward(50);width(20); color("yellow"); backward(50);

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

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

Absolute vs Relative PositioningRelative Position:forward, backward, left, right keeps track of where you are and makes adjustments from your current positionAbsolute motion:moveTo, turnTo Lets you specify exactly where or what angleUsing Cartesian geometry a little refresher may help

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

turnTo(angle) points you like soturnTo(120)turnTo(45)turnTo(315) or -45turnTo(210)turnTo(30)901802700

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

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

You can use rand with if-elseto select random colorsvar 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 aboveYou can add as many branches as you likeNotice the cascading if, else if structure

To print your pictureCant print from web browser (doesnt show)Do a screen captureAlt-PrtScrOpen PaintEdit > PastePage SetupOrientation: LandscapeFit to: 1 by 1 pagesOKNow File > Print will work