Click here to try out Ragdoll Animator

Very crude example animation: here. Copy/paste it into the textarea at the animator page, then click “Load from textarea.”

For the past two weeks I’ve been working on a simple Verlet-based Animator. Everytime you click “Add Frame” (or press spacebar), the animator tries to predict your next frame by apply motion to the stickman. You can even simulate it in real time by holding spacebar and grabbing the stickman and flinging him around. There’s a lot of other cool things you can do here, but I’ll leave it to you to find out.

Ragdoll Animator, like most of my stuff, was programmed in Processing. Instead of compiling it as a Java Applet this time I instead used Processing.js.

The creation of Ragdoll Animator was made with the help of some of the Processing.js dev team, especially Pomax, who was willing to tolerate my countless questions about code design.

For animators: My animation example is very crude and I’m certain other people are more capable than me at making something neat. Paste your animations at PasteBin and tweet them! I’ll be sure to include animations tweeted in later blog posts.

Source code info after the break.

For programmers and aspiring programmers: I’ve included the source to Ragdoll Animator in its webpage. Here’s a shortcut to the source. Comments are scattered throughout the code to better help you understand how it works. I designed the program to be able to be ran as a Applet compiled through Processing. If you truly wish, you can also run it using Processing.js, which is included in the source. The biggest difference between the Javascript and Java versions is that the data is saved differently. Data in javascript is encoded using LZW compression, where-as data in the Java version isn’t encoded using any sort of compression.