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, kn...

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Equipment

A computer with Arduino and Processing. Try to get the most up-to-date release
http://arduino.cc/en/Main/Softwar e and http://processing.org/download/

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 http://www.sparkfun.com/tutorials/219 or use this site http://led.linear1.org/led.wiz 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 www.processing.org/learning/ and http://processing.org/reference/. 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

Be the First to Share


    • Made with Math Contest

      Made with Math Contest
    • Multi-Discipline Contest

      Multi-Discipline Contest
    • Robotics Contest

      Robotics Contest

    46 Discussions


    3 years ago

    Hello, In the color mixer window Im only getting the value from blue, and its starts at 12. can somebody please help me?

    Color mixer.PNG

    4 years ago on Introduction

    If I wanted to reverse this and lets say have a color input represented on screen and be able to save that color (and the RGB values), can I use processor for that as well?

    2 replies

    Reply 4 years ago on Introduction

    It certainly is possible but you'd have to reverse the code to achieve that and have someway of measuring the color of whatever you are measuring. That can be achieve with medicocer accuracy with an LED. Better would be a Color sensing IC (look on Sparkfun) adn pipe that back to the modified processing app.


    When i put the skech in Arduino the rgb led lights on, but when I start the Processing Sketch and the ColorMixer are displayed the RGB led lights off and nothing works.

    I can change the values on the ColorMixer displayed on screen, but the LED connected to the Arduino stay off.

    When I press the stop button on Processing the led lights on...

    1 reply

    Reply 4 years ago

    you might have an common 'anode' rgb led, the one used here is common cathode...

    dont you worry they're the same, but they work in the opposite way


    4 years ago on Introduction

    Hello friends! I'm really excited too by this project. Thanks!

    I believe they are common Anode based on what similar models are. I can't find the exact datasheet for what you linked but very similar ones are common anode so that'd be my guess.

    Hope that good enough for you! That a bloody good offer you found!

    ok so what I don't understand is that where does the GND go then??? the R,G,B of the led goes to "Dout" of the arduino, and what about the anode leg? this is where I am confused.. thank you for your reply, i'm a beginner in all of this..

    here you go. The transistor you use will depend on the number of leds you are powering. You should also have a resistor in series with each led to limit the current.

    rgb diagram.png

    wow man, thank you very much for taking the time to do that..!! very good/clear explanation. what if I am using just 3 rgbs in parallel (60mA total) do you think I'll still need a transistor, won't just resistors be enough?

    So is connected to your 5 volt supply line. The three colors are connected to an arduino pin. The arduino can sink enough current per pin if you are just using one rgb led but if you are planning on using a number of LEDs, you mush connect the leds to a transistor which is controlled by the arduino. I'll put up a diagram later to describe what i mean.


    5 years ago on Introduction

    Hey. Thanks for replying. It opens a little window but it's blank. In the proccesing window it says that that font of yours could not be loaded. Thanks and HELP


    5 years ago on Step 4

    Hey again dude. I tried the suggestions but got other probs now. Do you have any idea how to run the proccesing

    1 reply

    5 years ago on Introduction

    I can't open the colour mixer in proccesing. Also where are the instructions on how to connect the lcd??? PLEASE HELP. Can you upload an app with proccesing? Iv tried it and succesfully exported the app but I open it and shows a grey window. 

    1 reply

    Reply 5 years ago on Introduction

    To connect the LCD, i just followed the instruction on this page http://arduino.cc/en/Tutorial/LiquidCrystal and inserted the correct pins into the program. As for teh file not opening, this project was completed three years ago so perhaps the newer processing IDE isn't quite as backward compatible as we'd like. To upload an app, i'd need to know what serial port you are using because you'd be unable to edit it in the app