Colour detection in Processing

This is part of a Processing project I’m currently working on. This sketch allows the user to select colours from webcam input. The input is then analysed and a rectangle is drawn around all pixels close to the chosen colour. Up to 2 colours can be used for this sketch. This is similar to the getColorBoundsRect() method in the BitmapData class in Flash.

Click here to see the video on Vimeo

You can download the source code below:

colour_detection.pde, CoordsCalc.pde

Be aware though that in order to use it you should be in a well lit room with a good quality webcam. You might also need to fine tune your webcam settings. To select a colour, place your object in the red box in the bottom right hand corner of the frame and press 1 or 2.


p to view the rectangles
1 to select the first colour
2 to select the second colour
0 to reset colours


36 Responses to “Colour detection in Processing”

  1. 1 Adrien Jeanjean November 17, 2008 at 12:00 am

    Brilliant as usual. Love it.

  2. 2 kadavy November 30, 2008 at 12:29 am

    I love it. Imagine a photo app where you can “swim” through your photos. Or going to and being able to flip through articles, sorted and “stacked” by their importance and categories.

  3. 3 jamesalliban November 30, 2008 at 8:05 pm

    A bit like this – – you mean. It would be fun to have it as an option although I imagine you arms would suffer as a result 🙂 Using colour isn’t the way to achieve this though as environmental differences (lighting/colour) would cause problems. Infrared is the way forward if considering this sort of interaction. Hopefully I should be looking into this area using a Wiimote at some stage.

  4. 4 Mike Chelen January 3, 2009 at 4:31 pm

    What is the license for this code?
    Been looking for something like this, thanks 🙂

  5. 5 jamesalliban January 3, 2009 at 9:36 pm

    Feel free to use it at your leisure Mike. Credit would be nice but don’t feel pressured 🙂 I’d be interested to see what you make with it

  6. 6 kvnxp July 16, 2009 at 2:33 am


    hey how to build the source ??


  7. 7 jamesalliban July 16, 2009 at 10:23 am

    Thanks kvnxp. You need to use Processing –

  8. 8 Remi May 30, 2010 at 4:40 pm

    Hi !

    Great job ! Your code is so cool !
    However, I can’t find where to define the location of the “pixel color detector” if you know what I mean ?
    Because in this version, the program detects the color of the extreme bottom right pixel… I would like it to detect the color in the middle of the screen for example…
    Can you help me ?

    Thank you

  9. 9 jamesalliban May 30, 2010 at 5:27 pm

    Hi Remi

    If I were you I’d search for an alternative colour tracking library. My version isn’t the best as it draws a rectangle around all pixels within a certain colour range. This means that you need have a controlled environment.

    Good luck

  10. 10 Jugglebug November 2, 2010 at 9:06 am

    Hi- i’m interested in using this script for robot vision- (i’m making a tennis ball fetching robot, im too lazy to get the balls myself =D)

    Anyway, i was wondering if you knew of any ways to apply filters to video in processing, like equalization and so on to make the object tracking more reliable- for the looks the results obtained with this method could be overlayed onto the plain video to get the same, but better effect for colours existing elsewhere in the image.

    Sorry if this is confusing, and if this is irrelevant- sue me.

    • 11 jamesalliban November 2, 2010 at 10:35 am

      Looking back at this code, there are some issues. The main one being that the rectangle covers all the tracked colour from the picture. This means that one pixel can ruin the effect. Have you looked at OpenCV? There should be a solution somewhere in this lib.

      Sent from my iPhone

  11. 12 Wesley December 10, 2010 at 12:42 pm

    Hey there James,

    Is it possible to use the source code for commercial use, with adaptations etc…?

    This is brilliant,and just what I am looking for…


  12. 13 jamesalliban December 10, 2010 at 1:53 pm

    Hi Wesley

    I’d be interested to find out more about the project. Can you email me – contact details here –

  13. 14 laura July 13, 2011 at 12:55 am

    hola, fascinante, yo debo hacer que identifique el color y que me muestre una animacion referente al clor , por ejemplo si muestro el color rojo entonces me muestre una manzana (obviamente la animacion ya va a estar cargada.

    me puedes ayudar con esto???

  14. 15 laura July 29, 2011 at 5:38 am

    hola, fascinante, yo debo hacer que identifique el color y que me muestre una animacion referente al color , por ejemplo si muestro el color rojo entonces me muestre una manzana (obviamente la animacion ya va a estar cargada)

    me puedes ayudar con esto???

  15. 16 laura July 29, 2011 at 5:39 am

    Hello, fascinating, I must do to identify the color and animation to show me a reference to color, for example if I show the color red then show me an apple (obviously the animation and will be charged)

    can you help me with this??

  16. 17 Li Yu November 16, 2011 at 4:57 pm

    Hello James,
    It’s fascinating what you did!
    I’ve try by myself but its don’t work, don’t know if i need change the “webcam settings”. but i found that Mac’s webcam settings is impossible to change ,i’ve tried the Photobooth with a webcam exterior,still the same….Could you tell more about that if you see my messages.

    Thanks so much !

  17. 20 Li Yu November 17, 2011 at 2:39 pm

    Thanks , i’ve found someone helped me .

    • 21 Sri September 25, 2013 at 5:58 pm

      Hello, Li Yu
      Can you help me with the similar problem you faced regarding the webcam in mac.
      How can i proceed with it.

      Thank you 🙂

  18. 22 TimmyW November 30, 2011 at 11:45 am

    This is a verry cool project. I’m making a sorting machine for my school project. I have 1 problem. When a color is detected i need to send a signal to an output. For example : When red is detected, a pin pushes an object a side. How can i send the signal from detecting outside my computer to a PLC ? Thanks

  19. 23 Cristian Sodillepa July 13, 2012 at 8:54 pm

    great job men!! i aplied to a path traking control robots modifing to obtain orientation !!! i send u the code when l finish excellent code !!!

  20. 24 Jonatan Van Hove (@joonturbo) August 31, 2012 at 5:22 pm

    I needed to add video.start(); worked great otherwise 🙂 Probably due to Processing update

  21. 25 K October 21, 2013 at 7:44 pm

    Hi! Not sure if you’re still updating this blog, but I keep getting the same error with your code: could not find class or type named “CoordsCalc”. Do you know how to fix this?

  22. 27 Chouaib December 13, 2013 at 10:35 am


    Thank you for your brilliant work, but the link you’ve posted to a more updated work is actually less effective in tracking than your work 😀 😀 even though you’ve done it years ago…


    • 28 James Alliban December 13, 2013 at 11:49 am

      Really? Hilarious. That’s good to know you’re finding it useful.

      Currently the bounding box line positions are assigned once a single pixel matches the specified colour. To make it more reliable I would suggest only assigning the line positions once n consecutive pixels match the specified colour. Or maybe once n pixels in an entire line match. This would reduce the amount of false colour matches.

    • 29 Chouaib December 13, 2013 at 12:02 pm

      I actually am working on this, i have to locate a robot with color marker on it on the image, so you can imagine that each time the detected pixel is on the area of the marker, so each time i have another position (with the limit of the marker) of the robot, which certainly will give false positioning…Thus i am going through your code, to grab a bit of what you’ve done 😀 i’m stuck for now (maybe you’ll think about commenting more your code so people will understand what you’re doing :p :p )

    • 30 James Alliban December 13, 2013 at 12:09 pm

      Haha yes I do comment my code much more these days. Mostly so I can remember what I’ve done!

      Let me know how you get on with the project. I’d be interested to see the outcome.

    • 31 Chouaib December 13, 2013 at 12:10 pm

      I will 😀

    • 32 Chouaib December 13, 2013 at 12:19 pm

      I think i found a solution, tiny solution for the shacking tracking, just saved the past color location, then added a test to see if the distance between the new location and the past is within the marker geometry, if it’s within, then just use the old location, if not, use the new one 🙂 and that works like a charm 🙂

  23. 33 denizayapusoglu April 13, 2017 at 3:26 pm

    Hello, I am trying to download the codes but the links are not working. Is it still available?

    • 34 James Alliban April 17, 2017 at 2:54 pm

      Not sure where that is but this is almost 10 years old and, to be honest, it wasn’t the best solution at the time. There are bound to be better approaches out there.

    • 35 Characon May 1, 2017 at 7:47 am

      Hey, I’m trying too, did you find anything similar?

  24. 36 Thisara September 26, 2017 at 8:09 am

    Great Job and best solution for me.. please send me your source code..

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Flickr Photos


%d bloggers like this: