turtle-graphics

Version 4

Contents

Getting started

You can use this p5.js starter sketch to get up and running quickly: bit.ly/turtle-sketch-v4

How to set up (manually)

Include the following script tags in the <head> section of your index.html:

<script src="https://sketch.process.studio/turtle-graphics/4/tg.mjs" type="module"></script>
<script src="https://sketch.process.studio/turtle-graphics/4/tg-plot.mjs" type="module"></script>

These scripts need to be included after p5.js, so your index.html should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
    <script src="https://sketch.process.studio/turtle-graphics/4/tg.mjs" type="module"></script>
    <script src="https://sketch.process.studio/turtle-graphics/4/tg-plot.mjs" type="module"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

The turtle coordinate system

  • The turtle always starts at the origin, with coordinates (0, 0).
    • The origin is in the center of the p5.js canvas. This is different from p5.js, where the origin is in the top-left corner.
    • The x-axis goes from left to right. Negative values are left of the origin, positive values right, same as p5.js.
    • The y-axis goes from top to bottom. Negative values are above the origin, positive values below, same as p5.js.
  • The turtle always starts with heading 0, which is up (or “north”).
    • The heading is measured in degrees, starting at the top and moving clockwise.
    • A heading of 90 is right (or “east”).
    • A heading of 180 is down (or “south”).
    • A heading of 270 is left (or “west”).
    • Negative values can also be used, these are measured counter-clockwise. For example: -90 is left, -180 is down, -270 is right.

Functions overview

Here is an index to all functions, grouped by type:

Basic

  • forward — Move the turtle forward
  • back — Move the turtle back
  • left — Turn turtle to the left
  • right — Turn turtle to the right
  • penup — Raise the pen
  • pendown — Lower the pen

Get state

  • xy — Get the turtle's position
  • x — Get the turtle's x-coordinate
  • y — Get the turtle's y-coordinate
  • heading — Get the turtle's heading
  • isdown — Get whether the pen is currently down
  • isup — Get whether the pen is currently up
  • state — Get the turtle's current position, heading angle and pen position as an object
  • outside — Get whether the turtle is currently outside of the canvas
  • inside — Get whether the turtle is currently inside of the canvas

Get relative state

  • bearing — Get the bearing from the turtle to a given point
  • distance — Get the distance from the turtle to a given point

Set state

  • setxy — Set the turtle's position
  • jumpxy — Set the turtle's position, without drawing to the new position
  • setheading — Set the turtle's heading
  • face — Turn the turtle to face a given point
  • setstate — Set the turtle's position, heading angle and/or pen state
  • reset — Completetly reset the turtle to its original state
  • resetstate — Reset the turtle's state
  • resetmatrix — Reset the turtle's transformation matrix

Markings

  • show — Draw the turtle at its current position and heading
  • mark — Draw a small + at the turtle's current position independent of heading
  • setturtlefunction — Set a custom function that draws the turtle when using show
  • setmarkfunction — Set a custom function that draws the mark when using mark

Utilities

Plotting

  • plotter — Get the Plotter object, containing all the functions to control plotting your turtle graphics

Transformations

  • translate — Translate the coordinate system
  • rotate — Rotate the coordinate system
  • scale — Scale the coordinate system

State Stacks

  • push — Push the turtle's state and transformation matrix onto the stack
  • pushstate — Push the turtle's state onto the stack
  • pushmatrix — Push the current transformation matrix onto the stack
  • pop — Restore the last pushed turtle state and transformation matrix from the stack
  • popstate — Restore the last pushed turtle state from the stack
  • popmatrix — Restore the last pushed transformation matrix from the stack

Turtle Objects

  • newturtle — Create a new turtle object
  • self — Get the turtle object itself
  • clone — Get a copy of the turtle object
  • isturtle — Check whether an object is a turtle or not