🎨 Worksheet 2: Keyboard Sketcher

Let’s make a simple drawing program! You’ll control a “pen” with the arrow keys to draw anything you want. This worksheet will teach you how to handle continuous key presses for smooth movement, a key skill for making better games.

📝 IMPORTANT: Type, Don’t Copy!

Remember, typing the code helps your fingers learn the keyboard shortcuts and syntax. Run your code after each part to see what you’ve built! The goal is to understand why the code works.

Part 1: Make a Dot

First, let’s create a “pen” (a small circle) that will eventually be our drawing tool.

# Pen's starting position
pen_x = 400
pen_y = 300
pen_speed = 4

def setup():
    size(800, 600)

def draw():
    background(50, 50, 50) # Dark grey background

    # Draw the pen
    fill(255, 255, 0) # Yellow
    no_stroke() # Removes the black outline from shapes
    circle(pen_x, pen_y, 10)

run_sketch()

Run it! You should see a dark window with a small yellow dot in the middle. It doesn’t move yet, but we’ll fix that soon.

🔬 Experiment Time!

Before moving on, let’s play with the code you just wrote. Try to solve these small challenges.

Part 2: Handling Key Presses

For smooth movement, we need to know when a key is being held down. We’ll use boolean variables to do this. A boolean is the simplest type of variable: it can only ever be True or False. We’ll use them like light switches to remember if a key is currently down.

Add these new variables and functions to your code.

# --- At the top of your file ---
# Pen's starting position
pen_x = 400
pen_y = 300
pen_speed = 4

# NEW: Boolean variables to track which keys are held down
up_pressed = False
down_pressed = False
left_pressed = False
right_pressed = False

# --- At the bottom of your file, before run_sketch() ---
def key_pressed():
    global up_pressed, down_pressed, left_pressed, right_pressed
    if key_code == UP:
        up_pressed = True
    if key_code == DOWN:
        down_pressed = True
    if key_code == LEFT:
        left_pressed = True
    if key_code == RIGHT:
        right_pressed = True

def key_released():
    global up_pressed, down_pressed, left_pressed, right_pressed
    if key_code == UP:
        up_pressed = False
    if key_code == DOWN:
        down_pressed = False
    if key_code == LEFT:
        left_pressed = False
    if key_code == RIGHT:
        right_pressed = False

🔬 Experiment Time!

This code doesn’t change the visuals yet, but a lot is happening! Let’s investigate what these new functions do.

• See the Input: Add print("A key was pressed!") inside the key_pressed() function. Run the code and press some keys. Look at the console area below your code to see the message appear.

• Investigate the Keys: Now change the print statement to print("Value of key_code:", key_code).

  • Press an arrow key. Notice the console prints a number.
  • Press a letter key like ‘w’. Notice it prints a different number.
  • key_code stores a unique number for every key on your keyboard. To see what the arrow key numbers are, add this line to your setup() function: print("The code for the UP arrow is:", UP)

• Check the Boolean: In your key_pressed() function, right after up_pressed = True, add print("up_pressed is now:", up_pressed). Do the same in key_released() for up_pressed = False. Watch how the variable changes from False to True and back again in the console when you press and release the up arrow. This is how our program remembers the key’s state!

Part 3: Make the Dot Move!

Now, let’s use our boolean variables inside the draw() loop to finally move the pen. Because draw() runs over and over, it will check these True/False states 60 times a second, creating smooth movement.

Update your draw() function like this:

def draw():
    global pen_x, pen_y
    background(50, 50, 50)

    # --- ADD THIS MOVEMENT LOGIC ---
    # Check the booleans 60 times per second
    # In Python, "if up_pressed:" is the same as "if up_pressed == True:"
    if up_pressed:
        pen_y = pen_y - pen_speed
    if down_pressed:
        pen_y = pen_y + pen_speed
    if left_pressed:
        pen_x = pen_x - pen_speed
    if right_pressed:
        pen_x = pen_x + pen_speed
    # ---------------------------------

    # Draw the pen
    fill(255, 255, 0)
    no_stroke()
    circle(pen_x, pen_y, 10)

Run it! Hold down the arrow keys. The yellow dot should now move smoothly around the screen!

🔬 Experiment Time!

• Break It (On Purpose!): Let’s see what happens if a key gets “stuck”. In your key_released() function, add a # in front of the two lines for the UP key. A # tells Python to ignore a line, turning it into a comment.

  # if key_code == UP:
  #     up_pressed = False
  

  Now run the code. Press the up arrow once and let go. The pen keeps moving up forever! This is because the up_pressed variable was set to True but never got set back to False. This is why key_released() is so important. (Remember to remove the #s before moving on).

Part 4: Leaving a Trail

A moving dot is cool, but a drawing program needs to draw! How can we remember every position the pen has visited? With a list! A list is a special type of variable that can hold many values in order.

First, add empty lists at the top of your code:

# At the top of your file, with your other variables
trail_x = []
trail_y = []

Now, update your draw() function to save the pen’s position in every frame and then draw the entire trail.

def draw():
    global pen_x, pen_y
    background(50, 50, 50)

    # Move the pen (same as before)
    if up_pressed: pen_y = pen_y - pen_speed
    if down_pressed: pen_y = pen_y + pen_speed
    if left_pressed: pen_x = pen_x - pen_speed
    if right_pressed: pen_x = pen_x + pen_speed

    # --- ADD THIS NEW CODE ---
    # Add the current pen position to our trail lists
    trail_x.append(pen_x)
    trail_y.append(pen_y)

    # Draw the entire trail using a loop
    i = 0
    while i < len(trail_x):
        fill(100, 200, 255) # Light blue trail
        no_stroke()
        circle(trail_x[i], trail_y[i], 5)
        i = i + 1
    # --------------------------

    # Draw the pen on top so it's visible
    fill(255, 255, 0)
    no_stroke()
    circle(pen_x, pen_y, 10)

Run it! Move the dot around. It should now leave a beautiful light blue trail wherever it goes!

What’s happening?

• trail_x = [] creates an empty list.
• trail_x.append(pen_x) adds the current value of pen_x to the end of the trail_x list.
• while i < len(trail_x): This is a loop. len(trail_x) gets the total number of items in the list. The loop will run as long as our counter variable i is less than the total length.
• circle(trail_x[i], trail_y[i], 5) The [i] is how we get an item from a list at a specific position (its index). As i counts up (0, 1, 2, …), we get each saved coordinate pair to draw one circle from our trail.
• i = i + 1 This is crucial! It increases our counter i by one each time the loop runs, so we move on to the next point in the trail. If you forget this, you get an infinite loop!
• The two lists, trail_x and trail_y, work together. The first x-position is at trail_x[0] and the first y-position is at trail_y[0]. The tenth x-position is at trail_x[9] and the tenth y-position is at trail_y[9]. They always match up!

🔬 Experiment Time!

• 💡 Did you notice? We didn’t need to write global trail_x in draw(). This is because Python lets you change the contents of a list (like using .append()) without the global keyword. You only need global when you want to replace the entire variable with something new (like pen_x = pen_x + 1).

🎉 Complete Program!

You’ve made an interactive drawing program! This is a huge step. You learned how to handle smooth keyboard input and how to use lists to remember and draw hundreds of objects on the screen.

🚀 Make It Your Own! (Challenges)

# In key_pressed()
# ... your other key code for arrows ...
    global trail_x, trail_y
    if key == 'c':
        trail_x = []  # Make the list empty again
        trail_y = []  # Make this one empty too!

# At top of file
trail_r, trail_g, trail_b = 100, 200, 255

# In key_pressed()
def key_pressed():
    #...
    global trail_r, trail_g, trail_b
    if key == 'r':
        trail_r, trail_g, trail_b = 255, 0, 0
    if key == 'g':
        trail_r, trail_g, trail_b = 0, 255, 0
    if key == 'b':
        trail_r, trail_g, trail_b = 0, 0, 255

# In the while loop in draw()
fill(trail_r, trail_g, trail_b)

# Inside draw()
# ... after movement code ...

# Check for eraser mode
is_erasing = False
if is_mouse_pressed:
    is_erasing = True

# When adding to trail, you could also add the mode
# (This is an advanced idea, an easier way is in the next hint)

# Easiest way: just change the color when drawing the trail
# Inside your while loop:
if is_mouse_pressed:
    fill(50, 50, 50)  # The background color
else:
    fill(trail_r, trail_g, trail_b) # The normal trail color

circle(trail_x[i], trail_y[i], 20) # Use a bigger circle for erasing