You instruct the web turtle to move, turn and draw things on the screen by placing commands in the text field and then clicking the "Draw It!" button. The screen will be updated with the new image, and your program will be in the text field again.
Place one command per line in the text field and the turtle will follow your commands one by one. (Automatic looping and subroutines are available, explained later).
Note: you can have blank lines and can place spaces before commands (indenting them) to make your program more readable.
The easiest way is to learn by example. A number of pre-written programs are available on the Examples page. When you begin with an example, the drawing will appear, and the pre-written program will be in the text field. Change things around and then click "Draw It" to see the results. If you made a mistake, you can always change it back or click your "BACK" button.
General movement in a turtle-based drawing environment uses the idea of direction and motion. The turtle is facing a certain direction and you can tell it to turn around or move forward or backward.
Additional commands in Web Turtle allow you to point the turtle to a certain angle, regardless of which way it's pointing, return it to it's "home" starting position, and remember and return to where it was.
Move the turtle forward pixels pixels in the direction it's pointing.
Rotate the turtle degrees degrees to the right
Rotate the turtle degrees degrees to the left
Rotate the turtle so it's facing degrees degrees. (0 is right, 90 is up, -90 or 270 is down, 180 is left.)
Return the turtle to the center ("home") position and face it 90 degrees (up).
This tells the turtle to make a note of its current location and direction. You can remember more than one place- the latest place remembered will be used when using "GOBACK" (below), followed by the next latest place, and so on.
This transports the turtle to its most recently "REMEMBERed" spot.
This is similar to the "GOBACK" command, in that the most recently "REMEMBERed" spot is discarded; however, the turtle does not move.
Web Turtle drawing gives you features like pen color, pen thickness and even transparency control (how dark to color over the existing image).
Move the turtle forward pixels pixels, leaving a trail (line) on the screen.
This lets you set the color that the turtle draws with. You can also specify "+1", "+2", etc. or "-1", "-2", etc. to change the color relative to what it is now.
See the Color Table.
Set the thickness of the lines the turtle draws. You can also specify "+1", "+2", etc. or "-1", "-2", etc. to increase or decrease the thickness relative to what it is now.
Set the transparency of the lines the turtle draws. 0 transparency means the line is drawn dark (any lines you draw over are replaced). 100 means the line you draw is invisible. You can also specify "+1", "+2", etc. or "-1", "-2", etc. to increase or decrease the transparency.
You can even draw text with Web Turtle! Standard (upright) text as well as angled text rendering is available.
To print variables (numeric variables
Use this to draw upright text at the position of the turtle. The turtle is not moved.
PRINT Hello World!
This draws text at the angle the turtle is pointing, and it moves the turtle forward as it draws. It's like drawing lines out of words!
$Z), use the new "
PRINTVAR" command. (There's currently no support for TURTLEPRINT-style variable printing; sorry!)
It's extremely useful to be able to repeat a set of commands a number of times. To draw a square, for example, you repeat the set of commands: "draw a line and turn right 90 degrees" four times.
An example of using "REPEAT."
This tells the turtle to repeat all of the commands between here and the command "NEXT" iterations times. You can even "nest" other "REPEAT...NEXT" loops within a "REPEAT...NEXT" loop!
This tells the turtle to go back to the "REPEAT" and repeat the commands, unless it's already done that iterations times.
You can create complicated drawing routines (like one to draw a square, for example) and access them many different times in your program by turning them into a "subroutine." Subroutines are like small programs within a program.
An example of creating subroutines.
This tells the turtle that the subroutine called label begins here.
Use "GO" to tell the turtle to "jump" into the subroutine called label and execute the commands in there.
This tells the turtle to "jump" back out of the current subroutine and continue what it was doing.
This stops the turtle and shows you the image.
As with other languages, you can have WebTurtle do different things depending on the state of your program. For example, if the variable "L" is less than 2, you may want to change the color... or if the variable "A" is greater than 10, you might want to keep it at 10.
The "IF...ELSE...ENDIF" structure lets you do this depending on that evaluation of expressions...
An example of using the "IF...ELSE...ENDIF" structure.
IFv1 operation v2
If v1, when compared using the operation operation to v2 is true, then do the following commands, otherwise jump to the next matching "ELSE" or "ENDIF" below.
If the expression evaluated in the matching "IF" above was false, the program continues here. Otherwise, when this command is met, the program jumps to the next macthing "ENDIF" below.
If the expression evaluated in the matching "IF" above was false, and this structure contains no "ELSE", the program continues here. Otherwise, when this command is met, it is ignored.
Not equal to
Less than or equal to
Greater than or equal to
It's also useful to add comments to your code, explaining what part of it does, or temporarily "commenting out" lines of code instead of deleting them. Comments are ignored by Web Turtle.
The text comment is ignored by the turtle when it sees the ";" (semicolon).
; the next part of the program draws a face
The little text type-in fields below the program and the "Draw It!" button can be used to read input from the user.
Whatever the user types can be referred to by using the special "
^1" through "
^9" variables. For example, if you want to print out the exact text they typed into the first field, you could go:
Or, as a short-cut, just use "
^" to get the value of the "Input 1" field:
You can also read user input as numbers (any non-digit input from the user will be seen as "0"):
You can even work with a pair. To add the first two inputs together, you could do:
LET I ^2
LET X ^1+^2
Sometimes you may want to know where your turtle is and which way it's pointing.
If this command ever gets executed during your program, an image of a turtle will appear on the screen at the turtle's final location, rotated to point in the direction that the turtle is facing.
Like other programming languages, Web Turtle lets you use "variables." These are like boxes with numbers in them. Just like the way subroutines let you write some code once and use it many times, variables let you state a number and use it many times. (Say you had a picture where you draw a line of 100 pixels, and then back up 100 pixels to get back to where you where. If you wanted to change the length the line, you can either change both "100"s, or instead, use a variable and change its value.)How to use variables and equations.
You have 26 variables available to you, lettered "A" through "Z." The value after the variable can be a number (like "100"), another variable (like "X") or even a simple equation (like "10*X")!
LET A 10
Web Turtle also gives you "strings" - boxes with words in them. You would use these in the commands that can accept text: "PRINT," "TURTLEPRINT," and "COLOR."
You can also convert numbers and variables into strings by preceding them with a period ("."). For example: "
PRINT .X" will print the number stored in "X" as if you had entered it manually as text.
You have 26 strings available to you, lettered "$A" through "$Z." The value after the variable can be plain text (like "Hello there"), another string (like "$B"), or a number or variable, if preceeded by a "." (like ".123" or ".X").
LET $M Test Message
Since WebTurtle is a procedural language (not a functional one), and since it has no "local" variables (that is, variables that are only affected within a subroutine), it's difficult to create recursive functions.
Recursive functions are those that call themselves. The "factorial" (or "!") mathematical function is an excellent example... 5! is actually 5*4*3*2*1. 6! is 6*5*4*3*2*1 (or, 6*5!).
To simulate what happens when a function calls itself (its local variables are recorded, the function call is executed, and then local variables are restored), WebTurtle provides a "stack."
A stack is like a large box that contains many values. You can place values into it and take them out. If you stick the number "5" in, you can pull the number "5" out. If you stick the number "1" in, and then stick the number "8" on top of it, you can pull out the number "8" and then the number "1." This is called "FILO", or "First In, Last Out."
Factorial in WebTurtle
The value value is placed into the stack.
The value at the top of the stack is removed and placed into the variable variable.