Turtle Graphics

Turtle Graphics

Overview

Introduced as a feature of Logo programming language in 1969, turtle graphics connect computer drawing to how we move our bodies through space, and encourage approaching computational form with a new mindset.

Tools

p5.js

Logo and Turtle Graphics

The Logo computer programming language was created in 1967 by Wally Feurzeig, Seymour Papert, and Cynthia Solomon to explore how programming can help children learn critical thinking and problem solving. One of the creators of Logo, Seymour Papert, wrote the 1980 book Mindstorms which discusses Logo and its goals:

In many schools today, the phrase “computer-aided instruction” means making the computer teach the child. One might say the computer is being used to program the child. In my vision, the child programs the computer and, in doing so, both acquires a sense of mastery over a piece of the most modern and powerful technology and establishes an intimate contact with some of the deepest ideas from science, from mathematics, and from the art of intellectual model building.

One of the key ideas introduced in Logo was turtle graphics. The turtle was originally a small programmable physical robot that carried a pen and could trace its path as it moved. Logo could control this turtle with simple commands: left and right to turn and forward to move. This idea was extended to drawing on-screen using a virtual turtle.

Papert w/ turtle Seymour Papert with a physical turtle robot, photo by Cynthia Solomon

turtle screenshot A virtual turtle in action!

Logo’s use of turtles allows students to make a strong association between what happens in the program and how they move their own bodies in the real world. Papert called this body-syntonic learning. Body-syntonic learning supports understanding of abstract ideas through sensory experience. Papert often discussed these ideas in writing and videos.

Be the Turtle

Explore body-syntonic reasoning by acting out a logo-like program.

Write a Program

  • Begin by breaking up into pairs.
  • Draw an image from the deck, keep it secret.
  • Think about the path someone would need to take to trace that image as they walked.
  • Write a series of instructions using turn(degrees) and forward(steps).

Run a Program

  • Take the instructions, but not your image, from your partner.
  • Follow the instructions, and think about the shape you are tracing on the ground.
  • Draw an image of the path you took, and compare that image with your partner’s image.

Discuss

Did involving you bodily senses and physical movement impact how you thought about the program?

A Shift in Perspective

The p5.js graphics API uses a Cartesian coordinate system. To draw a line in p5.js you might use code like this:

line(100, 100, 200, 200)

This prioritizes the x,y coordinates of the start and end of the line. The length and angle of the line are deprioritized: they are not directly specified at all.

Turtle graphics flips these priorities around. This is code you might write to draw a line using a turtle:

right(45); forward(100);

Now the line’s angle and length are specified instead of its start and end. This is one of the key shifts in thinking encouraged by turtle graphics.

The second shift becomes apparent if we ask where the line in the second example should be drawn. We can figure out the angle and length of a line from its start and end points, but we can’t go the other way. Knowing the length and angle of a line does not tell us where it should be drawn. In turtle graphics, commands like right and forward use coordinates relative to the turtle, rather than absolute coordinates measured on the canvas.

This shift in priorities makes some things easier to express and some things harder:

Cartesian: Drawing a Square

rect(100, 100, 100, 100);

Turtle Graphics: Drawing a Square

t.moveTo(100, 100);
t.penDown();
for(side = 0; side < 4; side++) {
    t.forward(100);
    t.turnRight(90);
}

Cartesian: Drawing a Star

line(100, 100, 200, 100);
line(200, 100, 119.09, 158.77);
line(119.09, 158.77, 150, 63.67);
line(150, 63.67, 180.90, 158.77);
line(180.90, 158.77, 100.00, 100.00);

Turtle Graphics: Drawing a Star

t.moveTo(100, 100);
t.penDown();
for(side = 0; side < 5; side++) {
    t.forward(100);
    t.turnRight(135);
}

In the examples above, the Cartesian system works well for drawing a square, but the Cartesian code for the star is awkward and unclear. Changing the star’s position or size would take a lot of work. Work should be done by computers, not programmers. With turtle graphics, the code that draws the star mirrors how we might describe the figure. It is a more natural expression of the idea and will be easier to modify.

Both frameworks can be used to draw a square or star. We are not forced to draw specific things by either framework, but each framework encourages a different way of thinking. Just as working directly with pixels encourages different forms than working with higher-level drawing APIs, working with turtle graphics encourages yet other forms.

Two of the forms that turtles are very good for are spirograph-like figures and recursive trees.

A Simple Turtle in p5.js

To explore using turtle graphics with p5.js, I’ve created a basic turtle class for you to use this week. The examples above and below use this library, and you can copy it into your sketches.

Grab the code here.

Comp Form Turtle API

myTurtle = new Turtle(x, y)

The turtle constructor: it creates a turtle object.

It takes optional [x, y] starting coordinates or defaults to the center of the sketch.

myTurtle.moveForward(distance)

Moves the turtle along its current bearing, drawing a line if pen is down.

myTurtle.moveBackward(distance)

Moves the turtle backward from its current bearing, drawing a line if pen is down.

myTurtle.moveTo(x, y)

Instantly transports the turtle to the provided x, y location, drawing a line if pen is down.

myTurtle.turnRight(angleDegrees)

Rotates the turtle’s bearing clockwise by the provided angle in degrees.

myTurtle.turnLeft(angleDegrees)

Rotates the turtle’s bearing counter-clockwise by the provided angle in degrees.

myTurtle.turnTo(angleDegrees)

Changes the turtle’s bearing to the provided angle. The angle is measured in clockwise degrees from straight right.

myTurtle.penUp()

Tells the turtle to stop drawing lines while it moves.

myTurtle.penDown()

Tells the turtle to start drawing lines while it moves.

myTurtle.image(image, width, height)

Draws an image centered on the turtle’s current location and aligned with the turtle’s rotation.

myTurtle.pushState()

Records the turtle’s current state (position, bearing, etc.) to a stack.

myTurtle.popState()

Restores the turtle’s state to the top recorded state on the stack.

Turtle Examples

Turtle Square Example

Turtle Triangle Example

Turtle Multiple Triangles Example

In-class Challenge

Explore turtle graphics by modifying the examples above. Work through the following challenges in order. Don’t skip any.

Time Comment
< 11 in 20 Minutes Keep studying to improve your understanding of these topics.
11 in 20 Minutes Good.
All 15 in 20 Minutes Great.

Modify the Triangle Example

  1. Draw a pentagon.
  2. Draw an octagon.
  3. Draw a circle.
  4. Draw a circle with a dashed line. Tip: penUp() + penDown()

Modify the Multiple Triangles Example

  1. Draw each triangle with different colors.
  2. Change the triangle function to draw pentagons.
  3. Draw a 3x3 grid of pentagons.

Style Tip: If you change what a function does, you should change its name as well. Did you change the function name when completing challenge 6?

Modify the Spirograph Example

  1. Change the moveForward() parameter to i * 3.
  2. Center the drawing.
  3. Comment out the noLoop()
  4. Change the turnRight() parameter to 175 + frameCount.

Challenging Challenges

  1. Start with the original Triangle Example. Change it to draw a spiral.
  2. Using a loop, draw 10 concentric triangles.
  3. Draw the figure below.
  4. Create a polygon(sides) function that receives a sides parameter and draws a regular polygon.

challenge_1.png

Turtle + Images

Turtle Push + Pop

Turtle Recursive Tree

Drawing Machines in Code

Turtles make it possible to change how you think about drawing and give you a new set of tools for expressing an image in code. They don’t change what you can do though, under the hood the turtle class uses the standard p5.js drawing API and a little trigonometry. Instead using a turtle changes how you do it. Changing your approach and mental model has a significant effect on the solutions you create. You could make the same exact drawing with or without turtles, but in practice using turtles tends to lead to certain motifs and styles.

Turtles are just one example of a drawing machine. Inventing your own drawing machine is a rewarding exercise. It leads to new ways of approaching problems, a deeper understanding of programming, and new aesthetics to explore.

Keep Sketching!

Base

Explore using turtle graphics. Start with a crazy spirograph thing and get that out of the way. Then see how much variety you can get from the turtle.

Challenge: Animal Face

Using turtle graphics, create an intricate portrait of an animal. Begin by choosing an animal. Look at photo references of your animal and note interesting details, textures, patterns, and features. How can you translate those details into your sketch? Create your sketch primarily using turtle graphics techniques.

Mitchel Resnick: The Seeds that Seymour Sowed