Introduction: RGB's With Arduino and Processing

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
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

Breadboard

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.

Comments

author
R Jordan Kreindler (author)2016-07-11

Interesting topic. Thanks.

author
VincentR33 (author)2016-05-22

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
author
kavish laxkar (author)2016-05-12

cool

author
ccrew1 (author)2015-09-29

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?

author
nazdreg2007 (author)ccrew12015-09-29

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.

author
ccrew1 (author)nazdreg20072015-10-04

Thanks that's exactly what I'll try to do.

author
davide.ugolini.5 (author)2014-11-01

Hi,

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

author
jali17 (author)davide.ugolini.52015-07-03

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

author
ocelaris (author)2015-06-24

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

author
Akin Yildiz (author)2014-10-25

hello, can you tell me if this item is a common anode or cathode please? thank you !!

author
nazdreg2007 (author)Akin Yildiz2014-10-25

Hi,
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!

author
Akin Yildiz (author)nazdreg20072014-10-25

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

author
nazdreg2007 (author)Akin Yildiz2014-10-26

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
author
Akin Yildiz (author)nazdreg20072014-10-27

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?

author
nazdreg2007 (author)Akin Yildiz2014-10-26

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.

author
marios8543 (author)2013-12-12

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

author
marios8543 (author)2013-12-04

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

author
nazdreg2007 (author)marios85432013-12-06

what type of errors are you getting?

author
marios8543 (author)2013-11-27

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. 

Capture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNGCapture.PNG
author
nazdreg2007 (author)marios85432013-11-28

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

author
marios8543 (author)nazdreg20072013-12-01

Hi nazdreg2007
Thanks for replying and offering to upload an app. I'm using COM4

author
nazdreg2007 (author)marios85432013-12-03

I tried to export the application but it failed to run after export. My advice is to check if setting the com port to 0 works...that's what worked for me...If you have 3 com ports open up when you type Serial.list(), and the arduino's com is the second one, then you'd type 1 in for your serial port, and if it was third on the list, you'd type 2....i think that'll work

author
nazdreg2007 (author)nazdreg20072013-11-28

to get rid of your array error, port = new Serial(this,Serial.list()[0],9600); set the port to 0...i just tried it there and it worked.

author
marios8543 (author)2013-11-27

Oh and i forgot to say that I sometimes get an ArrayIndexOutOfBoundsException:1

author
FireCGun (author)2013-06-05

can some one plz tell me how i can download the code?
my computer keeps saving it as .tmp and i cant change it.

author
nazdreg2007 (author)FireCGun2013-06-08

See if you can open the .tmp in notepad. if that doesn't work, when you download, "save as" and in the dropdown select .txt.....that should hopefully work

author
Darkkeep (author)2013-04-03

Love the concept...get's your hands dirty with two great IDE platforms. I'm currently working on a project that will call for certain light spectrums for growth phases. Excellent DIY. I may post some of the code when I get a working prototype. What I'm developing is more than a weekend project ;-) Despite on how you're sending the info...still impressive.

author
adellelin (author)2013-03-28

Hi, really excited by this project, however it's not running for me on processing. I'm using 1.5.1 does the code need to change for that? This is the error code I'm getting, just wondering if you can help. Thanks!!

Display 0 does not exist, using the default display instead.
Mar 28 18:02:48 yingxis-MacBook-Pro.local java[16626] : CGContextGetCTM: invalid context 0x0
Mar 28 18:02:48 yingxis-MacBook-Pro.local java[16626] : CGContextSetBaseCTM: invalid context 0x0
Mar 28 18:02:48 yingxis-MacBook-Pro.local java[16626] : CGContextGetCTM: invalid context 0x0
Mar 28 18:02:48 yingxis-MacBook-Pro.local java[16626] : CGContextSetBaseCTM: invalid context 0x0
WARNING: RXTX Version mismatch
Jar version = RXTX-2.2pre1
native lib Version = RXTX-2.2pre2
[0] "/dev/tty.usbserial-A6005kTq"
[1] "/dev/cu.usbserial-A6005kTq"
[2] "/dev/tty.Bluetooth-PDA-Sync"
[3] "/dev/cu.Bluetooth-PDA-Sync"
[4] "/dev/tty.Bluetooth-Modem"
[5] "/dev/cu.Bluetooth-Modem"
java.lang.NullPointerException
at java.io.DataInputStream.readInt(DataInputStream.java:370)
at processing.core.PFont.(PFont.java:319)
at processing.core.PApplet.loadFont(PApplet.java:4199)
at sketch_130328b.draw(sketch_130328b.java:66)
at processing.core.PApplet.handleDraw(PApplet.java:1631)
at processing.core.PApplet.run(PApplet.java:1530)
at java.lang.Thread.run(Thread.java:680)
Invalid memory access of location 0xb20c4b70 eip=0x547f290c

author
nazdreg2007 (author)adellelin2013-03-31

Hey, sorry for the delay. It looks like to me that there may be a problem with your install of processing. maybe try a clean reinstall and see if that helps.
I used an older version of processing but i don't think the code would need much or any editing to run on 1.5.1......As i said, it looks like an install problem. Lemme know if that works

author
He11uvaCook (author)2013-02-11

This is a great Instructable! How hard would this be to connect the Arduino to an Android device via bluetooth or wifi to control the LED color from my phone?

author
nazdreg2007 (author)He11uvaCook2013-02-13

I don't think it would be too hard....the bluetooth would probably be the easiest way because as far as i know, no extra code is needed on the arduino side....for wifi there would be but nothing drastic. The Processing code itself can be used to create an android app so with the necessary mods for the bluetooth, you should have the system running quickly.

author
Nman120 (author)2011-07-16

in your processing code download there is an error that I found:

in the text for over the arrow buttons:
text(s, 30, 100, 40, 20);

the end 20 needs to be 30 or else only the blue shows up. great program though

author
nazdreg2007 (author)Nman1202011-07-19

Hiya,
I not noticed any probs with it......but i'll have a look over the next few days and get back to you :-)

author
32teeth (author)2011-06-07

as for your pin mapping to the PWM pins.
i would recommend using 9,10,11 since they are next to each other.
just a thought

good stuff

author
nazdreg2007 (author)32teeth2011-06-07

Thanks.
Your right.....I never thought of that. I started at 3 and went for the next PWM pins.

author
RPKH (author)2011-02-20

Is there a specific reason why you have chosen to send the values for r,g,b over the serial instead of using the arduino library in processing?

author
nazdreg2007 (author)RPKH2011-02-20

Yeah, the processing library could have made things much easier....I'll update with some new code to use it..

author
nazdreg2007 (author)RPKH2011-02-20

There is no specific reason for sending the data this way. It never occurred with me to use that library. Might look into it.

author
beverageexpert (author)2011-02-02

I am getting an error in processing
saying it cannot load this font AngsanaNew-25.vlw

then this line is highlighted
font = loadFont("AngsanaNew-25.vlw"); // import the font(tools->create)

author

ok, first of all, click on tools then create font. this will open up another window. in this window, select the font and size.tke note of the filename(ctrl +c) and click ok. now paste the file name into theloadFont("

author
bend (author)beverageexpert2011-02-03

the answer is in your comment, go to tools, then create font, then choose AngsanaNew and make it size 25 then click "ok" and try to run the code again

author
tigerbomb8 (author)2011-02-01

i would vote but i can not see this in the contest page

author
nazdreg2007 (author)tigerbomb82011-02-01

Thanks!! It's still waiting for approval for entry so maybe if you try later on today or tomorrow, it should be there. Thanks again!!

author
tigerbomb8 (author)nazdreg20072011-02-01

cool and why did you put thins in the micro controllers section there is an arduino section

author
nazdreg2007 (author)tigerbomb82011-02-02

To be honest, i forgot cause i entered this in the micro controller contest, so thats what i was thinking, not Adruino.

author
tigerbomb8 (author)nazdreg20072011-02-02

you can move it

About This Instructable

54,543views

273favorites

License:

Bio: 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 ... More »
More by nazdreg2007:Illusionist locket: A how to.RGB's with Arduino and Processing
Add instructable to: