Bezier animation fun!

Last week I went to FITC in Amsterdam. It was great! I had such a great time. I met a lot of intresting people and although Amsterdam turned out to be quite expensive place, I really liked being there a few days.

During the conference I attended Joshua Davis‘ session which really inspired me. I’ve never seen Joshua Davis present, nor did I know his work. Let me be as crystal clear about this as I can be: The man is a freakin’ genius!
During his session he showed a few demo’s of bezier animated stuff. I felt like trying that myself, and this is what I came up with.

The basic concept is to create a bezier in Actionscript and animating movieclips using the bezier as its motion path.

  • Basic principle (this is actually just a basic pentool (without the option of adding new points 😛 ))

The following versions use the same concept as this one, except instead of fixed anchor points, they all use random points defined in 2 planes. This makes a bit of variety possible allthough the main animation stays the same and that’s absolutely cool!

I added a few keyboard controls to give you some control of what is happening

  • spacebar = show the handles
  • r = clear the bitmap
  • p = pause the animation
  • n = randomize handles
  • b = blur more

Ronny

view all posts

Ronny is a freelance frontend developer with a wild passion for creativity and a relentless hate against flat design. Ronny spent years as a Flash developer before moving to HTML5 and rediscovering fun and happiness.

10 Comments Join the Conversation →


  1. Hyder

    Great work Ronny, any chance we can get our hands on the source?

    Reply
  2. Ronny

    Sure, Hyder. I really should learn to publish the source right away. Will post it asap 🙂

    Reply
  3. Hyder

    Perfect!
    Please comment here or email me when you do, thanks a million Ronny!

    Reply
  4. Eddie Wellar

    Hi Ronnie, can I ask you please to send me the source of this experiment via mail?
    I really like it and I would like to undertand more about bezier animation. I looked around and this is exactly what I’m looking for.

    Thanks you my friend, thanks for sharing your knowledge with the community.

    All the best

    Eddie

    Reply
  5. Ronny

    Sorry guys! Still haven’t gotten to posting the sources! Posting them asap! (4AM right now…)
    Tomorrow: Promised! 😉

    Reply
  6. Eddie Wellar

    Hi Ronnie,
    any news on the source?

    Thanks

    Reply
  7. Ronny

    Well believe or not, but I’m working on getting a class to animate using bezier curves. I will be posting that class along with the sources of this in the coming days. (Only thing I need to do before releasing the class is adding the ‘randomness’ in the motion. Shouldn’t take too long) 😉

    Reply
  8. Ronny

    @ Eddi and Hyder: You can get the (new) sources here: http://nocreativity.com/blog/bezier-animation-fun-revisited 😉

    Reply
  9. Nano

    Thank you for this code. Very helpfull

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *