This artwork allows the user to experience an augmented reality in which the flow of ribbons and particles can be controlled. It works by capturing a colour from an object (in this case, a green glove and the light from my mobile phone) and then using this object to drag the ribbons around the screen.
I won’t be releasing the full source code for this but I have released the source of the two key elements used in this sketch. These are the colour detection and the 2D Ribbons. In my opinion this is the best way to share code for larger projects. Smaller context specific code snippets are far easier to look through and experiment with than entire projects. And if people want to build the final artwork, stitching together the various pieces and adding their own code is a great learning experience.

























great work. love the ribbon effect.
Very nice. I bet you that glove wasn’t expecting to be used in a AR instalation
Nice work, im currently working on something similar in which instead of ribbons flowing from said device, it ‘draws’ on a surface and such
thanks anyways
very tastey james, an appropriotte effect for a facial expression that dramatic.
Ha! Cheers Louis. I experimented with several expressions to accompany the video and melancholic intensity won hands down.
Your ribbons look simply fantastic.
It was actually pretty easy hacking together the ribbons and the webcam tracking to get something together. Thanks LOADS for the code.
nice job
i’m sorry but is not easy for me….sig…
sermad teach me pls
thanks james for sharing your amazing code
Thanks for sharing, this is great!
Great job!!I download the the source code but i cannot make it work.How do you replace the mouse cordinations with the color detection (the code)?at the color detection example i have to select the color with the mouse its time, the ribbons follow the mouse movement. please mail me!!!
Im looking for the same thing, but trying to implement the blobdetection library. Well, is my first day with processing, so is very dificult to me undestand all the code at the fly.
Im merging the BlobDetection in the ribbon code, but at the time to draw, im seeing that rect, fill, and uptade the XYs. So… are you using a lumakey process or something? How do you merge the img and the ribbons?
I want to learn this thing!
Im undestanding how it works, slowly. Last night i make it work with the JMyron library. But is still having a problem with the draw of the ribbons at the refresh time, and some tracking deelay. Now im trying to implement de BlobDetection again.
@andy and franco. This is how to combine the 2 parts:
Look in colour_detection.pde in the drawSquare function. Takre the centre of the draw rect which is:
x = (sqX * rectDivide) + ((sqW * rectDivide) / 2);
y = (sqY * rectDivide) + ((sqY * rectDivide) / 2);
and use these 2 values in _2D_ribbons.pde in the draw function in place of the mouseX and mouseY:
void draw()
{
fill(0, 255);
rect(0, 0, width, height);
x = (sqX * rectDivide) + ((sqW * rectDivide) / 2);
y = (sqY * rectDivide) + ((sqY * rectDivide) / 2);
ribbonManager.update(x, y);
}
I’ve not got the Virtual ribbons code in front of me so this is just a rough explanation to give you a push in the right direction. I won’t be releasing the full code for this artwork.
I love all your work. Especially this one
Liberá el código, garca
Hi James,
Love your work. I am currently doing a project on Processing for my Uni course. I was wondering if there was code available for the section where you use light detection? Would be very helpful.
The colour tracking code can be found here:
http://jamesalliban.wordpress.com/2008/11/16/colour-detection-in-processing/
It needs some work as it currently draws a rectangle around all the colour in the shot. You might want to look into OpenCV
Hi James,
I am a Uni student currently doing a project in Processing. This is all new to me so please bear with me.
Can I ask your advice, in your example of the virtual ribbons code is there an easy way to substitute mouse x and y for motion detection with a webcam so you can move the ribbons with motion rather than using the mouse.
I would really appreciate it if you could help me with the coding for this.
For motion tracking you should look at the Frame Differencing example:
File->Examples->Libraries->Video(Capture)->FrameDifferencing
I’d try to combine this with OpenCV blob tracking and various other features. Probably not for beginners but there’s no harm in being a bit ambitious with you first Processing project.