Click and drag on the drag bar to resize columns.

Click and drag on the drag bar to resize columns.

Home

Language Reference

  • forward(distance) | fd(distance)

    Move the turtle forward distance pixels.

    Example: forward (10)

  • backward(distance) | back(distance) | bk(distance)

    Move the turtle backward distance pixels, but leave it pointing forward.

    Example: backward (10)

  • right(angle) | rt(angle) | turn(angle)

    Turn the turtle to the right angle degrees.

    Example: right (90)

  • left(angle)

    Turn the turtle to the left angle degrees.

    Example: left (90)

  • penup() | penUp() | up() | pu()

    Lift the pen in the turtle so that it does not leave a mark as it moves.

    Example: penUp()

  • pendown() | penDown() | down() | pd()

    Lower the pen in the turtle so that it leaves a mark as it moves.

    Example: penDown()

  • hideturtle() | hideTurtle() | ht()

    Hide the turtle. It can still draw, but it isn't shown.

    Example: hideTurtle()

  • showturtle() | showTurtle() | st()

    Show the turtle.

    Example: showTurtle()

  • home()

    Move the turtle to its home in the center (x=0, y=0) and pointing toward the top (angle=0).

    Example: home()

  • clear()

    Clear the graphics area, but leave the turtle where it is.

    Example: clear()

  • reset()

    Clear the graphics area and move the turtle to its home in the center (x=0, y=0) and pointing toward the top (angle=0).

    Example: reset()

  • goto(x,y) | setposition(x,y) | setPosition(x,y) | setpos(x,y) | setPos(x,y)

    Move the turtle to the coordinates x pixels to the right of the center of the drawing area (or -x pixels to the left of the center) and y pixels above the center of the drawing area (or -y to below the center). This does not draw on the way.

    Example: goto (20,10)

  • setx(x) | setX(x)

    Move the turtle horizontally to the coordinates x pixels to the right of the center of the drawing area (or -x pixels to the left of the center).

    Example: setx (0)

  • sety(y) | setY(y)

    Move the turtle vertically to the coordinates y pixels above the center of the drawing area (or -y to below the center). This does not draw on the way.

    Example: sety (0)

  • angle(angle) | setheading(angle) | seth(angle)

    Turn the turtle to to the absolute angle relative to top of the graphic area. 0 is the top, 0 is toward the top, 90 is toward the right, 180 is toward the bottom, and 270 -90 is toward the left.

    Example: angle (90)

  • width(width) | pensize(width) | penSize(width) | penwidth(width) | penWidth(width) |

    Change the width of the turtle pen (in pixels).

    Example: width(5);

  • color(colorcode)

    Change the color of the turtle pen. The colorcode may be a number from 0 to 15 representing the standard turtle graphics colors.

    The colorcode may also be a quoted string with any acceptable CSS color code as in:

    • "colorName" where colorName is any of the named CSS colors.
    • "#RRGGBB" where RR, GG, and BB is the hexidecimal amount of red, green and blue respectively.
    • "rgb(RR, GG, BB)" where RR, GG, and BB is the decimal amount of red, green and blue respectively. Each value is between 0 and 255.
    • "rgba(RR, GG, BB, AA)" where RR, GG, and BB is the decimal amount of red, green and blue respectively and AA is the alpha channel for transparancy between 1.0 for opaque and 0.0 for totally transparent.
    • "hsl('hue, saturation%, lightness%, AA')" where the values are: hue is position on the color wheel (0 to 360), saturation% is the saturation percentage, and lightness% is the lightness percentage.
    • "hsla('hue, saturation%, lightness%, AA')" where the values are: hue is position on the color wheel (0 to 360), saturation% is the saturation percentage (include the percent sign), lightness% is the lightness percentage (include the percent sign), and AA is the alpha channel for transparancy between 1.0 for opaque and 0.0 for totally transparent.

    Example: color(1)

    Example: color("red")

    Example: color("#ff0000")

    Example: color("rbg(255,0,0)")

    Example: color("rbg(255,0,0, .5)")

    Example: color("hsl( 0, 100%, 50%")

    Example: color("hsl( 0, 100%, 50%, 0.4")

  • write(string)

    Places the text in the stringalong the projected path of the turtle. The string may be a set of characters enclosed by single or double quotation marks. The string may also be a value returned by a function.

    Example: write("Hello World")

  • setfont(fontName) | setFont(fontName)

    Set the characteristics (style, variant, weight, size, and font-family desired for the font for subsequent writes.

    Example: setfont("italic small-caps bold 12px courier")

  • curveright (radius[,extent]) | curveRight (radius[,extent])

    Draw a circular curve from the turtle's postion. The center of the curve is to the right of the turtle at a perpendicular distance of radius pixels. The curve is a full circle unless extent is provided to limit the number of degrees of arc.

    Example: curveRight(30)

    Example: curveRight(10,45)

  • curveleft (radius[,extent]) | curveLeft (radius[,extent])

    Draw a circular curve from the turtle's postion. The center of the curve is to the left of the turtle at a perpendicular distance of radius pixels. The curve is a full circle unless extent is provided to limit the number of degrees of arc.

    Example: curveLeft(20)

    Example: curveLeft(10,45)

  • circle (radius[[,(extent],(CCW])

    Draw a circle or arc centered on the turtle's postion. A full circle is drawn unless extent is provided to limit the number of degrees of arc. The arc is drawn clockwise unless a boolean CCW is supplied and has a value of false.

    Example: circle(10)

    Example: circle(20,90)

    Example: circle(30,-90,false)

  • dot ([radius])

    // radius in pixels (if none, max of pensize+4, 2*pensize) Draw a filled circle centered on the turtle's postion. The circle is drawn with a radius of radius) pixels. If radius) is not specified, it defaults to the larger of width plus 4 or twice the pensize).

    Example: dot()

    Example: dot(10)

  • beginshape() | beginShape()

    Marks the begining of a shape to be filled. The shape consists of a set of line segments (forward, backward, right, left, curveright, curveleft). The set should be continuous and begin and end at the same point.

    Example: beginShape()

  • fillShape([styl])

    Fills the shape begun with the last beginShape() directive. The shape is filled with styl, which may be a logo color number, a normal HTML color definition (see color above), a gradient or a pattern. This defaults to transparent or no color.

    Example: fillShape("blue")

  • n = random([low,]high)

    Pick a random number between low and high -1. If only one value high is provided, pick a number between 0 and high -1.

    Example: write(random(1,7)+ " ")

    Example: write(random(6)+ " ")

  • repeat(n, action)

    Allows a function action or group of actions to be repeated n times.

    Example: repeat (4, function () {forward(10);right(90)})

    Example: function el () {forward(10);right(90)}; repeat (4, el)

  • wrap(bool)

    Turns wrapping on and off at the edges of the graphic area by setting it true or false respecitively.

    Example: wrap(true)

    Example: wrap(false)

  • animate(action,ms)

    Evalutes action every ms milliseconds.

    Example: animate ("forward(10)",100)

    Example: animate ("forward(100);right(90);",100)

    Example: function el () {forward(100);right(90)}; animate (el,100)

  • delay(action,ms)

    Evalutes action after a delay of ms milliseconds.

    Example: delay ("forward(10)",1000)

    Example: delay ("forward(100);right(90);",1000)

    Example: function el() {forward(100);right(90); delay (el,100)};el()

  • redrawOnMove(bool)

    Turn redrawing on or off by specifying the bool as true or false.

    Example: redrawOnMove(true)

    Example: redrawOnMove(false)

  • draw()

    Draw the turtle and the current image.

    Example: draw()

  • n = minx() | n = minX()

    Return the minimum value of x in pixels

    Example: write(minX())

  • n = maxx() | n = maxX()

    Return the maximum value of x in pixels

    Example: write(maxX())

  • n = miny() | n = minY()

    Return the minimum value of Y in pixels

    Example: write(minY())

  • n = maxy() | n = maxY()

    Return the maximum value of Y in pixels

    Example: write(maxY())

The language reference lists the available functions for turtle graphics.

Parameters are italicized included within parentheses '(' and ')' characters. Optional parameters and separating commas are enclosed withing square bracket '[' and ']' characters (the square brackets should not be entered).

Alternative forms of the functions are separated with the pipe '|' character (e.g., cat()|dog() means cat() or dog()).

Examples are shown in bold typewriter font. Each example may be clicked to immediately execute it to see what it does.

Canvas

The i button toggles the rollover help text.

The canvas is where the turtle graphics are drawn. The turtle is the green triangle pointing in its direction of travel.

The Command area is where text can be entered and executed by pressing the ENTER (Return) key.

The Reset button clears the canvas and moves the turtle to its start position.

Run Demo button runs the function in the Code area named demo().

The Stop button stops animation.

The Save Canvas button takes a snap shot of the canvas and saves in the browser download file with the name TurtleGraphic.png.

The Save Canvas button takes a snap shot of the canvas and saves in the browser download file with the name TurtleGraphic.png.

Code Area

The Examples select is used to load an example into the defintions area.

The example can be run with the Run Demo button.

The code area is for the entry of multi-line programs, helper functions and examples.

The code can be examined or modified as desired.

Individual functions may be executed by typing their name and partheses into the Command line (for example: demo()) and pressing ENTER or RETURN.

The Upload button opens a dialog to select a file to load into the code text area.

The Download button downloads the code text area to the directory designated for downloads by the browser.

.js

The Download Filename text area holds the filename used when downloading the code text area to the download directory.

The Clear button clears the code text area to allow entry of new programs.