Color Tracking in OpenFramework

Hey Guys,

Blog Post after a long time, did some random stuff related to electronics and design but was not able to post anything. These days started working on OpenCV , OpenFramework again. Since there are lots of DIY tutorials on Installing OpenCV and OpenFramework so not posting it. After trying Hello World in OpenFramework, Thought of merging OpenCV and OpenFramework. So here is the 1st outcome, Color Tracking in OpenFramework using OpenCV API for it.

I am working on Ubuntu 12.04, Code:Blocks & I am tracking Red Color.

Using Project Generator of OpenFramework, Created an Empty Project. And after that you will get main.cpp, testApp.cpp & testApp.h files in src folder.


Make Sure you have ofxOpenCv   and ofxCv  addon installed properly in OF folder since it will have some examples so you can check those examples too.

Now In testApp.h , following code will be written.

#ifndef _TEST_APP
#define _TEST_APP
#include “ofMain.h”
#include “ofxOpenCv.h”
#include “ofxCv.h”

class testApp : public ofBaseApp{
void setup(); //to setup a font fo this project
void update();
void draw(); //to draw the font on screen
void keyPressed(int);                         //On KEY Press Events will be defined here
void mouseMoved(int, int);            // On Mouse Move Events will be defined here
void mousePressed(int x, int y, int button); //On Mouse Press Events will be defined here
ofVideoGrabber movie;                          // movie object for capturing Video from Cam
ofxCvColorImage rgb;                           //rgb object for storing color image data
ofxCvGrayscaleImage filtered,red,green,blue;  //objects for storing grayscale image data
ofxCvContourFinder contours;                         //object to store contours of the filtered image
int w,h;



Now in testApp.cpp following code will be written :

#include “testApp.h”

int circleX, circleY,i, red, green, blue;
void testApp::setup(){
w = 640;
h = 480;
movie.initGrabber(w, h, true);
//reserve memory for cv images
rgb.allocate(w, h);
filtered.allocate(w, h);

void testApp::update(){


if (movie.isFrameNew()) {

//copy webcam pixels to rgb image
rgb.setFromPixels(movie.getPixels(), w, h);

//mirror horizontal
rgb.mirror(false, true);

//store the three channels as grayscale images

rgb.convertToGrayscalePlanarImages(red, green, blue);

green+=blue;   // adding green and blue channels then will subtract from red chanel to filter out only red
red -=green;
//filter image based on the hue value were looking for
for (int i=0; i<w*h; i++) {
filtered.getPixels()[i] = ofInRange(red.getPixels()[i],0,40) ? 0 : 255;

//run the contour finder on the filtered image to find blobs with a certain hue
contours.findContours(filtered, 50, w*h/2, 1, false);



void testApp::draw(){

//draw all cv images

ofSetColor(255, 255, 0);

//draw red circles for found blobs
for (int i=0; i<contours.nBlobs; i++) {
ofCircle(contours.blobs[i].centroid.x, contours.blobs[i].centroid.y, 5);

void testApp::keyPressed(int key){
if(key == 115)
i– ;
if(key == 119)
i++ ;

void testApp::mouseMoved(int x, int y){
cout << “mouseMoved: ” << x << “, ” << y << endl;
circleX = x;
circleY = y;

void testApp::mousePressed(int x, int y, int button){
//calculate local mouse x,y in image
int mx = x % w;
int my = y % h;


Now in Last main.cpp this code will be written :

#include “testApp.h”
#include “ofAppGlutWindow.h”

int main(){
//ofAppGlutWindow window; // create a window
// set width, height, mode (OF_WINDOW or OF_FULLSCREEN)
ofSetupOpenGL(1024, 768, OF_WINDOW);
ofRunApp(new testApp()); // start the app

Thats it, Now build and Run the code and you will get red color tracked and a yellow dot over it & start Play with the code

red color detect 2 red color track1

LED’s blinking according to coordinates of mouse

This is the experimental set-up I tried using Processing inheriting Arduino Libraries. Objective I wanted to do was to make red and blue coloured LED’s to blink according to the location of mouse’s X- coordinate is whether even or odd when clicked. i.e. When Mouse’s X-coordinate is even Red coloured LED blinks and when it is odd Blue Coloured LED will blink while clicking it including making different sized ellipse on the screen according to clicks.
hardware setting was nothing that hard, just two LEDs connected to pin 13 and pin 12 of arduino. Thats it.

Rest programming in Processing was as following:-

import processing.serial.*;
import cc.arduino.*;
Arduino arduino;
int ledPin1 = 13;
int ledPin2 = 12;
void setup(){
arduino = new Arduino(this, Arduino.list()[0],57600);
arduino.pinMode(ledPin1, Arduino.OUTPUT);
arduino.pinMode(ledPin2, Arduino.OUTPUT);
void draw(){
color c = color(200,0,0);
if(mousePressed == true){
fill(c, 150);
if(mouseX % 2 == 0){
arduino.digitalWrite(ledPin1, Arduino.HIGH);
if(mouseX % 2 == 1){
arduino.digitalWrite(ledPin2, Arduino.HIGH);
arduino.digitalWrite(ledPin2, Arduino.LOW);

Processing using Arduino

Processing is an awesome library for interactive designers. I was reading stuff about it from last 1 month and after trying its example got an idea to implement after synchronising Arduino and processing and outcome was more awesome.
I synchronised arduino with processing library by following this link.

Ubuntu 10.10 : Wi-Fi reloaded

Wifi problem solved when I tried to install Broadcom’s B43 drivers for my Dell Inspiron 1525. On its automatic Installation for additional drivers I was getting error

SystemError: installarchives() failed

So I got a link
Steps I followed are :-

sudo apt-get –purge remove firmware-b43-installer
sudo apt-get –purge remove dkms
sudo apt-get –purge remove bcmwl-kernel-source
sudo apt-get install bcmwl-kernel-source
sudo reboot

This make my laptop’s Wi-fi in working state .