Color tracking in Quartz Composer


I just built 6 of the synchronizing firelfy kits from, and when I saw them blink I immediately felt that it would be nice to hear the rythms the lights were creating.

My first idea for putting together a quick demo of this was to track the flashes with a webcam and Quartz Composer. QC doesn’t have a built in color tracking patch, so I spent some time googling for one. I found a thread on Apple’s Quartz-dev list about an example in the book GPU Gems 3.

Re: Core Image Color Tracking in GPU Gems 3

In the thread a guy asks for help on using the patches in QC, and has attached a screenshot of his composition. I found the example code, compiled it in Xcode, and duplicated the composition from the screenshot. So, he was right, the composition did not work. While I don’t have much experience with objective-c, I still decided to try deciphering the example code in order to create a working composition.

The example code comes with two Xcode projects, one which compiles a program that loops a video file and performs color tracking on it, and another that compiles an Image Unit that provides the color tracking patches. By looking trough the source for the application, I found the correct way to patch up the stuff in QC.

Apple Developer Connection: CIColorTracking

The information can be found at the very end of the AppController.m file in the CIColorTracking project. The  _renderFilterChain method sets up the patches. The names of the patches are not the same as how they appear in QC though. To find out the human readable versions, you can look them up in the  Description.strings (English) file in the TrackingImageUnit project.

I created a composition based on my findings, and to my surprise the guy in the video juggled with a duck instead of an ugly colored ball. So far so good, but what had me scratching my head for a while was how to get the coordinates for the tracked object instead of just an image superimposed on a video. Turns out that the Color Tracking Centroid Filter outputs an image which is just 1×1 pixel. The data is encoded into the rgba color channels of that single pixel. To use the position data, just connect the output to an Image Pixel patch and you get the x value from the red channel output and y from the green.


Now I’m just wondering if color tracking is the way to go at all for my demo. Maybe 6 Image Pixel patches will be enough to detect the flashes. Oh well, at least I got a little taste of Image Units, and I think I’ll have to read up a bit on that objective-c stuff.


10 thoughts on “Color tracking in Quartz Composer

    1. I’ve done a re-install after this post and haven’t found the files just yet. The composition isn’t terribly complicated, in fact I don’t think there were any special configuration values in any of the patches used. So by downloading the source from the ADC -link, compiling and copying the result into the proper place, and building the patch as per the screenshot in the post, you should get it going. I’ll put the file up once I find it though…

    1. Start off by downloading the source (the “Download Sample Code” button on the CIColorTracking page).

      Since you probably have installed the developer tools in order to get Quartz Composer, you should have XCode installed. Unless you did a custom install and unchecked that item. In that case you can add XCode by running the installer again.

      The downloaded .zip file will extract into a folder called CIColorTracking that contains the xcode project files. That folder has a subfolder called TrackingImageUnit, in which the project for the image unit plugin lives. Double click TrackingImageUnit.xcodeproj and the project should open in XCode.

      There’s two items in the button bar of the project window that are of interest. The Active Build Configuration dropdown defaults to “Debug”, change it to “Release”. Then press the Build button (with the hammer icon). Once the plugin is built, the tricky part is to find where that plugin went. It’s in CIColorTracking/build/release/TrackingImageUnit.plugin. Copy that file into /Library/Graphics/Image Units and the patches should appear the next time you start Quartz Composer.

  1. I have the same problem, I moved the plugin to

    /Library/Graphics/Image Units

    Library/Graphics/Quartz Composer Plug-Ins

    /System/Library/Graphics/Quartz Composer Patches

    and so on, but I cannot see the plugin in QC…

    help! 🙂

    1. Mine is in /Library/Graphics/Image Units/ and it works. I’m running OS X 10.5.8, QC 3.1. Could it be that it’s not working in 10.6?

  2. Checked and when excuted withing XCode Project, ir works fine. Maybe the format changed slightly and it not recognized when placed in the prescribed locations.

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