Skip to Content
Course content

89: Building an Etch-a-Sketch Clone

Click on the "Edit" button in the top corner of the screen to edit your slide content.

Think back to the original Etch-a-Sketch toy. It was a simple machine: two knobs and a screen. One knob controlled the horizontal movement, and the other controlled the vertical. The magic was that the "pen" never lifted off the page; you just shifted coordinates until a picture emerged. If you messed up, you shook the whole thing to clear the screen.

When we build this in Python, we're doing the exact same thing, just swapping plastic knobs for keyboard keys. The "screen" is our Turtle window, the "pen" is the turtle cursor, and the "knobs" are the event listeners we'll attach to your arrow keys. Instead of rotating a dial, you're triggering a function that tells the turtle to move exactly ten pixels in a specific direction.

Translating Knobs to Keystrokes

In a standard Python program, code usually runs from top to bottom and then stops. But an Etch-a-Sketch needs to be "reactive." It has to sit there and wait for you to press a key. This is where we use screen.onkey(). I like to think of this as setting up a tripwire; the program doesn't do anything until the specific key is "tripped."

import turtle

# Setup the canvas
screen = turtle.Screen()
sketcher = turtle.Turtle()
sketcher.speed(0) # We want it to move instantly

def move_up():
    sketcher.setheading(90)
    sketcher.forward(10)

def move_down():
    sketcher.setheading(270)
    sketcher.forward(10)

def move_left():
    sketcher.setheading(180)
    sketcher.forward(10)

def move_right():
    sketcher.setheading(0)
    sketcher.forward(10)

# Mapping the keys to the functions
screen.listen()
screen.onkey(move_up, "Up")
screen.onkey(move_down, "Down")
screen.onkey(move_left, "Left")
screen.onkey(move_right, "Right")

screen.mainloop()

Giving the Turtle a Map

You'll notice I used setheading() instead of right(90) or left(90). Here is a professional tip: when building a coordinate-based tool, always use absolute headings. If you use relative turns (like "turn right 90 degrees"), and the user presses the "Right" key twice, the turtle might end up facing the wrong way entirely. By using setheading(0) for right, 90 for up, and so on, we ensure that "Up" always means "North" on the screen, regardless of where the turtle was facing before.

The "Shake it to Erase" Feature

The best part of a real Etch-a-Sketch is shaking it to start over. In Python, we don't have a physical sensor to detect shaking, but we can map a key—like the spacebar—to clear the screen. However, simply calling sketcher.clear() leaves the turtle wherever it was. To make it feel like a fresh start, we should also send the turtle back to the origin (0, 0) and lift the pen so it doesn't draw a line across the screen while returning.

def clear_canvas():
    sketcher.penup()
    sketcher.home()
    sketcher.pendown()
    sketcher.clear()

screen.onkey(clear_canvas, "space")



📋 Practical Task

Adding a Color-Shift Palette to your Sketchpad

Right now, your Etch-a-Sketch is a bit boring because it only draws in black. Your task is to expand the program to allow the user to change colors on the fly.

  • Create a list of three or four colors (e.g., ["red", "blue", "green", "purple"]).
  • Implement a new function called cycle_color() that changes the turtle's pen color to the next color in your list every time it is called. (Hint: You'll need a global variable to keep track of the current color index).
  • Map this cycle_color() function to the "c" key on the keyboard.
  • Ensure that the clear_canvas() function still works without breaking your color cycle.
Rating
0 0

There are no comments for now.

to be the first to leave a comment.