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.

Click here to see How to Make a Fabric Simulator

Click here to see How to Make a Fabric Simulator Part 2

Yesterday and today I made some long needed changes to Curtain‘s code. Most of it is behind the scenes stuff. The most noticeable change will be how it interacts with the mouse. It should now be a lot smoother and when the user is tearing (right clicking), it wont just tear at points it sees the cursor at, but it’ll tear ALL points between the cursor’s current and previous positions. Meaning it’s now a lot easier to slice the curtain in half with just one swipe.

You might also notice changes in the speed since the majority of the changes are optimization. You’ll only notice it if Curtain was laggy or slow for you before this update. To try out the newly optimized Curtain, check it out here. You can also check out its source here or here. To see a list of updates, jump to the end of the post.

In addition to cleaning up some of Curtain, I’ve made a completely new version of the fabric simulator with my main emphasis on performance. Check it out here.

Changes made to Curtain:

• Removed unnecessary “fixedDeltaTimeSeconds = fixedDeltaTime/1000″ in code.
• leftOverDeltaTime now properly accumulates
• Made changes to Particle.updateInteraction (it’s moved to along side the physics update)
• Simplified some function parameters (namely Link’s constructors and function inside Particle)
• Moved Link drawing into Link, instead of Particle
• Removed translate(width/2,height/2) in draw
• Removed a for loop for drawing, and put the drawing into the physics loop with the condition of it only running on the last loop
• Moved the pinned constraint in Particle’s update() to solveConstraints()
• Interaction now takes into account every point between pmouse and mouse

A lot of the pictures in Algorithmic Art were made using a program I started on a few days ago. I took Curtain and made it 3D. The fabric gets created in the center of the screen, with different parts of it being accelerated in all directions. It’s rendered onto the screen semi-transparently over and over and eventually you get a very organic nebula-like piece of art.

I feel like a lot of what makes the pictures amazing is watching the nebula itself grow. I cleaned it up, and released the applet online which you can try by clicking here. I’ve also uploaded the source on OpenProcessing and Hawkee

Don’t forget I have a Twitter, also a Google Plus profile.

I added a page (link at the top of each page) for showcasing pictures generated using algorithms. Every now and then I might post a series of pictures and make a post here about them, but I mostly talk about the art on Twitter. Follow me if you haven’t already!

I cleaned up the code, added some comments, and released the source to Circus Fluid. It looks a bit different than the older version: the shadows are deeper, and the colors are smoother. Please leave feedback/criticism wherever you like.

The source can be viewed either on OpenProcessing or Hawkee. If there’s anywhere else I should start releasing sources and applets, let me know!

This weekend I made a trippy fluid applet. The brightness of each pixel is determined by the velocity, and the hue is determined by the density. This uses a simple algorithm that’s explained pretty well at in this powerpoint here.

Click here to see the fluid.

Also check out my Twitter.

Today I’ve further extended the verlet algorithm and created a Car from it. At the moment it’s just a box with wheels, but in the future I’d like to allow weight-shifting to it, so it can be played it be like those motocross games. When and if I finish it, I’ll clean up the code and open-source it on http://www.openprocessing.org/ and http://www.hawkee.com.

Also check out my Twitter: @BlueThen.

Short post here. As promised, here’s the source to the ragdoll applet I released a few weeks back: http://www.openprocessing.org/visuals/?visualID=22598

Press ‘r’ to reset. Click and drag to interact.

In this applet, we make use of the Verlet Integration method from Curtain, and create little ragdolls.

I did my best to comment the code for others to use.

Since I finished Curtain, I’ve been experimenting with simulating ragdolls. Click here to play with some ragdolls. For programmers out there interested in the source: hang tight. I haven’t finished cleaning up the source completely yet, but it’ll be released soon (All my sources are released at OpenProcessing).

There’s something about ragdolls that I enjoy a lot. You can swing them, fling them, smash ‘em and put ‘em in a pot. What I made wasn’t exactly full body 3D ragdolls, but it’s set the path for further ragdoll fun for myself. Check the rest of the post for further ragdoll mechanics and what-not. Keep in mind the “constraints”, “masses”, and other stuff involve the algorithms in my Verlet Integration tutorial. (Part 1, Part 2)

Human Proportions

(Some of these links may include drawn nudity. So be warned, those at work with sensitive bosses) The first problem that I had to tackle was human proportions. I wanted all of the body parts to be proportionally correct. Not that the simulation is meant to be accurate, but it sets up a good resource for myself in the future.

In my code the ragdoll is created with a set height. The headLength is calculated by taking the height and dividing by 7.5. Most resources imply that a body is typically 7 to 7.5 heads high. It is normally less than that as the person gets younger (3 for a baby, 4 for a toddler, 5 for a child, and so on). In classical art the ideal human is often portrayed as 8 heads tall, although it depended on the artist and their style.

One of the more well known studies of proportions was Leonardo da Vinci’s Vitruvian Man. Another detailed resource includes idrawdigital’s tutorial on Anatomy and Proportion and an even more detailed one (which measures everything with head widths and head lengths conveniently) is Donald A. Jusko’s Human Portions article.

Here’s what I had, which might not be consistent with the links I’ve posted, but atleast they look right:

• headLength = bodyHeight / 7.5
• headWidth = headLength * 3/4
• head (center) to shoulder = headLength * 5/4
• elbow (same for both) to shoulder = headLength * 3/2
• hand to elbow = headLength * 2
• pelvis to shoulder = headLength * 15/2
• knee to pelvis = headLength * 2
• foot to knee = headLength * 2

Human Limb Masses

Human body length proportions is one of those things that was easy to look up. There are numerous artists out there who have their own articles regarding human proportions out there for other artists. One thing that isn’t exactly used in art though, is human body masses. Taking masses into account in a simple ragdoll simulation might not seem necessary but it is when you start giving your ragdoll muscle flexors and extenzors. When you program your ragdoll to start waving its hand, with physics and all, you don’t want the body to be flying around because of it. If the body is significantly heavier than the arm alone, then you wont get that effect.

After looking, I found one excellent resource for this. In a military article called Anthropometry and Mass Distribution for Human Analogues, there’s a handy table of masses for different body parts on page 37 and other human anatomy resources elsewhere in the article. These are the masses I’ve used (keep in mind these are masses at different joints, rather than masses for limbs):

• Head mass: 4
• Mass at shoulder: 26
• Mass at elbow: 2
• Mass at hand: 2
• Mass at pelvis: 15
• Mass at knee: 10
• Mass at foot: 5

Human Constraints

Why hello, Mr. Ragoll.

What's that, Mr. Ragdoll? You're uncomfortable? We got to do something about this!

Ah that did it! The feet are pushed down with a constraint from the shoulder to the feet, and the head is pushed up with a constraint from it to the pelvis!

In the images above, you can see that the stick man can get stuck in very awkward positions. Especially with the head, which can point down towards the body’s feet. Another awkward position for the ragdoll is the feet pointing in the air. These might be possible if our stickman is extremely flexible, but for the sake of realism, we add some constraints.

Most people add angle restraints to their ragdolls. They keep the knee from having a too small of an angle with the pelvis to torso as well as the head and other limbs. This could work, but I’d rather avoid trigonometry for the sake of speed. One quick fix is to create a very low-stiff constraint between the feet and the shoulders with the distance equaling the total length of the calf, thigh, and pelvis to shoulder. When I say low stiff, I mean low, mine is set to 0.001.

For the head you can create a link between it and the pelvis. Knowing that even the most flexible people can’t bend their heads upside down, I made this stiffness a bit stronger than the leg one (0.02).

If you had a joint for the abdomen, you could create a constraint from the pelvis to shoulder, to give the ragdoll some decent posture. Of course, these constraints are all invisible.

Muscles

My program doesn’t include muscles, but I’ll explain them anyways. Muscles can pretty much work exactly like the constraints above. For the knee, you can add an invisible constraint from the pelvis to the foot.

If you want this knee to flex you set the constraint distance to a low amount and turn up the stiffness.
If you want the knee to extend then you set the constraint distance to the total leg length, and turn up the stiffness.
For relaxing you just set the stiffness to 0.
You basically create a constraint for the 2 point masses attached to the joint you want a muscle for, and change its resting distance and stiffness.

It works well in theory. The biggest problem with this method, however, is that you don’t have control over which direction any joint can go. They could go left or right. You might have a lot more control if the ragdoll was more detailed and in 3D, but this method isn’t practical if you want your ragdoll to walk. In our scenario it would probably be best to use angles to move joints.

To be continued?

I haven’t made as much progress in this area as I wanted. My original plans was to program a ragdoll, program a “brain” for it using genetic algorithms and some fancy neural networking stuffs, then teach it to walk. Because of the problems with the muscles, I wasn’t able to get this done conveniently yet. If you want to give it a try, please do! This seems like a very satisfying project to do so I hope to get something done in the future.

As for 3D ragdolls, I hope to get something like that going as well. Right now I’m attempting to animate the ragdoll manually. Most resources I’ve come across say you should store angles for each “frame” of a ragdoll animation then set it respectively. I’d like it to be a little more dynamic. So I’m having the ragdoll “analyze” the terrain in front of it, then move its knee and foot joints towards it. We’ll see how it turns out in the end.

Resources

• Leonardo da Vinci’s Vitruvian Man.
• idrawdigital’s tutorial on Anatomy and Proportion
• Donald A. Jusko’s Human Portions article – a very detailed analysis of human body proportions, using head lengths and widths.
• Anthropometry and Mass Distribution for Human Analogues – Human body parts, their masses and other details.