TRRTL.COM Help

History

Throughout the 1970s and 1980s many children's first experience of computer programming came from Logo, a general-purpose interpreted language most-famous for its graphical capabilities. With these, students could instruct a graphical "turtle" (or a physical hardware robot) to draw straight lines and turn corners.

Logo is little-used today, but thought that it could benefit from a modern, web-based reimagining. And because I apparently never got over Web 2.0-style names, it's called TRRTL. (Here's the full story.)

Compatibility

This site works on modern desktop browsers and some mobile browsers (mobile Chrome has reduced functionality because it does not support keypress events).

Getting Started

Type commands to the turtle to tell it what to do. Commands are case-sensitive. For example:

forward 100
Move the turtle forward 100 turtle-steps. Like all movement, the turtle will usually drag a pen as it goes, leaving a line. Aliases: fwd / fd
backward 50
Reverse the turtle by 50 turtle-steps. Aliases: bwd / bd
right 90
Turns the turtle right by 90 degrees (one quarter-turn). Alias: rt
left 45
Turns the turtle left by 45 degrees (one eighth-turn). Alias: rt
pen up / pen down
Raises or lower's the turtle's pen. The pen starts "down" but can be lifted "up" to allow the turtle to move without drawing a line. Put it "down" again to continue drawing.
colour 'red'
Changes the colour of the pen used by the turtle. Within the quotes you can specify any of the 140 named HTML colours (e.g. lightblue, rebeccapurple) or a hex code (e.g. #ffb6c1). Alias: color
turtle show / turtle hide
Shows or hides the turtle; hide it to show off your artwork.
clear()
Clears the canvas but leaves the turtle in place. Note the parentheses ().
home()
Teleports the turtle to its starting position and orientation, resetting the pen colour, state, and turtle visibility. Note the parentheses ().
reset()
Shorthand for performing a clear() followed by a home(). Note the parentheses (). You can also perform a reset() by clicking the "reset" button near the bottom right of the screen.

Advanced Drawing

Additional drawing commands include:

moveX 100
Teleports the turtle by moving the X (horizonal) coordinate of the its position to 100 steps right of the starting position.
moveY -50
Teleports the turtle by moving the Y (vertical) coordinate of the its position to 50 steps up from the starting position.
setAngle 180
Turns the turtle to exactly face the specified angle as measured in degrees from the starting orientation of "straight up". Setting the angle to 180 means turning the turtle to face "staight down", regardless of its prior orientation, for example.
arc 90, 120
Without moving the turtle, draws a 90 arc at a radius of 120 steps. The arc is drawn clockwise from a position "ahead" of the turtle (i.e. the turtle is at the centre). So arc 360, 50 draws a complete circle around the turtle with a radius of 50 steps and arc 180, 30 draws a smaller semicircle only to the right of the turtle.
print 'hello, turtle'
Prints a value to the screen. This can be a string (text enclosed in single or double quotes), expression (e.g. print 4+3), or variable.

State and Sharing

Every command you execute is recorded in an array, commandHistory, and this is encoded into the address bar. This allows you to save yor state and carry on where you left off simply by bookmarking the URL, or share your work with a friend by sending it to them.

When you reset(), this information is discarded.

Advanced Programming

When you program TRRTL, you're actually writing CoffeeScript, a lightweight language language atop JavaScript. In addition to writing code a line at a time into the TRRTL terminal, the capability exists to write longer problems in a more developer-friendly way. Leveraging CoffeeScript gives you loops, arrays, conditional logic, arbritrary variables, and more. See the samples below for some ideas.

Clicking the "code editor" button near the bottom right of the screen pops up a large box into which you can write or copy-paste a multiline program. Click the green "play" button to run it. The program will remain in the code editor if you want to return to it.

Alternatively, copy-pasting code directly into the TRRTL terminal will result in that code being put into the code editor and executed immediately. You can also drag-and-drop files from your computer into the terminal to upload and execute them, enabling you to write code in your favourite text editor.

Samples

Try any of the following examples to see what TRRTL is capable of or download the source code of any to see it for yourself.

License

TRRTL was written by Dan Q. It makes use of CoffeeScript and jsZIP under the MIT License. All other code is released into the public domain in accordance with The Unlicense.