Walking Isometric Avatars, Part II (Designing Legs)

URI:	http://herbert.gandraxa.com/herbert/wia2.asp
HTML template:	<a href="http://herbert.gandraxa.com/herbert/wia2.asp">Walking Isometric Avatars, Part II (Designing Legs)</a>
Link symbols:	On current page | On this site | On external site | Wikipedia article | ZIP archive | PDF | E-Mail

---

Article

Organization

Home » Articles » Designing Isometric Avatars » Walking Isometric Avatars » Part II (Designing Legs)

Scope

This article is the second of 4 parts of the third article within the series Designing Isometric Avatars, following the articles Introduction to Isometric Avatars and Components of Isometric Avatars.

Part I (Motion Parameters) introduced the theoretical background to design animated frames.

This second part shows, how one can research biometric locomotion parameters and how the findings are implemented in the actual design. As a result, our so far static avatar will have learned to walk (presented as animated GIF images).

Author

Herbert Glarner

Published

2007-Apr-21

External Links

• Locomotion (PDF), by the UCSD
• Foundations of Human Movement (PDF)

---

Feet and Legs

Pixels per Frame

Let's start this section with re-iterating the graphically relevant statements: An avatar starts and stops at the center of a tile. We need 16 pictures to advance the avatar 2 tiles. A double step starts out with the avatar's right leg. An avatar can be stopped after a step with either leg.

What does this all mean in detail?

Fig. 3: Overall covered distances Because we move 2 × 24 = 48 horizontal pixels with each double step, each of the 16 frames moves the avatar 3 horizontal pixels into the desired direction. But in parallel, also a vertical movement happens. However, because we have a 2:1 ratio, the total vertical movement will span only 2 × 12 = 24 vertical pixels, resulting in 1.5 vertical pixels per frame.

The seemingly disturbing odd vertical measure of 1.5 pixels is not really a disadvantage, though, because lifting a foot and swinging it through the air requires a vertical movement anyway: such a movement at times must be steeper and sometimes flatter, making the height difference negligible when it comes to half pixels (that's different in the horizontal, though, but there we have an integer number of pixels).

Moving the Feet

To some extent, the avatar's feet are the most prominent features for the intended motion: it is them who touch or leave the ground in an observable manner. If we got the feet right, the other components will fall in place practically automatically. But how do we get them right?

This subsection demonstrates a technique, how available 2-dimensional images can be transformed into the isometric system we are using.

Fig. 4: Trajectory line of ankle
(Courtesy UCLA) Fortunately, there are studies in that field. For example does an UCLA study provide a trajectory line of a foot's ankle in normal forward locomotion (fig. 4, only the trajectory line is original, although scaled down; the texts are not part of the original image).

Note, that the horizontal distance between the outermost bounds of the shown violet trajectory line amounts to approx. 0.66 m: this matches the definition of our step length (0.672 m) almost perfectly.

The trajectory line shows the movement of a human's ankle from the side. What we need is an angle of arctan(1/2)=26.565°, though: therefore we distort the image accordingly.

Furthermore we know, that a vertical (and therefore also a horizontal) pixel represents 2.5 cm, but a pixel along an edge 2.8 cm: therefore the picture in addition to above distortion needs to be foreshortened horizontally to 2.5/2.8=89%.

The resulting picture measures 112 pixels in width, but the distance between the centers of two tiles 24 pixels only. This makes it necessary to scale down the already transformed picture to 21% of that size.

Fig. 5a: Adjusted
trajectory line

Fig. 5b: Deblurred
trajectory line

Fig. 5c: Trajectory
line for both feet Fig. 5a shows the result of all these modifications.

The picture is blurry because we worked with the original picture showing a multitude of trajectory lines. It's about time to give it a clear shape now: we just use the outermost line to get our final trajectory line (fig. 5b).

So far for one foot. Alas, our avatar has two of them. Let's have a look at our standing avatar once again. It is easy to see, that the tips of the two feet are apart from each other, namely 6 pixels horizontally and 3 pixels vertically.

To add the other foot's trajectory line, we simply add a copy of it, but translated by the same offsets (fig. 5c).

Now it already can be imagined, how the future motion with respect to the feet's ankles will look like: at any given point in time, one foot's ankle is somewhere on the red line, while the other one is located somewhere on the blue line.

It is obvious, that when both feet are firmly on the ground they must reach their largest distance (because at that point, continuation of the motion results in one leg approaching the other, thus reducing the distance). However, a double step consists of two steps, and so we have two situations: one in which the rear foot (on the red line) is the foot which is ahead of the other, and one in which the opposite is true.

By the way: at first glance it might not be similarly obvious, that the horizontal width between the two tips differ in the two situations: when the red foot is ahead and the blue one behind, then the distance between the two ankles measures 30 pixels; in the opposite case this distance is just 18 pixels. Similarly, the vertical distances differ as well: 12 pixels in the former case, but 18 pixels in the latter.

Now that we already have singled one of the prominent spots (largest feet distance), let's also locate the other one: when the feet are as close together as possible when walking. This must happen somewhere in the middle of the trajectory line. However, notice, that one of the feet is on the ground, while the other one is not (obviously, as it is in the process of swinging by).

The implications are similar as with the other prominent spot: when it is the red foot which is on the ground, then the ankle of the blue foot is 6 pixels to the left of the red ankle and 3 pixels above it; in the other case the ankle of the red foot is 6 pixels to the right of the blue one and 9 pixels above it.

Now let's recall for a moment, why we preferred 8 frames over 12 frames for the intended motion (Part I, section "Frames and Animation"): we said it would be easier to locate the positions we need, because we continuously can half the involved distances.

Well, that is, what we just did a first time: we first found the extreme positions and halved the overall distance to obtain another position pair. Let's repeat this process of halving each segment two more times in order to obtain all the points at which we want to take a snapshot of our avatar's ankles.

Fig. 6: Identifying all
snapshot spots Fig. 6 shows the result of that process in a magnified picture of the trajectory lines: the interesting points are colored differently and are labeled with a digit. Notice, that identical digits belong to the same frame; e.g.: the red 1 and the blue 1 both belong to the same frame.

You may have suspected already, that the numbering sequence is not coincidental, but was given in exactly this way on purpose. Here is the reason:

Assume, that the avatar is standing still on the center of a tile. This on our trajectory lines correspond to the red 8 for the left foot and the blue 4 for the right foot.

Remember, that we defined to always start out with the right foot? This means, that from the standing position the right foot lifts off and moves forward (red 1), dragging the attached leg and body with it, but still leaving the left foot on the ground. However, the left foot now appears to be behind (blue 1), because we want our avatar's body centered. Now it should be obvious, that both "1" reflect the positions of the first frame, both "2" the second frame, etc.

You might have asked yourself already: "of what use is it to move ankles?" Well, ankles are a fix turning point, even if we don't display them explicitely, as in giving them a highlighted color or similar. To the ankles continuations in both directions (i.e. feet and legs) are attached. If we get the ankles right, we won't have much difficulty to append the feet. This is what we are going to do right now.

First of all, it is clear, that the feet protrude forward into the walking direction. However, they do not form a plane parallel to the underground (at least not most of the time). Let's examine how the angle between a foot and a flat terrain changes during locomotion:

• The heel strikes the ground, while the toes still point upwards (approx. 40°)
• While the leg moves forward, the toes touch the ground as well (0°)
• The leg still pulls forward, leaving the foot behind, which for a while still touches the ground with the whole area (0°)
• Near the rearmost point the heel lifts off (< -60°), still leaving the toes on the ground (0°)
• After lift off, during its approach of the other leg, the foot retains its angle with the leg, still pretty steep initially, but gradually flattening out
• After having swung by the other leg, the foot is almost parallel with the ground (0°), and the rotation continues until the angle is approx. 30°

Once again, we only need to care for one foot: the other one will just be a transposed copy of the first. Let's draw the 8 pictures for the soles of the right foot (displayed magnified):

Fig. 7: Eight snapshots of the sole of the right foot, shown in red

Currently it does make no sense to go any further before we discussed the legs: the outline of the foot depends from the angle the heel makes with the "attached" leg. We will complete the whole picture in the next subsection.

Moving the Legs

When discussing the movement of legs we also need to consider the upper points where the legs are attached (pelvis). In our avatar this is not just one point, but an axis at which ends the legs are attached.

When we compare the position "standing still" versus the position in which both feet support the body at the maximum distance of a step, it becomes obvious, that the axis is closer to the ground in the latter. This will result in a vertical movement of the body. The height of that movement depends on the difference of the aperture angle between the legs. This angle is 0 during midstance and largest at the time of double feet support.

However, normal human walking employs the feet as well, in that the feet's rolling motion in fact lengthens the legs (i.e. the distance between the upper axis and the ground). Because the length changes (longer at max. angle), the vertical movement of the body is not as large as it would be without such lengthening. For a detailed analysis, see the study about the vertical displacement of the body during walking by the American Academy of Orthotists and Prosthetists.

Important for a realistic representation of the movement are the observed facts of aforementioned study:

• the vertical movement depends from the walking speed: it can be as little as 3 cm (at a speed of 0.8 m/s) and as much as 8 cm in fastest speeds (2.2 m/s).
• the vertical movement of the body is about 4 to 5 cm when walking at a speed of 1.4 m/s (which is what we coincidently defined as the ideal speed for our avatar as well)

Therefore our avatar will have a moving body. In the vertical, a pixel represents 2.5 cm, and thus 5 cm translate to a vertical movement of 2 pixels, i.e., at the point at which both feet have the maximum distance, the body will be 2 pixels lower when compared to midstance (or standing still).

Fig. 8: Knee flexion and vertical displacement
(Courtesy AAOP) The same study also provides useful rotation angles for the knee's flexion during a step (fig. 8, reconstructed from a picture in aforementioned document).

It can be seen, that the stance phase (when the foot has contact with the underground) amounts to 60% of the whole cycle, whereas the swing phase is done in the remaining 40%.

Also shown in the figure is the relative vertical displacement of the body: the maximum occurs when the feet are close together.

Fig. 9: Draft of feet and legs positions in 2-D Now we know enough to put it all together and create a series of initially 8 pictures (rather than the final 16), involving both feet and legs.

Note, that once a foot has made contact with the floor, it stays on that spot until the foot is raised again. This may sound trivial, but it has implications on our design: since we partition the whole cycle of a double step into (for now) 8 pictures, we have 4 pictures per single step, in which we advance a total of 24 pixels. Within the stance phase, the foot with ground contact apparently slides backwards, and this apparent sliding must be synchronized with the apparent sliding of the landscape, i.e. must have the same speed. In other words: we need 4 sliding phases at 6 pixels each.

A single sliding phase means, that we need 2 pictures with foot contact (to represent the beginning and the ending of the sliding motion). Consequently we need 5 pictures to represent 4 sliding phases: fig. 9 shows ground contact in 5 of the 8 positions, and only 3 pictures show the foot off the ground. This is perfect, because the stance phase (with foot contact) lasts about 60%, and 5/8=62.5% is the closest we can come to that.

Also note, that there is just one brief moment between each single step at which both feet support the body (start = end position, plus the middle position): the distance between the two feet must measure 24 pixels, since that is what we move in one single step.

So far we have drafted only 8 of the 16 needed positions. The missing ones will be interpolated between each two adjacent ones, taking into consideration all of the parameters knee angle, foot angles, vertical body displacement and ankle trajectory line.

Designing the Frames

For the visualization, we use the phases identified above in section section "Biomechanics and Phases", beginning with phase 0 ("standing still"). Note, however, that the start of the motion lies in the middle of phase 1: the first two frames 1 serve to complete a previous step with the right leg. This means, that the first displayed frame must be frame number 3.

Similarly, the end of a step is possible just after the first frame of phase 1 (i.e., after frame number 1) or then after the first frame of phase 3 (i.e., after frame number 9). Both positions allow for a stop by displaying the standing still frame (phase 0) instead of frame number 2 or 10, resp.

In other words: a complete cycle runs from frame 3 to frame 16 and from frame 1 to frame 2 (a total of 16 frames), from where the next cycle repeats with frame 3; but when the avatar has to come to a halt, frame 2 is replaced with frame 0. If the avatar already must halt in the middle of the cycle, it is frame 10 which is replaced with frame 0.

The even-numbered sketches in the column labeled "Positions of body parts" are copies from fig. 9, the odd-numbered sketches are interpolations between two adjacent sketches (considering the verbose parameters next to the according sketch). (Of course, the drafts don't need to be perfect: they just serve the purpose to envisage the descriptions.)

Technique: When designing the images for the different frames, it is a very good idea to start out with the feet's soles as depicted in fig. 7. To keep track of the apparent motion, it also helps to retain the tile's edges on which the avatar "moves": they facilitate orientation. An other facilitation can be achieved if you color adjacent tiles differently.

As can be seen in the column labeled "Outline", I actually used "two sets of feet". The red pair is always parallel and reflects, where the feet would be if our avatar would simply slide over the underground. Then there in some of the images is one or two feet shown as blue lines: they are there when a foot touches the ground. Once they touched down, they need to retain their position relative to the tile, thus participating in the apparent sliding motion.

The second fix point after the feet is the body (including head). Drop it into place. Of course, the body needs to be kept at the same horizontal offset measured from the left border of the surrounding box. The vertical offset does vary slightly though (by 2 pixels), as outlined above.

Save the outline images, consisting only of the body (incl. the head) and the 2 pairs of feet positions: they will be needed again when we design walking into the opposite direction.

From the outline it's not too far to the final images: it is mainly a matter of getting the position of the knees right, observing the angle: peek at the little drafts while doing so. The legs then will fall into place practically automatically.

Phase	Frame	Displacement	Positions of body parts	Outline	Artwork
0 Standing still	0	X:0 Y:0 (Center tile 0)	Jump to frame 3 to start walking
1 Advancing right leg	1	X:45 Y:22.5 Last frame before phase 0	Left foot on ground Right foot swinging Body has normal elevation (+0.5 px)
	2	X:48 Y:24 (Center tile 2) At start and stop replace with 0	Left foot on ground Right foot swinging Right knee has max. angle Body elevation high (±0 px)
	3	X:3 Y:1.5 First frame after phase 0	Left foot on ground Right foot swinging Body has max. elevation (-0.5 px)
	4	X:6 Y:3	Left foot on ground Right foot swinging Body elevation high (±0 px)
2 Following suit left leg	5	X:9 Y:4.5	Left foot on ground Right foot swinging Body has normal elevation (+0.5 px)
	6	X:12 Y:6 (Border tiles 0/1)	Right foot touch down Both feet on ground Right knee has min. angle Body elevation low (+1 px)
	7	X:15 Y:7.5	Both feet on ground Body has min. elevation (+1.5 px)
	8	X:18 Y:9	Left toes lift off Right foot on ground Body elevation low (+1 px)
3 Advancing left leg	9	X:21 Y:10.5 Last frame before phase 0	Right foot on ground Left foot swinging Body has normal elevation (+0.5 px)
	10	X:24 Y:12 (Center tile 1) At stop replace with 0	Right foot on ground Left foot swinging Left knee has max. angle Body elevation high (±0 px)
	11	X:27 Y:13.5	Right foot on ground Left foot swinging Body has max. elevation (-0.5 px)
	12	X:30 Y:15	Right foot on ground Left foot swinging Body elevation high (±0 px)
4 Following suit right leg	13	X:33 Y:16.5	Right foot on ground Left foot swinging Body has normal elevation (+0.5 px)
	14	X:36 Y:18 (Border tiles 1/2)	Left foot touch down Both feet on ground Left knee has min. angle Body elevation low (+1 px)
	15	X:39 Y:19.5	Both feet on ground Body has min. elevation (+1.5 px)
	16	X:42 Y:21	Right toes lift off Left foot on ground Body elevation low (+1 px)

Following are some animated GIFs, composed from above artwork, still without any corrections (which demonstrates that the technique will do acceptably if it is followed step by step).

Note: Certainly, Pixie might need some corrections here and there: she walks quite "rural". (Probably the knees are lifted a tad too high, and the feet could approach ground more smoothly.) – On the other side, the intended 5 km/h is a quite fast walking speed, close to marching, actually. Well, you have the technique: correct whatever you need to. If you manage a more fluent design, let me know.

If you do not have a tool to create animated GIFs and if you run Windows, I can recommend UnFREEz (courtesy WhitSoft Developments): it is a simple and very lean tool, and it's s even freeware.

By the way: to convert your BMP images into GIF images under Windows, just drag the bmp file into Microsoft Photo Editor and save as a GIF file. (Don't use Microsoft Paint for this task: the quality may suffer unacceptably.)

Motion	Details	Anigif
Continuous Walking	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)
Stop and go double step	16 × frame 0 Frames 3-16 and 1 (not 2) All with 60 ms/frame (16.67 Hz)
Stop and go single step	16 × frame 0 Frames 3-9 All with 60 ms/frame (16.67 Hz)
Continuous Walking (slow motion for control)	Frames 3-16 and 1-2 All with 250 ms/frame (4 Hz)

Mirroring Periodic Wave Motions

As pointed out already, asymmetric motions can not be mirrored directly. Well, they can, of course, but in the case of our walking avatar, locomotion would start out with the left leg rather than with the right leg.

However, with that particular motion we are somewhat lucky, as it does not really consist of an asymmetric motion, but of two sub-series involving 8 pictures for the right leg and 8 pictures for the left leg. We can look at the whole motion as being a periodic wave: at a phase angle of 0° we have the animations as created above, and at a such of 180° we achieve the desired start with the right leg even for mirrored frames.

The following table lists the frame numbers of the mirrored images and associates them with the unmirrored frame numbers, pointing out the last frame before a possible stop and the first frame starting the motion:

Unmirrored	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16
Mirrored	9	10	11	12	13	14	15	16	1	2	3	4	5	6	7	8

These are the according animations:

Motion	Details	Anigif
Continuous Walking	Frames 11-16 and 1-10 All with 60 ms/frame (16.67 Hz)
Stop and go double step	16 × frame 0 Frames 11-16 and 1-9 (not 10) All with 60 ms/frame (16.67 Hz)
Stop and go single step	16 × frame 0 Frames 11-16 and 1 All with 60 ms/frame (16.67 Hz)

Opposite Orientation Frames

The first of the two missing orientations (towards the NW and NE) can not be mirrored: we actually need to design 16 new frames. However, we can make use of the already drafted feet positions (column "Outline" in the large table of above section "Designing the Frames").

We just need to replace the body/head component with its corresponding view from behind and re-arrange the frame numbers such, that the right leg apparently starts out moving towards the NW rather than to the SE. Note that we basically just play the sequence in backward order: previously, for the motion into the SE direction, we started out with frame 3. Three frames later the swinging right leg touches ground again. The same is true for a movement into the NW direction, only that we need to start out with frame 9: three tiles later (i.e., frame 6, since we play the sequence backward), the right foot touches down as well.

It is easiest to copy aforementioned table and adjust it where it is needed. In the new table, let's retain the same frame numbering as above: doing so allows us to keep the descriptions in the column "Positions of body parts" unchanged. (However, the accompanying draft of the legs positions should be mirrored to better reflect the new walking direction towards the NW.) It also allows us keep the pointed out start and stop frames without any changes.

The coordinates given in the column "Displacement" need to change, though, since now we move the avatar to the left rather than to the right, and upward rather than downward. The absolute distances per frame won't change, though. This means, that we just need to change the sign of both coordinates.

Like before, we start with the outline images. Note, that the avatar is shown from behind this time, and that the legs are swapped (in the SE direction the right leg was the one closer to us, now in the NW orientation it is the one farther away). For this reason, we start with what was frame 10 before (replacing former frame 2) and work our way backwards towards frame 1, then resuming with frame 16 to frame 11: this gives us the proper foot positions.

Be careful, though, it is not a 1:1 transition, as the frames in which the feet have ground contact are slightly different (e.g.: formerly, 5 frames after frame 2, i.e. frame 7, still shows ground contact for the left foot; now, 5 frames "after" frame 10, i.e. frame 5, shows the left foot already lift off).

Phase	Frame	Displacement	Positions of body parts	Outline	Artwork
0 Standing still	0	X:0 Y:0 (Center tile 0)	Jump to frame 3 to start walking
1 Advancing right leg	1	X:-45 Y:-22.5 Last frame before phase 0	Left foot on ground Right foot swinging Body has normal elevation (+0.5 px)
	2	X:-48 Y:-24 (Center tile 2) At start and stop replace with 0	Left foot on ground Right foot swinging Right knee has max. angle Body elevation high (±0 px)
	3	X:-3 Y:-1.5 First frame after phase 0	Left foot on ground Right foot swinging Body has max. elevation (-0.5 px)
	4	X:-6 Y:-3	Left foot on ground Right foot swinging Body elevation high (±0 px)
2 Following suit left leg	5	X:-9 Y:-4.5	Left foot on ground Right foot swinging Body has normal elevation (+0.5 px)
	6	X:-12 Y:-6 (Border tiles 0/1)	Right foot touch down Both feet on ground Right knee has min. angle Body elevation low (+1 px)
	7	X:-15 Y:-7.5	Both feet on ground Body has min. elevation (+1.5 px)
	8	X:-18 Y:-9	Left toes lift off Right foot on ground Body elevation low (+1 px)
3 Advancing left leg	9	X:-21 Y:-10.5 Last frame before phase 0	Right foot on ground Left foot swinging Body has normal elevation (+0.5 px)
	10	X:-24 Y:-12 (Center tile 1) At stop replace with 0	Right foot on ground Left foot swinging Left knee has max. angle Body elevation high (±0 px)
	11	X:-27 Y:-13.5	Right foot on ground Left foot swinging Body has max. elevation (-0.5 px)
	12	X:-30 Y:-15	Right foot on ground Left foot swinging Body elevation high (±0 px)
4 Following suit right leg	13	X:-33 Y:-16.5	Right foot on ground Left foot swinging Body has normal elevation (+0.5 px)
	14	X:-36 Y:-18 (Border tiles 1/2)	Left foot touch down Both feet on ground Left knee has min. angle Body elevation low (+1 px)
	15	X:-39 Y:-19.5	Both feet on ground Body has min. elevation (+1.5 px)
	16	X:-42 Y:-21	Right toes lift off Left foot on ground Body elevation low (+1 px)

Eventually also the animated GIFs as per the technique described earlier.

Motion	Details	Anigif
Continuous Walking	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)
Stop and go double step	16 × frame 0 Frames 3-16 and 1 (not 2) All with 60 ms/frame (16.67 Hz)
Stop and go single step	16 × frame 0 Frames 3-9 All with 60 ms/frame (16.67 Hz)
Continuous Walking (slow motion for control)	Frames 3-16 and 1-2 All with 250 ms/frame (4 Hz)

And the animated gifs after mirroring and shifting the phase, as explained above in Southward motion.

Motion	Details	Anigif
Continuous Walking	Frames 11-16 and 1-10 All with 60 ms/frame (16.67 Hz)
Stop and go double step	16 × frame 0 Frames 11-16 and 1-9 (not 10) All with 60 ms/frame (16.67 Hz)
Stop and go single step	16 × frame 0 Frames 11-16 and 1 All with 60 ms/frame (16.67 Hz)

---

Outlook

Part III (Designing Arms) of this article will complete the walking avatar, while part IV will take care of garment.

---