Introduction: How to Make a Simple Responsive Graphic With Arduino and Processing

This tutorial will teach you how to use small parts from an electronic toy to create in interactive light and sound graphic that can serve as the beginning of an interactive art project. It utilizes coding in arduino, processing, soldering electronic parts, and interfacing with a protosnap. This tutorial involves both digital and analog elements and can be used as an extremely simplified version of an interactive art environment.

You will Need

A small Electronic Toy, in this case, a bouncing ball with a light up sensor inside is used for this tutorial

A soldering Pen

Processing and Arduino, which you can download at processing.org and arduino.cc

A Protosnap -Pro Mini https://www.sparkfun.com/products/10889

A solderless Breadboard

1 10kohm Potentiometer

A couple of short lengths of stranded wire

Clippers, exact-o blade, or small tools with which to take apart your parts and cut wire

Soldering Kit

Step 1: Extract Your Hardware

With a blade or clippers, carefully cut open the ball and turn it inside out, popping out the small light LED and movement sensor in its casing. Then, lightly cut around the base of the casing and lift out the small piece.

Step 2: Lets Examine the Item

This piece of hardware consists 3 small LR41, 1.5 V batteries that are connected to two small red and blue LEDs as well as a small coil which triggers the lights to blink rapidly when when moved. We are going to connect this to the arduino but first we have to figure out where we will connect it. Since we want arduino to be able to read the activity from when the sensor is activated we will have to solder two wires to the the sensors pins on the underside of the setup. One of the sensor pins has some solder already on it.

Step 3: Solder

Heat your solder pen no higher than 750 degrees and carefully heat and solder the parts together. Take care not to heat the components too long as they can be destroyed this way.

Step 4: Electronics

Now the new component is ready to hooked up to the ProtoSnap. Carefully remove the 3 small batteries from the component and attach both the Protosnap and the component into a solderless breadboard. Align the wires coming soldered to the component with the VCC and 13 pins on the Protosnap. Because there is current running directly into the sensor, it will constantly be activated. We want to control when it is activated. The 10Kohm resistor acts as a pulldown resistor, connecting the switch on the toy to ground when it is open. Without it, the switch would be disconnected from the ground and the current in the switch when open would be unknown as opposed to 0, which is what it needs to be for arduino to read it. One end of the resistor will be connected to ground and one will be connected along with the component to pin 13, and the other end of the component will connected to VCC.

Step 5: Arduino

For the Arduino programming, we are going to use a modified version of the Serial Call Response example. The code is set up to receive input from the component that is attached to pin 13. This information is translated into the text ON which the program then prints. It also sends the letter "A" to processing in order to establish contact between the two platforms. The code is attached for you to download.

i

Attachments

Step 6: "Handshaking"

In the bottom half of the Serial Call Response Code, commented out with "//" you will find the processing code needed to connect the two programs, copy and paste this code into a processing window. We will now begin to work with this code so that it applies to what we want to do with it.

Remove any code that has to do with "the ball" such as the xpos, and ypos, and remove any code having to do with background or fgcolor, as we won't need those. There is also only one serial port, so you can take out the second and third line in this part:

"xpos = serialInArray[0];

ypos = serialInArray[1];

fgcolor = serialInArray[2];"

The code we are going to manipulate with Serial Call Response can be found on Processing.org and is called Wave Gradient. We are also going to upload some sound into the code. I've used the MP3 file of the "Song" made by the Rosetta comet, and have uploaded it here, but you can use whatever you want. To make sure the MP3 plays, be sure to deposit the MP3 file into the processing file that you are working on.

Copy and past the code for the Wave Gradient into your processing window,

As you can see, I changed some things about the color and specifically the frequency of the gradient to my liking. I set the frequency (frequency2) to random, and then gave it two different values to oscillate between (0,700).

Attachments

Step 7: Run Your Program

Hit "upload" in arduino and then "play" in processing, toggle the sensor to see how you effect the patterns on screen.

Step 8: