Create Turtle Art

Introduction to Turtle graphics

This editor is for writing scripts that are based on Turtle graphics concepts. This implementation is entirely in the web browser, so, it uses JavaScript with some extensions. The goal is to enable visual exploration of concepts related to art and maths.

The pen is not visible on the canvas, so, it helps to visualize the pen movement by writing a few commands and then running the script to see the result before continuing.

The drawing starts with the active position at the middle of the canvas and facing NORTH or upwards. The default pen mode is down, which means that it is ready to draw when you use movement commands.

In Turtle graphics, drawing is done using the current pen position as the frame of reference. For example, to draw a line, you do not specify the start and end positions of the line. Instead you specify the length of the line and it is drawn from your current pen position. This change in perspective allows the commands for creating graphics to be reduced and simplified, yet, still able to create complex visual results.

Core commands

Drawing is performed by moving the pen. When the pen is in the down mode, each forward or backwards movement creates a line of the specified movement distance. By combining the movement commands, you can create lines of any size or shape.

Drawing is done using the current pen position as the frame of reference. When you say move forward 100 pixels, that creates a line 100 pixels in length, starting from the current pen position. This approach enables you to create lines without having the specify the start or end points because they are automatically calculated based on your current position and the length of the line.

moves forward by x pixels
moves backward by x pixels

To create more complex lines, curves and shapes, you change the direction of the pen. For a new script, the default pen position is the middle of the canvas and the default pen heading is NORTH or upwards. So, turning 90 degrees to the right will change the pen heading to the equivalent of EAST or facing to the right of the screen.

turns by x degrees to the right of the current direction
turns by x degrees to the left of the current direction

For a new script, the pen defaults to the down mode. That means each movement command will create a line. When you want to move the pen to a new location without making a line, you just change the pen to the up mode.

changes to down mode ready to create lines when moving
changes to up mode to move without making lines

Heading directions

facing the top of the screen at 90 degrees
facing the left of the screen at 180 degrees
facing the bottom of the screen at 270 degrees
facing the right of the screen at 0 degrees

Additional commands

wipes the canvas clean and moves the pen back to the middle
moves the pen back to the middle and keeps all graphics
automatically resize the image to fit the available canvas space
automatically move the image to the center of the canvas space
SET(x, y, direction)
moves the pen to position x, y and sets the direction
sets a rule so that when the pen movement goes out of the boundary of the canvas size, then, change or bounce the pen by the specified number of degrees
ARCR(size, degrees)
moves along the arc of a circle with radius size; the degrees specify the distance of the arc to move to the right side relative to the current direction
ARCL(size, degrees)
moves along the arc of a circle with radius size; the degrees specify the distance of the arc to move to the left side relative to the current direction
POLY(size, degrees)
moves along the perimeter of a polygon with size sides and degrees per interior angle

Advanced commands

PINS(fn, qty)
adds pins for string art by calling the fn function and adding a pin at the current position; then repeating until qty number of pins have been added
TIE(pin1, pin2)
move from pin1 position to pin2 position
remove all previously defined pins
IFS(px, cx, cy, iterations)
applies the Iterated Functions System (IFS) rules provided by px probability array, cx coefficients array for x axis, cy coefficients array for y axis and repeated for a number of iterations
LINDEN(axiom, rules, levels)
generate the symbols output for a set of Lindenmayer Systems (L-Systems) rules provided by axiom array, rules array and repeated for a number of levels
DRAWLS(size, degrees)
uses the symbols generated from the LINDEN() command to generate the graphics output with the parameters size of each F character and degrees of each turn

Save scripts to Github

If you want to save your scripts as gists in your Github account, please read the Github documentation for steps to create a personal access token that can be used here. Github tokens are not stored or transmitted to - it is only saved in your web browser and transmitted to Github when saving or loading your scripts.