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

  • Published on

  • View

  • Download

Embed Size (px)


  • 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);



    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


View more >