← All lessons/Capstone Projects· Lesson 32 of 32

Interactive art toy

Build a paintbrush that responds to the mouse — combining functions, conditionals, and the mouse globals into a toy you can play with.

About 14 min

Make it respond to you

For the finale, you'll build something to play with. The magic of interactive sketches is the mouse: the globals mouseX and mouseY always hold the cursor's position, and mouseIsPressed is true while a button is held. Combine those with a conditional and a function and your canvas becomes a toy.

Because draw() runs ~60 times a second, reading mouseX/mouseY each frame lets a shape follow the cursor smoothly. And because we only wipe the background when we *want* to, leaving it out turns motion into a painting that builds up over time.

A conditional brush

The key trick is a conditional on mouseIsPressed: paint a stamp only while the button is down. That way the canvas stays calm until you click and drag, then bursts into color where you move.

Click and drag on the canvas to paint. A helper function draws each stamp.

No background() = a painting

There's no background() inside this draw(), so old stamps stay on screen and accumulate. That's exactly what we want for a paint toy. Add background(...) back and you'd wipe your art every frame.

Notice how the work is split: draw() decides when to paint (the conditional), and the stamp(x, y) function decides what a single mark looks like. Splitting responsibilities like this is exactly how bigger programs stay readable.

Make it yours

Once it works, experiment! Try rect instead of ellipse, base the color on mouseX, or change the stamp size with mouseY. There's no wrong answer in a toy.

Your turn

Build a mouse paintbrush. Write a draw() loop that uses an `if` on mouseIsPressed and reads `mouseX`/mouseY to call a helper function stamp(x, y). The stamp function should draw a colorful shape with `ellipse` (or rect).

  • Define function draw() with an if (mouseIsPressed) inside it.
  • When pressed, call your helper with the cursor position: stamp(mouseX, mouseY);.
  • Define function stamp(x, y) that picks a color and draws an ellipse at (x, y).
  • Leave out background() so your strokes build up into a painting.
Hints