Arms
Properties
In our context, the motion of the arms is more complex than that of the legs. This is because we have to keep them in sync we the legs.
We distinguish 3 parts: the Humerus (upper arm), the forearm and the hand, all of these included in a single component (although the hand won't play a big role in our designs due to the avatar's small size). The shoulders, where our arms will be attached to the torso, are already part of the avatar's torso, so we can omit that part and concentrate on the rest. However, we should pay some attention to have a well-rounded connection at the shoulder.
The single most important feature of the arm is its length in proportion to the whole avatar. A simple non-scientific observation tells, that an arm loosely hanging from the shoulder will lead to the tips of the hand roughly at the middle of the hip. Another observation makes it apparent, that the Humerus and the forearm approximately are of the same length. Also, the total arm length is approximately 70% of the leg length.
Analyzing the Motion
Humerus and forearm swing while walking, and the hand is more or less just an extension of the forearm. Each part is attached at a joint (shoulder, elbow, wrist). Whereas shoulder and wrist allow some freedom in rotating the components negatively or positively, the elbow is restricted in its movement into a positive (forward) rotation only (at least when we only consider the swinging movement in walking direction, such neglecting sideward motion, which in reality does occur as well).
Humerus and thigh (i.e. the upper part of the leg) on opposite sides interact with each other: while the thigh swings forward, the Humerus on the opposite side swings backward (although at a smaller angle), and vice-versa. (For biomechanic details, see the article
"Biomimetic robotics" in the Journal of Anatomy, esp.
fig. 2 to 4.)
Fig. 14: Swinging arm.
Left: a is ±15° and b 60°
at its maximum. Right:
Interpolation for 8 frames.
During the Humerus' backward swing, the forearm appears to be a straight extension of it, but during a forward string, the forearm begins to make an angle at the elbow with a maximum when the toes of the foremost foot touch the ground.
The Humerus swings with an angle of approx. ±15° from the vertical, while during forward swings the forearm makes an angle between the elbow and the vertical of approx. 60° at its maximum (fig. 14 left). The angle grows linearly in between, so that it is trivial to interpolate from frame to frame (fig. 14 right).
In the figure, the angle is incremented by 15° between each frame, representing a position each. Since a whole gait cycle consists of 16 frames, it could seem that we'd actually needed 16 different images with 7.5° steps in between, but that would be wrong: an arm's position 16 frames later must have completed a whole cycle, which consists of a forward and a backward swing, each direction requiring 8 frames. This means, that different to the design of legs we can re-use a once drawn arm position again and insert it into the appropriate frame for the other direction. (This was not possible for the legs, because there we had a stance and a support phase, i.e. the two half phases differed.)
Planning the Frames
Fig. 15: Trivial graphic manipulation to
obtain joints and end points.
For the actual design, it is easiest to draw a schematic draft as before in fig. 14, only that this time we use the appropriate arm length. To determine the length, we don't count the upper part of the shoulder (which is included in the design of the trunk anyway), but start out at an assumed hinge 2 pixels below our draft. From there to the tip of the hand we have 26 pixels
(see 
Components of Isometric Avatars, section "Decomposing the Parts").
Calculating the 8 elbow joints and end positions as per fig. 14 leaves us with fig. 15 (a). We immediately remove the disturbing black lines and only keep the shoulder hinge and the 2 × 8 points on the two curves (b).
Then we use the same technique as applied previously in
Part II, subsection "Moving the Feet" to bring our figure into the required isometric aspect, i.e., scaling down horizontally to 89% (c) and stretching 27° (d). Note, that all these operations can easily be done even with the most basic graphic manipulation tools, such as Microsoft Paint.
A horizontal mirror of (c) starts a second image manipulation chain (i to n) for the two upward orientations, i.e. NW and NE.
As our avatar has two arms and moves them equally (although 180° out of phase), we can save ourselves a lot of time by including the 17 relevant pixels for the other arm as well. Since the angles do not change when doing so, we can use a copy and translate it some pixels. How many exactly? Looking at the avatar and measuring the distance between the inner boundary of the shoulders tells us, that they are 10 horizontal and 5 vertical pixels apart (it is important to maintain the 2:1 ratio: otherwise the positions of the arms will look wrong in the end). It is a good idea to color the points for the two arms differently. The result (e) consists of 34 position points.
Now it's time to copy all these position points onto our avatar (f). When doing so, it is again a good idea to grey out the avatar: such we can quickly remove its contour lines later on. The overlay returns some feedback by providing a vague idea of how the arms will move. However, this is not the only reason for this step: later on we will need to apply individual pixel pairs onto the frames of the moving avatar. To be able to quickly locate these positions without the tedious and error-prone task of counting (recall that also the body itself moves vertically), we will need a reference point. A such we have: the head itself remains the same in all frames which we designed above. Therefore we remove all the points which do not belong to the head, of course keeping our joint and end points (g).
Horizontally mirroring (g) returns one of the other orientations (h). However, it's shown here for completeness only: it is easier to just mirror the final 16 frames in the end.
Fig. 16: Position of
swinging arms, SE
and NW orientation
Let's do a rudimentary check and create two animated GIFs. For this we connect the 3 end points of each frame with 2 lines each and play them in sequence, at the by now familiar 16.67 Hz (fig. 16).
Well, this was it for the fun part: we are ready for some real work now.
By the way, I don't want to disappoint any artist out there, but the presented technique once again does not leave much room for creativity. Apologies.
Designing the Frames
The following table shows the frames for Pixie's arms. As a basis, it is best to use the previous frames set including the legs for your design, in order to obtain some feedback "if it looks right". Because the legs and arms overlap in some frames, I greyed out the now unrelated legs, i.e. all the avatars' contour lines: this facilitates later extraction of the arms once they are designed (after all, in the end we only need the individual components, not the whole picture).
The first step is to copy the relevant shoulder/elbow/fingertips-triplets (note the plural: we have 2 arms × 3 points = 6 colored pixels) over each frame. This is the basis for the second step: the actual design. Note, that many position pixels of the rear arm will be hidden by the body: such parts of course require a reduced design only, or none at all.
Before actually designing the arms, recall that we defined the colored pixels to represent joints and end points at the inner side of the arm, i.e. close to the avatar's body: thickness must be added towards the outer side, i.e. away from the body. As two points can be connected only by a single line, there is a certain freedom when "adding flesh to the bones". However, it is important to stay as consistent as possible with the thickness of the arms.
Important: Remember to save the two arms as two separate components, one for each arm. They are in two different layers and must be rendered at very different points in the rendering sequence. If you save both arms as one component, there will be many flaws and wrong renderings when garment is added.
In the table, the last frame before a possible stop and the first frame starting the motion are accordingly colored in the field with the frame numbers. Of course, the positions where we could have stopped (i.e. frames 2 and 10) both are the neutral point, i.e. the arms are hanging apparently loose as in frame 0, even though they represent the middle of the swinging motion. This makes frames 6 and 14 the two positions, at which the arms reach out the most (right arm backwards in frame 6, forward in frame 14, and vice-versa).
| Orientation SE |
Frame |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
| Positions |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Artwork |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Frame |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
| Positions |
 |
 |
 |
 |
 |
 |
 |
 |
| Artwork |
 |
 |
 |
 |
 |
 |
 |
 |
| Orientation NW |
Frame |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
| Positions |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Artwork |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Frame |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
| Positions |
 |
 |
 |
 |
 |
 |
 |
 |
| Artwork |
 |
 |
 |
 |
 |
 |
 |
 |
This is how the frames look like when animated:
| Motion |
Details |
SE |
NW |
| Continuous Walking |
Frames 3-16 and 1-2
All with 60 ms/frame
(16.67 Hz)
|
|
|
The mirrors for the NE and SW orientations follow the same technique applied when we designed the legs. Don't forget to consider the phase shift, so that the avatar actually starts to walk with the right leg.
| Motion |
Details |
SW |
NE |
| Continuous Walking |
Frames 11-16 and 1-10
All with 60 ms/frame
(16.67 Hz)
|
|
|
Outlook
With this part the design of the actual avatar ends.
The final Part IV (Designing Garment) provides some additional considerations in designing garment and presents the final animated GIFs.