Turtletoy allows you to generate drawings with code inspired by Python's Turtle graphics API. Programming turtles is done with vanilla JavaScript.
To start a new drawing, click the New turtle link and modify the example in the editor to the right.
In short, all global code is evaluated once, and after that, the walk function is called until it returns false.
Let's first look at the global code of the example:
const turtle = new Turtle();
turtle.penup();
turtle.goto(-50,-20);
turtle.pendown();
To draw lines, we first create a new instance of the Turtle class and then start giving it commands. In
this
example, the turtle is moved to position x: -50, y: -20 on the canvas.
To prevent a line being drawn from its initial position x: 0, y: 0,
penup()
is called first. pendown() is then called
to re-enable drawing lines when moving the turtle.
Next, we define what happens every time walk is called:
function walk(i) {
turtle.forward(100);
turtle.right(144);
return i < 4;
}
In this example, the turtle will move forward by 100 pixels for every call, then turn right by 144 degrees.
The walk function will be called until it returns false. Argument i is zero the
first
time the function is called and will increase (+1) for each next call.
The 5th call, i will be 4, and i < 4 will return false. So, in this
example, our
drawing will be complete after five lines.
You can use the following methods to control a turtle:
degrees()
and radians() functions.)
degrees()
and radians() functions.)
[x
,y]
(e.g. as returned by pos()).
[x
,y]
(e.g. as returned by pos()).
[0 ,0] – and set its
heading to
its start-orientation.
[x ,y].true if pen is down, false if it’s up.degrees(2 *
Math.PI)[x ,y].[x
,y] and the
turtle’s heading.
To adjust the pen opacity, use the method Canvas.setpenopacity(1). Valid values for this
method range from -1 to 1. You can set this value once in the global scope at the
top of your turtle.
When the pen opacity is set to a negative value, the turtle will render the drawing using a white pen on a black background, creating a negative image effect.
Adjustable variables are specially formatted variable declarations in your Turtletoy script that can be modified via the UI. To make a variable adjustable, you add a comment directly after its declaration with specific parameters that define its adjustable nature.
For numeric variables, define the range and step:
const variableName = defaultValue; // min=<minValue> max=<maxValue> step=<stepValue> <(Option 1, Option 2, ...)> Optional descriptive textminValue: The minimum value users can select.maxValue: The maximum value users can select.stepValue: The increment between values.Named Options (Optional).stepValue to provide a description, shown on hover in the
UI.
For example:
const grid = 11; // min=5, max=50, step=1When you use named options for adjustable variables, ensure that the number of names matches the number of steps calculated between the min and max values inclusive. This setup replaces the default slider with a dropdown, allowing users to choose from predefined options which can be more intuitive for specific configurations. For example:
const drawmode = 2; // min=0, max=2, step=1, (Gradient, Curl, Flow field)The dropdown enhances the user interface by providing clear, descriptive choices, making it easier for users to understand the impact of their selections on the drawing output.
To allow users to input text:
const guess = 'Hello world!'; // type=string, What's your guess?For drawing paths that users can redefine:
const pathInput = `M57,61C-72,51 -23,-84 36,-67`; // type=path, Click here to redraw the pathAdjustable variables empower creators and viewers to interactively explore the artistic possibilities of Turtletoy scripts, making the experience more engaging and customizable.