Introduction: RGB's With Arduino and Processing

About: I'm a grad mech engineer student in Boston, desperately in need of time for a building spree :P I'm a maker/hacker of all things, currently working on small electric vehicles , but I love making costumes, knic…

Here is an easy(enough) project to introduce you to the Arduino microcontroller, as well as Processing. This is my first Arduino and Processing project and I didn't have too much bother getting it working.

This is my entry to the Sparkfun Microcontroller contest so if you think it's good, please vote!!(voting starts the 14th feb). Thanks!!

 Once everything is set-up, you will be able to control the color of the RBG's from your computer, using the Processing program, and also see the output color in the program( it ain't perfect but it's handy if you want this for remote lighting)

Below is a screenshot of the Processing executing. By clicking (and/or holding) on the up and down arrows, you can change the color levels of each of the colors in the RGB.

Step 1: Equipment

A computer with Arduino and Processing. Try to get the most up-to-date release e and

An Arduino(make sure it has PWM outputs, which is all/most)

RGB Led's

Resistors(100x2 ,180x1)

Jumper wires


USB cable(for the Arduino)

If you are using more than one RGB, you may need to calculate the different values for the resistors. Follow this tutorial or use this site to calculate the required resistances.

Step 2: Right, First of All, the Circuit.

Create the circuit on the breadboard. Make sure that that you remember which leg’s of the led are which, otherwise you might see/smell the “magic smoke” later on. On the RGB’s I have, the longest leg is the cathode, while the other three are red, green and blue (picture below). Check the data sheet of your RBG’s to make sure you install them right.

Connect up the breadboard to the Arduino as shows including +5V and GND. Make sure that the pins that you connected the led anode’s to are PWM pins(they have a ~ on them). Once that’s all done, it’s on to the programming. The Arduino outputs 5v so to get a change in the light levels, it uses a system called pulse width modulation. The Arduino generates a square wave at a certain frequency. If you have the duty cycle of the output set to 100% (255 in our case, 8bits), the led will be on the whole time. If the duty cycle is set to 50% (127) the led will be on for half of the cycle. if it’s set to 0%(0)it will be completely off. We don’t see this on/off effect because the frequency is too high for us to notice the light turning on and off.

If you are using clear RBG’s, you will need some way of diffusing the light. I managed this by placing part of a sticky label over the top of the led but any white material should work (paper, masking tape, white socks....)

Step 3: The Arduino Code

Once you’ve got the circuit ready, download the Arduino code below and open it in the Arduino program.
If you are new to Arduino programming, read this next paragraph to make sense of it. Otherwise, skip to the next paragraph.

The Arduino sketch normally contains three main parts, the definitions, the setup and the actual loop which is you program proper. In the definitions section, you can give names to numbers, which can then be associated with pins, making it easier to program. You can also define constants and create objects. In the setup, you execute parts of the code that you only want to run once, like starting the serial port and the pin modes. The final part is the loop in which your main program runs. Everything else goes here.

The only awkward bit in the sketch is reading in the serial data. The Arduino only allows you to read in serial data byte by byte, so to read in the numbers, they have to be added individually to their total, and weighted according to their order (100, 10, 1).for more details, see the code. The -48 converts the ASCII characters that the Arduino receives into int values(0 in ASCII is 48). In some of the pictures, you can see that I have a LCD screen attached to the breadboard. This is to display the values that r, g and b are at, and is handy for debugging. Code for this is also at the bottom of the page

Step 4: Processing

After the Arduino code, the only thing left is the Processing program. For more information on Processing, visit and The Processing environment is very similar to the Arduino one, so no need to re-explain. For more tutorials, get the book "Getting Started with Processing" by Casey Reas and Ben Fry

With Processing, you can create a GUI (graphical user interface) with which you can do many things. One of these things is to control and interact with an Arduino. The Processing sketch creates a window that is then filled by the program. Follow the tutorials linked above to learn more.

The default frame rate of the sketch is 60 frames a second, which means that the Arduino would be receiving new data every 16.6µs, which will caused me some problems. So by reducing the frame rate, you give the Arduino more time to read and act on the data it has.

The Xmouse and Ymouse gives you the current location of the mouse in terms of pixels from the top left corner. To “click” on a button, the mouse’s location must be within the horizontal and vertical limits of the button when the button is pressed.

Step 5: It All Comes Together

Connect your Arduino your computer and select the right com port. If you can’t find that, for windows, go to device manager and find it there. Once that is done, upload the Arduino sketch to the Arduino. Now run the Processing program, and it will probably return an error. Ignore that and look in the serial monitor (the black area at the bottom of the window) and you should see a number beside your com port number. That number is the number that you have to put into your Processing sketch, in where the square brackets are.

port = new Serial(this,Serial.list()[1],9600);

The 9600 is the baud rate, or the number of symbols being sent a second. The baud rate here should match the one in the Arduino sketch, otherwise it won’t work properly.
Run the Processing sketch again and see if it works!!!!!This set-up will allow you to create virtually any color under the sun and can be interfaced into other projects that you will do in the furure.

If it’s not working, make sure all the wires are connected properly. It that doesn’t work, check you com ports and the baud rate. If all that fails, reduce the frame rate until it does work. This will slow down how quick the light changes, but hey, at least it’s working.

Microcontroller Contest

Participated in the
Microcontroller Contest