Maker Class Lesson Seven: Pixel Art Finger Paint

Combine conductive touch points on a coordinate plane and code pixel art finger paint in Scratch!

Craft This: Coordinate Plane Touchpad for Pixel Art Finger Paint

So far in this maker series, you've crafted switches out of office supplies, hacked a favorite toy, designed your own alarm systems, created tilt sensors, and even created your own secret code invention!

In today's project, you are going to really delve into a project that is equally physical and digital!

First up, you have to craft this coordinate plane!

You need to cut a flat piece of cardboard into about a perfect square that is at least ten to twelve inches in length.

Measure half the height and draw a horizontal line for the X- axis. Then measure half the width and draw a vertical line for the Y- axis.

Measure 1/2" or 1 centimeter increments along both the X and Y axis. Instead of labeling those increments from 1-20, label in increments of 20 to scale with the coordinates you will plot in Scratch in step three.

To make a simple triangle, plot these points on your physical coordinate plane:

(80,0)
(-80,0)
(0, 200)

In the next step, you will mark more points and add conductive touch points with to each plot point with brass fasteners.

Plot These Points

On your cardboard coordinate plane plot the points from this chart and place a brass fastener in each spot to turn this into a conductive touchpad. (We like to use a dull pencil to start the hole, and then press the brass fastener through.) These are your conductive touch points for your pixel art finger paint.

Plug an alligator clip from each spot to the appropriate input on your Makey Makey.

Check this chart for inputs and make sure to label all plot points and key inputs on your physical coordinate plane! This will help you in hooking up to Makey Makey, coding and troubleshooting!

As you mark each spot, start noticing different shapes you can create. You might want to use a rubber band around your brass fasteners to help visualize different shapes.

Hook up Makey Makey

Now that you've crafted your cardboard coordinate plane and added all your conductive touch points, it is time to hook up your invention to Makey Makey! Follow the chart (and your labels!) to hook up each conductive touch point to the appropriate Makey Makey inputs.

Refer to the chart often!

You are using the back of the board for this project! You should have small white jumper wires in your classic kit. If you have a STEM kit, you will have a ribbon cable where all the jumper wires are connected. Gently push each jumper wire into the header on the back of the board. You will see that the header on the left side is for the key presses W A S D F G. If you need a full guide just on using the back of your Makey Makey, check out this resource.

Since we used the colorful ribbon cables, we color coded our alligator clips from each jumper wire to the conductive touch point. This is helpful if you have wires come unplugged or short circuits, it will be easier to troubleshoot!

Since metal is what is conductive, the heads on these alligator clips are very close together and to keep them from touching, cover the conductive end with electrical tape (or you could use low adhesive masking tape to cover alligator clip heads.)

Let's do a little wire maintenance before you start coding! Binder clips make great switches, but you can also use them to tidy up your wires.

Code This: Pixel Art Finger Paint

Create alongside us with this Scratch video tutorial for coding your own pixel art finger paint!

Click on this Scratch game to remix and code your own project!

Note: You need to be signed in to Scratch see the "Remix" button.

The virtual Makey Makey is already coded for key press inputs and we've already added the pen and Makey Makey extension. You will just need to code the Scratch cat to move to the correct plot points for each key press. (Double check your chart or try each touch point as you code it!)