Help
Using the Editor
Layout
The editor page has three areas: a code editor on the left (or top on mobile), a canvas on the right where the turtle draws, and a console at the bottom showing output and errors.
Controls
| Button | What it does |
|---|
| Run | Execute your program. If animation speed is set to Instant, the drawing appears all at once. Otherwise, the turtle draws step by step. |
| Stop | Stop a running animation. The drawing stays as-is. |
| Step | Advance the drawing by one operation. If you haven't run the program yet, Step will run it first and pause at the beginning so you can step through it. |
| Clear | Clear the canvas and reset everything. Your code stays in the editor. |
| Save & Share | Save your program and get a shareable link. Anyone with the link can view and run your program. |
Speed Slider
Controls the animation speed. Instant (all the way left) draws everything immediately. Moving the slider right slows the animation down, letting you watch the turtle draw. Values are in milliseconds between drawing steps.
Gallery
The Gallery page shows example programs you can load into the editor and run. Click "Try it" on any example to open it.
Logo Language Reference
st-turtle implements a subset of the UCBLogo (Berkeley Logo) standard. All turtle graphics, arithmetic, control flow, procedures, and data operations are supported. Features not applicable to a web environment—file I/O, shell commands, keyboard/mouse input, terminal control, and workspace management—are intentionally excluded.
Logo is an educational programming language where you control a turtle that draws on a canvas. The turtle starts at the center facing north. Commands are case-insensitive.
Turtle Movement
| Command | Short | Example | Description |
|---|
| FORWARD n | FD | FD 100 | Move forward n units |
| BACK n | BK | BK 50 | Move backward n units |
| RIGHT n | RT | RT 90 | Turn right n degrees |
| LEFT n | LT | LT 45 | Turn left n degrees |
| HOME | | HOME | Return to center, heading north |
| SETXY x y | | SETXY 100 50 | Move to position (x, y) |
| SETX x | | SETX 100 | Set X coordinate |
| SETY y | | SETY -50 | Set Y coordinate |
| SETHEADING n | SETH | SETH 180 | Set heading (0=north, clockwise) |
| ARC angle radius | | ARC 360 50 | Draw an arc |
Pen Control
| Command | Short | Example | Description |
|---|
| PENUP | PU | PU | Lift pen (stop drawing) |
| PENDOWN | PD | PD | Put pen down (resume drawing) |
| SETPENCOLOR c | SETPC | SETPC 4 | Set pen color by index (0–15) |
| | | SETPC [255 0 0] | Set pen color by RGB |
| SETPENSIZE n | SETPS | SETPS 3 | Set line width |
| SETBACKGROUND c | SETBG | SETBG 0 | Set background color by index (0–15) |
| | | SETBG [0 128 255] | Set background color by RGB |
Screen & Visibility
| Command | Short | Description |
|---|
| CLEARSCREEN | CS | Clear canvas and reset turtle to home |
| CLEAN | | Clear drawings but keep turtle position |
| SHOWTURTLE | ST | Show turtle cursor |
| HIDETURTLE | HT | Hide turtle cursor |
Text
| Command | Example | Description |
|---|
| LABEL text | LABEL "hello | Draw text on the canvas at the turtle's position |
| SETLABELHEIGHT n | SETLABELHEIGHT 24 | Set the font size for LABEL |
Boundary Modes
| Command | Description |
|---|
| WINDOW | No boundaries (default). Turtle can move anywhere. |
| WRAP | Turtle wraps around to the opposite edge when it leaves the canvas. |
| FENCE | Turtle cannot move past the canvas edge. Raises an error if attempted. |
Variables
| Command | Example | Description |
|---|
| MAKE | MAKE "size 100 | Set a global variable |
| LOCALMAKE | LOCALMAKE "x 50 | Set a local variable (current scope) |
| LOCAL | LOCAL "x | Declare a local variable |
| :name | :size | Read a variable's value |
Control Flow
| Command | Example | Description |
|---|
| REPEAT n [...] | REPEAT 4 [FD 100 RT 90] | Repeat commands n times |
| IF cond [...] | IF :x > 10 [FD :x] | Execute if condition is true |
| IFELSE cond [...] [...] | IFELSE :x > 0 [FD :x] [BK :x] | If/else branching |
| FOR [var start end] [...] | FOR [i 1 10] [FD :i * 10 RT 90] | Counted loop |
| FOR [var start end step] [...] | FOR [i 1 20 2] [FD :i RT 90] | Counted loop with step |
| WHILE [cond] [...] | WHILE [:x < 100] [FD :x MAKE "x :x + 10] | Loop while condition is true |
| UNTIL [cond] [...] | UNTIL [:x >= 10] [MAKE "x :x + 1] | Loop until condition becomes true |
| FOREVER [...] | FOREVER [FD 1 RT 1] | Loop forever (exit with STOP) |
| FOREACH list [...] | FOREACH [1 2 3] [PRINT :?] | Iterate over a list. Use :? for current item, :?rest for remaining. |
| REPCOUNT | FD REPCOUNT * 10 | Current iteration number inside REPEAT (starts at 1) |
Procedures
| Syntax | Description |
|---|
| TO name :param1 :param2 ... body END | Define a procedure |
| STOP | Exit a procedure early |
| OUTPUT value | Return a value from a procedure (abbrev: OP) |
Example:
TO SQUARE :size
REPEAT 4 [FD :size RT 90]
END
SQUARE 100
Arithmetic & Comparison
| Operator | Description |
|---|
| + - * / % | Add, subtract, multiply, divide, remainder |
| = <> | Equal, not equal |
| < > <= >= | Comparisons |
| AND, OR, NOT | Logical operators |
Math Functions
| Function | Description |
|---|
| SQRT, ABS, ROUND, INT | Square root, absolute value, round, truncate |
| SIN, COS, TAN | Trigonometry (degrees in, value out) |
| ASIN, ACOS, ATAN | Inverse trig (value in, degrees out). ATAN also available as ARCTAN. |
| (ARCTAN x y) | Two-argument arctangent: atan(y/x) in degrees |
| LN, LOG10, EXP | Natural log, log base 10, e^x |
| POWER base exp | Exponentiation |
| REMAINDER a b, MODULO a b | Remainder / modulo |
| MAX a b, MIN a b | Maximum, minimum |
| RANDOM n | Random integer from 0 to n–1 |
| (RANDOM start end) | Random integer from start to end (inclusive) |
| MINUS n | Negation (use instead of "-1" in arguments) |
List & Word Functions
| Function | Description |
|---|
| FIRST, LAST | First/last element of list or character of word |
| BUTFIRST (BF), BUTLAST (BL) | All but first/last |
| COUNT | Length of list or word |
| ITEM n list | Get element at position n (1-indexed) |
| FPUT item list | Add item to front of list |
| LPUT item list | Add item to end of list |
| LIST a b ... | Create a list |
| WORD a b ... | Concatenate into a word |
| SENTENCE a b ... (SE) | Flatten and combine into a list |
| MEMBER item list | Return tail of list/word starting at item (empty if not found) |
| ASCII word | Character code of first character |
| CHAR n | Character from code point |
| UPPERCASE word | Convert to uppercase |
| LOWERCASE word | Convert to lowercase |
| SUBSTRING? a b | Is a contained within b? |
Queries & Predicates
| Function | Description |
|---|
| XCOR, YCOR | Turtle's current X or Y coordinate |
| HEADING | Turtle's current heading |
| POS | Turtle's position as [x y] |
| PENDOWNP (PENDOWN?) | Is the pen down? |
| PENCOLOR (PC) | Current pen color as [r g b] |
| BACKGROUND (BG) | Current background color as [r g b] |
| PENSIZE | Current pen size |
| SHOWNP (SHOWN?) | Is the turtle visible? |
| TOWARDS [x y] | Heading towards a point |
| DEFINEDP (DEFINED?) | Is a procedure defined? |
| NAMEP (NAME?) | Is a variable defined? |
| NUMBER?, WORD?, LIST?, EMPTY?, MEMBER? | Type and membership checks |
Output
| Command | Description |
|---|
| PRINT (PR) | Print a value to the console |
| SHOW | Print a value to the console |
| TYPE | Print a value to the console |
Syntax Notes
- Commands are case-insensitive: FD, fd, and Fd all work.
- Variables are prefixed with
: when reading: :size - String literals use
" prefix: "hello. Use \ to include spaces: "hello\ world - Lists use square brackets:
[1 2 3] - Comments start with
; and continue to end of line. - Booleans are the words
"true and "false. - Use
MINUS 1 instead of -1 when passing negative numbers as procedure arguments. - Programs are limited to 1,000,000 operations to prevent infinite loops.
Coordinate System
- Origin (0, 0) is at the center of the canvas.
- X increases to the right, Y increases upward.
- Heading 0 = north, 90 = east, 180 = south, 270 = west.
Color Table
SETPENCOLOR and SETBACKGROUND accept a color index (0–15) or an [R G B] list with values from 0–255.
| Index | Color | Index | Color |
|---|
| 0 | Black | 8 | Brown |
| 1 | Blue | 9 | Tan |
| 2 | Green | 10 | Forest |
| 3 | Cyan | 11 | Aqua |
| 4 | Red | 12 | Salmon |
| 5 | Magenta | 13 | Purple |
| 6 | Yellow | 14 | Orange |
| 7 | White | 15 | Grey |
Differences from UCBLogo
st-turtle follows the UCBLogo standard with these differences:
- RGB values use 0–255 instead of UCBLogo’s 0–100 (percent saturation). This matches CSS/web conventions. Example: SETPC [255 0 0] for red.
- Additional math functions: ABS, TAN, ASIN, ACOS, MAX, MIN are provided as extensions beyond UCBLogo’s built-in set. ATAN is an alias for the standard ARCTAN.
Getting Started
Draw a Square
REPEAT 4 [FD 100 RT 90]
Draw a Circle
REPEAT 360 [FD 1 RT 1]
Colorful Spiral
FOR [i 1 200] [
SETPC REMAINDER :i 16
FD :i
RT 91
]
Define and Use a Procedure
TO POLYGON :sides :size
REPEAT :sides [FD :size RT 360 / :sides]
END
POLYGON 6 80
PU FD 120 PD
POLYGON 8 60
Visit the Gallery for more examples including fractals, flowers, and recursive patterns.