Virtual Ribbons

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to FurlAdd to Newsvine

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.

19 Responses to “Virtual Ribbons”

  1. 1 chris December 5, 2008 at 6:45 am

    great work. love the ribbon effect.

  2. 2 Jop Wielens December 5, 2008 at 10:31 am

    Very nice. I bet you that glove wasn’t expecting to be used in a AR instalation 😉

  3. 3 Brammy December 8, 2008 at 4:55 pm

    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

  4. 4 louis December 22, 2008 at 11:11 am

    very tastey james, an appropriotte effect for a facial expression that dramatic.

  5. 5 jamesalliban December 22, 2008 at 12:00 pm

    Ha! Cheers Louis. I experimented with several expressions to accompany the video and melancholic intensity won hands down.

  6. 6 aceface January 10, 2009 at 11:32 pm

    Your ribbons look simply fantastic.

  7. 7 sermad February 16, 2009 at 3:59 pm

    It was actually pretty easy hacking together the ribbons and the webcam tracking to get something together. Thanks LOADS for the code.

  8. 8 patrik March 9, 2009 at 10:40 pm

    nice job

    i’m sorry but is not easy for me….sig…

    sermad teach me pls

    thanks james for sharing your amazing code

  9. 9 Rick March 31, 2009 at 1:13 pm

    Thanks for sharing, this is great!

  10. 10 andy March 31, 2009 at 11:51 pm

    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!!!

  11. 11 franco April 18, 2009 at 8:16 am

    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! 😀

  12. 12 franco April 21, 2009 at 3:05 am

    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. 😀

  13. 13 jamesalliban April 21, 2009 at 10:15 am

    @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.

  14. 14 copet80 September 1, 2009 at 11:24 pm

    I love all your work. Especially this one 🙂

  15. 15 Andres December 13, 2009 at 12:03 am

    Liberá el código, garca

  16. 16 Roarke December 8, 2010 at 4:45 pm

    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.

  17. 17 jamesalliban December 8, 2010 at 7:44 pm

    The colour tracking code can be found here:

    It needs some work as it currently draws a rectangle around all the colour in the shot. You might want to look into OpenCV

  18. 18 Sarah December 19, 2010 at 9:47 pm

    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.

  19. 19 jamesalliban December 20, 2010 at 3:37 pm

    For motion tracking you should look at the Frame Differencing example:


    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.

Leave a Reply to louis Cancel 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


Flickr Photos

%d bloggers like this: