Make a dancing stick figure from a photo

It helps to practice using the Stick Editor before embarking upon a photo-based stick figure. If you have not already done so, read the Stick Editor Instructions before continuing.

The instructions on this page will take about two hours to work through the first time. Subsequent photo-stick-figures will take about half an hour each.

Note that these photo figures uses rotated bitmaps. These are only supported under Windows XP, 2000 and NT. You can neither edit nor view a photo-based stick figure under Win95/98/Me.

The discussion in this article makes reference to two particular photo stick figures pictured to the right: President Bush (who is already included with the Dancing Stick Figure download), and Damon (who can be downloaded separately - Damon.stk, 55k).

1. Create bitmaps for each limb

The first step is to take the photo and break it into bitmaps for individual limbs, using Photoshop or some other bitmap-editing program.

A. Original photo, 1704x2272 jpeg

A. Individual bitmaps, actual size

C. How the bitmaps will fit together

1. Start with a high-resolution photo. Ask your subject to pose with all limbs distinct, without arms or legs obscuring the shirt or trousers. It's best to wear clothes without strong patterns.
2. Each limb should be saved as an individual bitmap, 256-colours. Chose distinct colours as the background (I normally use green). The head looks better if it is higher resolution than the body. I suggest resampling the head to 200 pixels high, then make a bitmap of it, then resample the entire body to 360 pixels high (from toe to top of head) before making bitmaps for the rest of the limbs. Make sure the background has a crisp outline: only make the background after resampling, not before, and only save as lossless BMP or GIF rather than lossy JPEG.
3. The limbs should overlap a little, as shown in the right-hand diagram. The red dots show how the limbs will rotate. For knees, it is easy to make the overlap: the same photo pixels appear in the bottom of the thigh as in the top of the calf. Elsewhere I used Photoshop's Clone tool to create some overlap: see how the pelvis extends above the belt, how the chin has been painted out of the neck, how the forearms extend over where the shirt used to be, how the right hand extends under the watch. Also, if arms are obscuring the torso in the original photo, they will have to be edited out to create a clean torso.

The resolution of the bitmaps is a balancing act. Too high resolution, and the stick figure will be sluggish. Too low, and it will look blocky. The dimensions suggested above are a compromise that looks good on a 700Mhz machine at 1024x768.

2. Load the bitmaps into a stick figure

It's easiest to start with an existing stick figure and then modify it. In your Stick Figure directory, make a copy of one of the figures (maybe President Bush, or Damon). Double-click on this copy to start editing it. Chose the menu option

   Tools|Bitmaps

This opens the Bitmaps dialog. Click the "Delete" button to delete all the existing bitmaps. Then click the "Add" button and add in all your newly-created bitmaps, one by one.

Note that all the dotted lines in the figure will be invisible when the figure is displayed. During editing, their visibility can be toggled with the S key, or from the Tools menu.

It will be easier to splay out the individual limbs before continuing, as shown in this screenshot. Do this by dragging the "position" joints (indicated with red arrows in the diagram).

Now, right-click on the "bitmap" joints (indicated with blue arrows) and for each one choose the appropriate bitmap from the Fill menu.

To rotate or resize a bitmap, click and drag the blue "bitmap" joint.

The next step is to make the limb rotate properly. Recall the first diagrams on this page, where a red dot indicated the root around which the limb would rotate. This root is indicated with a red arrow in the diagram to the right. Use the "bitmap" joint (blue) to adjust the size and orientation of the limb. Use the "joint" (green) to adjust the length and angle of the green line, and hence the relative position of the root.

It may be easier for now to make the limb a fixed-freqency limb (right-click on the "joint" (green) and choose 'Frequency|Fixed'). This will give complete freedom of movement. Later on, when deciding how each limb should respond to the music, we will chose something other than fixed.

Finally the limb can be moved into position. To do this, drag the "position" joint (red).

In the case of this forearm, the forearm should go underneath the sleeve. So, click somewhere on the forearm and press the PageDown button. Or do the same by right-clicking on it and using the Order menu.

We now make the limb respond to the music. Right-click on the "joint" (green) and choose something from the Frequency menu. I use high frequencies for jittery limbs like arms and hands, and low frequencies for solid limbs like the thighs and torso. I normally make the left limbs respond to the left channel, and the right limbs respond to the right channel. The shortcut keys "L" and "R" and "1" through "6" can be used to select channel and frequency.

This particular forearm will be contracted when the music is quiet (black dot) and fully extended when the music is loud (grey dot). Drag the black and grey dots to give it an appropriate range of motion.

Altering positions and frequencies is easiest if you can see the dotted lines. If they have been hidden underneath some bitmaps, then click a line anywhere and press PageUp to bring them to the foreground. Also, use the S key to toggle their visibility.

3. Tweak it so it responds to the music

Press S to hide the dotted lines, and press J to make the figure start Jumping (dancing) in time to the music. This dancing-within-editor is useful to get a rough idea of how the Stick Figure will dance, but for fine-tuning Winamp or Windows Media Player is best. (The editor's built-in beats are Kylie Minogue, Moby and the Star Wars Imperial March.)

The following images are in "whiteprint" mode. Within the editor, press I to switch into whiteprint mode. Because it shows just grey, instead of the bitmaps, it can be easier to work in.

How to make the body as a whole respond to music? Two possibilities are shown. President Bush, on the left, has a kind of wooden response: his center of rotation is slightly outside, and his entire body moves together according to channel L1. Damon, on the right, has a more energetic motion. His center of rotation roughly in the abdomen - where the Chinese might say his "chi" is. His top half is on "difference" channel D1 and so rotates right or left depending on whether the music is coming out of the right or left channel. His lower half is on channel D2 in the opposite direction.

Bush has a torso and two thighs coming straight out of it, which was possible because his jacket extends fairly low. But Damon had his shirt tucked in at the waist and so needed a separate pelvis element. Also, the pelvis allowed a wider range of motions for the thigh. In general, a wide range of motion makes a stick figure look good, but it generally only works if the subject's clothing isn't baggy.

How should the arms respond? President Bush, on the left, has arms in front of his body. His arms go straight down when quiet, and fold up to his chest with loud music. Damon, on the right, extends his arms straight up for loud music. Incidentally, Damon's left hand actually responds to channel R5 (right-channel, red). I thought this would break the symmetry a little, and look good.

The hands on President Bush look great, with index fingers pointing out. It makes him look like a funkier dancer.

Bush also uses just a single bitmap for arms and hands, rather than separating the hands out into individual bitmaps. It doesn't look quite as good, but was quicker to create.

How to make the head respond to music? Shay, on the left, sways his chin from side to side. That's because the head is rooted higher up and the center of the head bitmap is lower. This is appropriate for people who have low jaws. Damon, on the right, sways the top of his head from side to side. He does this in real life, especially when listening to Bilbo Bagins, and it makes a weird noise when his head is leaning against a corrugated radiator! Anyway, the root of his head rotation is at the top of the neck, and the center is higher up. This is appropriate for someone who holds their chin up.

Boogie down or boogie up? Fr James, on the left, gets down with the beat: his thighs go horizontal, which lowers his body. Damon, on the right, goes up: his thighs go vertical, which raises his body.

In both cases, the feet have extra lines leading out to their heels and toes. These extra lines are terminated with "Bottom Anchors" (the yellow underlines). This means that, no matter what arrangement the limbs are in, whichever anchor is lowest will be on the floor of the image. This is what makes the entire body move up or down. To modify anchors, right-click on a joint and choose from the Anchor menu. If a figure is breakdancing, then his hands or shoulders or hips would need to have bottom-anchors as well.

The stick figure to the right has a wobbling hat, which wobbles in time to the music. If it wobbles in the same direction as the head, it lends the head a feeling of momentum. The hat is made of two pieces: the back-brim (which goes behind the head, using PageDown) and the front/top (which goes in front of the end). Obviously, the back-brim had to be created almost entirely within Photoshop using the clone tool.

This page was last updated by Lucian Wischik in January 2003. It relates to his Dancing Stick Figure visualization for Windows Media Player and Winamp. If you have any comments, please email him.