2D Ribbons

2D Ribbons

I’ve been toying around with Eric Natzke’s Ribbon code and have managed to port it over to Processing in 2D form. Although the result and code are both very different to that of Natzke, it retains the original technique for building the ribbons. You can play with it and download the source here.

More ribbons can be added by changing the ribbonAmount variable. The colours are chosen from an image, in this case, “rothko_01.jpg”. This must be kept in the same folder as the pde files or there will be an error.


18 Responses to “2D Ribbons”

  1. 1 lukasz December 11, 2008 at 12:38 am

    thx for posting the source…. looking forward to playing around with it.

  2. 2 Jeroen Smit March 6, 2009 at 3:04 am

    Thanks man! for posting the code-parts & for your vision on learning. Just got the parts together and am enjoying a single ribbon, following a yellow bottle right now 🙂 *and I only installed Processing a few hours ago… you wrote some clear code :)*

    Keep up the creative thinking!
    Kind regards,

  3. 3 James Keane July 25, 2009 at 10:15 pm

    Hey, thanks for the code!

    I have created something with it, check it out here: http://jameskeane.ca/programming/spectrum

  4. 4 jamesalliban July 25, 2009 at 10:18 pm

    Very nice James. Always great to see people making cool things with my code. Well done.

  5. 5 Panu August 10, 2009 at 6:44 pm

    OMG, this is what I`we been looking for soooo long!! Thank you very much! I quess it`s going to be little sleeping next night ; ) This is been too easy for so far because of you guys.

    I just wonder am I able to pick the color from background image more accurate?

    I mean way it is done in “pointillism ” example?? I think Erik has some kind of trick here in flash code. In hes brush the color is chancing very nicely..

    Anyway thank you “supermuch”!!


  6. 6 Raphaël de Courville October 9, 2012 at 2:14 am

    Hello James,

    Thank you for this beautiful work. It helped me a lot coming up with an example for the PS Move API (http://thp.io/2010/psmove/):


    I hope I credited you properly 🙂

    Now I have to get the z-axis back into the game.


  7. 7 James Alliban October 10, 2012 at 5:43 pm

    No problem Raphaël. Good to see this code is still of use to people. Thanks for the credit. Do you have any video footage?

    • 8 Raphaël October 10, 2012 at 5:49 pm

      You’re right on time, I just posted a demo video this morning (http://vimeo.com/51133900).

      BTW: How difficult do you think it should be to make it 3D again? I have yet to dissect the ribbon classes to see it for myself but any tip might come in handy.

      Thanks 🙂

  8. 9 James Alliban October 10, 2012 at 6:00 pm

    Ah nice. Adding the 3rd dimension shouldn’t be too much work. The difficulty comes when attempting to rotate the ribbon vertices in 3D space. I’m sure you could make it look interesting without this though.

  9. 10 Raphaël October 10, 2012 at 6:05 pm

    I’ll see what I manage to do 🙂 Thank you for your help.

  10. 11 Raphaël de Courville November 22, 2012 at 11:28 pm

    I thought I’d give you a little update on my project since I finally got a stable version.

    This is how it looks : https://vimeo.com/53779315
    The same with PS Move and Kinect : https://vimeo.com/54111243.

    I’m now looking for ways to make this run faster and be more reactive, maybe using VBO and shaders.

    Thanks again.


  11. 12 James Alliban November 24, 2012 at 2:02 pm

    Thanks for the links Raphaël. Looks really elegant with the calligraphy style.

    I’d definitely investigate shaders. Are you using openFrameworks or Processing? Makes things much easier.

  1. 1 25: Natzke Ribbons | 100 Abandoned Artworks Trackback on January 13, 2009 at 10:05 am
  2. 2 motion tracking in processing « Hunting a Snark? Trackback on January 16, 2009 at 1:14 pm
  3. 3 Spectrum | James Keane Trackback on July 25, 2009 at 9:58 pm
  4. 4 2D Ribbons in Alchemy « James Alliban Trackback on January 8, 2010 at 12:34 pm
  5. 5 ARE2010 presentation resources. « James Alliban Trackback on June 5, 2010 at 9:20 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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: