11.5: Computer Vision: Color Tracking - Processing Tutorial

In this tutorial, I demonstrate how to analyze the pixels of an image to track an object of a specific color.
Link to the previous Computer Vision video: • 11.4: Introduction to ...
Support this channel on Patreon: / codingtrain
Send me your questions and coding challenges!
Contact: / shiffman
Links discussed in this video:
Computer Vision for Artists and Designers Essay by Golan Levin: www.flong.com/t...
Image Processing in Computer Vision by Golan Levin: openframeworks....
Source Code for the Video Lessons: github.com/Cod...
p5.js: p5js.org/
Processing: processing.org
Computer Vision videos: • Computer Vision
Coding Challenges: • Coding Challenges
Help us caption & translate this video!
amara.org/v/QbrO/
📄 Code of Conduct: github.com/Cod...

[@Sluggernaut]

"Please don't be like me. Live your life with spaces in weird places." Daniel Shifman - 2016 4:32 Words to love and live by.

[@TheCodingTrain]

+Ben Miles haha. I need to make a tshirt with this I think.

[@CyrilJap]

I’ve stopped binge watching Netflix, too busy binge watching The Coding Train

[@dutchman3574]

You deserve more subscribers!! You make verry good video's that are interesting to watch! keep it up!! Greetings from the Netherlands!!

[@TheCodingTrain]

thanks, so glad to hear!

[@jamiekazemier3652]

Ook de groeten van mij 😎

[@franksonjohnson]

Yes! I am so excited for this series!

[@TheCodingTrain]

glad to hear!

[@config2000]

Fascinating topic. I suppose if a speed improvement is needed you could scale down the image (say 1/4 size) or loop through the pixels in steps of 4 for X and Y. At the risk of losing some of the resolution though.

[@TheCodingTrain]

+config2000 this is a great tip yes!

[@jatinrawat1047]

You can find the Golan Levin article here -> www.yorku.ca/caitlin/futurecinemas/resources/coursepack/readings/computervision

[@furrane]

Great video on a really cool topic, can't wait for the next one :) ( Btw the numbers of the videos about computer vision seems messed up )

[@TheCodingTrain]

Thanks I'm hoping to revise / revisit the numbering system for all the videos at some point.

[@geoffwagner4935]

i tried so hard to make opencv work in anyway when battlefield 3 came out maybe months. clearly had no clue what i was doing. lol extremely interesting when one of these mysteries of the past get solved

[@chrisgavin]

Hi Thanks again Mr. Coding Train I'm learning a lot from these Processing tutorials. Around 3:26 you mention that your camera is doing "auto white balancing" and that there may be a way to fix this? I have an 8MP ELP HD USB camera I've just bought and I'm trying to get working for my project. There are no buttons on the camera and this camera uses the generic HD USB Camera driver (Here on Windows 10). Is there ANY way I can switch off auto white balance and auto exposure from within my Processing code? It's pretty fundamental to my project this, hope anyone out there can help, thanks. Chris

[@rngrover5956]

i think you are the best person ever been on youtube buddy , you are creating awesome vids keep up ;)

[@kemoiii]

#SpacesInWeirdPlaces.

[@zer001]

can we go for a few beers and talk about coding? Great Video!!

[@maxwolf1602]

Do you sell software clones of yourself that will point at bits of code and answer my questions? :D

[@TheCodingTrain]

I wish!

[@gregersn]

Do you have any recommendations for good cameras for installations and other art projects using computer vision?

[@TheCodingTrain]

I used to love the PS Eye but it doesn't work with the mac anymore. The kinect is great for depth sensing.

[@EngineeringPlayway]

Hello Daniel, Loving the way you teach, Is it possible to port the above code using **processing.js**

[@TheCodingTrain]

Yes, this code can work in JS also. I'm not sure if processing.js supports camera input, but p5.js does.

[@Timroin]

Thanks gave me an idea

[@etalon11]

I built this with python but cdist (for the color-distance) is really slow. What am I doing wrong? Takes 0,3 seconds for all pixels in one frame (640x480)

[@nmbarbieken7]

Hey there..i'm trying to link my arduino with vision processing ...CAN U PLEASE!!!do some videos on communicating The Arduino with processing3??? (gosh..I've Posted this everywhere! :p)

[@brod515]

would the solution for it including your lips and other red pixels be to add a distance threshold in your if statement. so if the x,y point captured is much further than the previous x,y pixel its should be disqualified so it's stays at the red cup.

[@TheCodingTrain]

+MrBrN197 yes indeed! You'll see this in my video release this coming Thursday.

[@0Xmo]

I need to do this with javascript but with images not video anyhelp?

[@028bbird]

Very good demonstation. I 've problem with hypermedia.video. "No library found for hypermedia.video Libraries must be installed in a folder named 'libraries' inside the sketchbook folder (see the Preferences window)" How should i solve this issue? I use processing 3x and i tried with processing 2x still doesn't work. import hypermedia.video.*; import java.awt.*; import processing.serial.*; OpenCV opencv; // contrast/brightness values int contrast_value = 0; int brightness_value = 0; Serial port; // track the current servo for control, position, and default positions. char servoTiltPosition = 90; char servoPanPosition = 90; char tiltChannel = 0; char panChannel = 1; // the x,y coordinates of the middle of the face. int midFaceY = 0; int midFaceX = 0; // define the center of the screen. int midScreenY = (height/2); int midScreenX = (width/2); int midScreenWindow = 10; //error margin for centering. int stepSize = 1; //degree of change per iteration. Rectangle[] faces; void setup() { size( 320, 240 ); opencv = new OpenCV( this ); opencv.capture( width, height ); // open video stream opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT ); // load detection description, here-> front face detection : "haarcascade_frontalface_alt.xml" // print usage println(Serial.list()); // reveals which com teh arduino is on. port = new Serial(this, Serial.list()[0], 57600); // set baud rate to match arduino. println( "Drag mouse on X-axis inside this sketch window to change contrast" ); println( "Drag mouse on Y-axis inside this sketch window to change brightness" ); // send the initial angles to the Arduino. port.write(tiltChannel); // set tilt servo ID port.write(servoTiltPosition); // sends tilt angle port.write(panChannel); // set pan servo ID port.write(servoPanPosition); // sends pan angle } public void stop() { opencv.stop(); super.stop(); } void draw() { // grab a new frame, convert to gray opencv.read(); opencv.convert( GRAY ); opencv.contrast( contrast_value ); opencv.brightness( brightness_value ); //display image image( opencv.image(), 0, 0 ); // proceed detection faces = opencv.detect( 1.2, 2, OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 ); // draw face area(s) noFill(); stroke(255,0,0); for( int i=0; i 0) { //If a face was found, find the midpoint of the first face in the frame. //NOTE: .x and .y of the face rectangle corresponds to the UPPER LEFT corner of the rectangle, //so they are adjusted to find the true midpoint. midFaceY = faces[0].y + (faces[0].height/2); midFaceX = faces[0].x + (faces[0].width/2); //Find out if the Y component of the face is below the midpoint if(midFaceY < (midScreenY - midScreenWindow)){ if(servoTiltPosition >= 5)servoTiltPosition -= stepSize; //If it is below the middle of the screen, update teh tilt positions variable to lower the tilt servo. } //Find out if the Y component of the face is above the midpoint. else if(midFaceY > (midScreenY + midScreenWindow)){ if(servoTiltPosition = 5)servoPanPosition -= stepSize; //Update the pan position to move the servo to teh left. } //Find out if the X component of the face is to the right of the midpoint. else if(midFaceX > midScreenX + midScreenWindow){ if(servoPanPosition

[@028bbird]

This code i coppy from kzbin.info/www/bejne/ZpelcpKhoMhgp6c

[@dimpap5565]

Hey, I have been trying to adapt that example to a Raspberry Pi, however, I keep getting errors like "ArrayOutOfBoundsException" here "color currentColor = video.pixels[loc];". It would be highly appreciable if you could help me with that. Thank you.

[@alexfrost6402]

Is it possible to make the code so that it automatically tracks the reddest colour, without the mousePressed? I have been trying for a quite a while now to make it start that up automatically, but with no luck

[@TheCodingTrain]

Start with color(255,0,0) as trackColor!

[@박세준-k9z]

why do I have this error? "A library relies on native code that's not available. Or only works properly when the sketch is run as a 32-bit application. Could not run the sketch (Target VM failed to initialize). For more information, read revisions.txt and Help → Troubleshooting." on the String[] cameras = Capture.list(); code

[@JustinStazza]

You need to download the processing video library to get access to live videos/movie files. Here's how kzbin.info/www/bejne/jXmWYpeXiM9npMU

[@edgarespinosarodriguez6891]

alguien que tenga el link o sepa donde esta el link para descargar el codigo ?????????????????????

[@lucasiallorenzi]

Please! If i want to send the X and Y position of color to OSC, how i can do ?

[@geoffwagner4935]

that was like the trick when some body pulls their thumb off and puts it back on. OO what a freakish thing with those space actually working.

[@brod515]

I don't understand that formula (x+y*width). I'm new to c but when i search through a 2d array i type in array[x][y] and this seems to make sense to me. in your case i dont see how that formula gets the grid you want.

[@TheCodingTrain]

This is explained further in this video: kzbin.info/www/bejne/e57XhmObodSHoqc

[@brod515]

ahh.. I see I should be watching this videos in order then(haha). sorry I just subscribed recently and everytime a video shows up I just watch it hoping i'll understand. I'm trying to learn C and python but only to use it in softwares that I work with. So the aspects of draw and pixels don't really matter for me but I try to understand the code. Thank you

[@furrane]

In processing the pixel array is a simple array ( like lists in py ). It would make sense to have an array of arrays for better understanding, but it's slower.

[@jamiekazemier3652]

Yo coding train, I got an question, I am developing an vision system for the first robotics competition, is there any way I can color the pixels of our target and track a target?

[@jamiekazemier3652]

And if the target moves it changes a bit of color, I am now using exact 1 color is there an way I can set a target between two colors in?

[@matthewwilliams739]

Can you upload a p5.js version? Or either link me to a good resource? I'm tracking to transfer this code over but I'm running into trouble assigning the currentColor variable.

[@zengchristi5381]

brilliant, thank you very much! I LEARNED A LOT!

[@diandraelmira9018]

When I was trying it out it said "No library found for processing.video Libraries must be installed in a folder named 'libraries' inside the sketchbook folder (see the Preferences window)" would you know how I could fix this? thank you so much!

[@TheCodingTrain]

Go to Sketch-->Import-->Add Library

[@diandraelmira9018]

@@TheCodingTrain thank you! :)

[@deadcraftdeadcraft5063]

Why dont you track the position between the last average and the new found redish pixels and value them, so the nearer get a higher value so then you dont get red on your skin/lips mixed with the red cup

[@TheCodingTrain]

This is an excellent idea!

[@adriancardenosocerezo]

Hi! Where is the code??

[@aouadtayeb3837]

hi! what should i install with visual studio to do this tutorial ?

[@zulfiye9093]

how I find the Code ?

[@anidalal3]

Is there a p5 equivalent of this video somewhere?

[@jorgeandres7884]

Golan Levin link doesn't exist anymore :(

[@joshstafford3444]

Urm what was that? 5:11

[@cheatman05]

some throttling stuff I guess

[@katinkabvre8207]

i can't run the code, because I don't know wich libraries you're using...

[@TheCodingTrain]

This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help kzbin.info/www/bejne/d57PcpyBqM6sZtE.

[@denis22915]

Excuse me where is the program??? I need it 🥺

[@edgarespinosarodriguez6891]

si encontraste el programa ?

[@mdev1980]

Great job! :D

[@archebeats]

Yesssss

[@richardf.1353]

My question is very off topic, but can you try to programm a method that randomizes stuff from scratch? I've always asked myself how it's possible to even get a random number and you seem to know some stuff ;) Maybe this task is too big, maybe its too easy I dont even know... Greetings from Germany!

[@TheCodingTrain]

Sure! Suggest here: github.com/CodingRainbow/Rainbow-Topics/issues

[@rawanddeheliah2175]

could i do this with opencv ,or is it harder ?

[@tomvandenhout9112]

i just copied the code (for a schoolproject) and when i press on run, is says that "The import processing.video cannot be resolved" and that there is no library found for processing.video. What did i do wrong? what do i have to do?

[@TheCodingTrain]

Can you ask this at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!).

[@omarsaldana3891]

where is the code?

[@amelitamacatangay7075]

I dont how to back the color of this mobile

[@yuangong7120]

I also want to know

[@2008madik]

would you like to be lecturer in my college? :)))) luv ur vids!! subs for sure

[@numero7mojeangering]

please clic clic on your green background!

[@miguelpech1101]

Could you pass me the code Is for a task :( +The Coding Train

[@purnya2]

Miguel Pech you can download it

[@cebastian1993]

Loving the gay background :P