<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE page SYSTEM "gen/gandraxa.dtd">
<?xml-stylesheet type="text/xsl" href="gen/gandraxa.xsl"?>
<!--
	To see this page properly, install a browser capable of
	interpreting XML/XSL, for example a recent version of:
	- Mozilla Firefox, see http://www.mozilla.com/
	- Google Chrome, see www.google.com/
	- Internet Explorer, see http://www.microsoft.com/
-->
<page>
	<head>
		<title>Walking Isometric Avatars (I)</title>
		<url>http://herbert.gandraxa.com/walking_isometric_avatars_part_1.xml</url>
		<context>
			<path>
				<home>
					<link loc="int">
						<url>home.xml</url>
						<text>Home</text>
					</link>
				</home>
				<dir>
					<link loc="int">
						<url>articles.xml</url>
						<text>Articles</text>
					</link>
				</dir>
				<dir>
					<link loc="int">
						<url>designing_isometric_avatars.xml</url>
						<text>Designing Isometric Avatars</text>
					</link>
				</dir>
				<doc>Walking Isometric Avatars (I)</doc>
			</path>

			<chain>
				<prev>
					<link loc="left">
						<url>components_of_isometric_avatars.xml</url>
						<text>Components of Isometric Avatars</text>
					</link>
				</prev>
				<next>
					<link loc="right">
						<url>walking_isometric_avatars_part_2.xml</url>
						<text>Walking Isometric Avatars (II)</text>
					</link>
				</next>
			</chain>
		</context>
		
		<author>
			<mail>
				<recipient>hg</recipient>
				<server>gandraxa.com</server>
				<name>Herbert Glarner</name>
			</mail>
		</author>
		
		<publ>
			<event>
				<eventdate><y>2007</y><m>Apr</m><d>20</d></eventdate>
				<eventtext>Original HTML version</eventtext>
			</event>
			<event>
				<eventdate><y>2011</y><m>Feb</m><d>05</d></eventdate>
				<eventtext>
					Recoded in XLM
				</eventtext>
			</event>
		</publ>
		
	</head>

	<toc>
		<toc1 ref="A">Motion Parameters</toc1>
			<toc2 ref="A1">Motion and Relativity</toc2>
			<toc2 ref="A2">Scrolling the Landscape</toc2>
			<toc2 ref="A3">Biomechanics and Phases</toc2>
			<toc2 ref="A4">Distance, Time and Speed</toc2>
			<toc2 ref="A5">Frames and Animation</toc2>
			<toc2 ref="A6">Summary</toc2>
	</toc>

	<abstract>
	    <p><ptitle>Abstract</ptitle>
	    	This first part of this subseries introduces the theoretical background 
	    	to design animated frames. It explains, how one determines the required 
	    	number of frames and how long each has to be displayed in order to achieve 
	    	the impression of a fluent motion.</p>
	</abstract>



	<part>
		<heading id="A">Motion Parameters</heading>
		<chapter>
			<heading id="A1">Motion and Relativity</heading>
			<body>
				<p>Motion is relative. Consider the following scenarios:</p>
				<list>
					<li>An avatar turns up in some corner of the screen and walks 
						along a diagonal across the screen: the landscape does not change 
						due to that motion (apart from the small parts alternately 
						being obscured and re-exposed by the avatar's shape).</li>
					<li>An avatar which represents the observer in front of the screen 
						walks over a landscape: in this case you don't expect the avatar 
						to move out of the screen's center (the focus), instead, 
						you expect the landscape to scroll below the avatar, 
						keeping the avatar centered and exposing new parts of the landscape 
						as long as the movement continues.</li>
					<li>And then there is a combination of the two previous cases: 
						while "your" (centered) avatar walks, causing the landscape to scroll, 
						there may be other avatars moving over the landscape, 
						seemingly at a higher speed if they approach from the opposite direction, 
						or seemingly at no different speed than your own avatar, 
						if they walk alongside your avatar (at the same speed).</li>
				</list>
				<p>In this article we concentrate on the second case. 
					We assume, that an avatar is to represent you, the reader sitting 
					in front of your screen. This avatar will not change its position: 
					it will remain centered at a particular spot. 
					The notion of motion will be achieved</p>
				<list>
					<li>by scrolling a rudimentary landscape below the avatar, and</li>
					<li>by modifying the appropriate components of your avatar.</li>
				</list>
			</body>
		</chapter>
		<chapter>
			<heading id="A2">Scrolling the Landscape</heading>
			<body>
				<p>In the previous articles of this series our avatars stood on a single tile 
					within an imagined landscape. Because the avatar was static and thus immobile 
					this was working well, but now we are going to move the avatar and need 
					some more space.</p>
				<img float="left" width="210">
					<url>img/wia_fig01.jpg</url>
					<alt>Creating the illusion of movement</alt>
					<caption>Fig. 1: Creating the illusion of movement</caption>
				</img>
				<p>As the avatar walks, the tile it stands on will be scrolled away into 
					the opposite walking direction ("behind" the avatar), 
					and simultaneously a new tile will appear from the direction into which 
					it walks ("in front" of the avatar).</p>
				<p>Such, the avatar's imaginary point of gravity at any given time 
					is above just one specific tile, although its body 
					(depending on the avatar body's overall screen width) 
					can involve several tiles.</p>
				<p>In order to discuss the needed tasks, our landscape needs to be expanded 
					to a total of 3 tiles, neatly lined up one after each other: 
					a "central" tile and one tile each behind and in front of the avatar.</p>
				<p>Inevitably some questions arise: what does "moving the landscape" mean? 
					How much do we need to move it, how many times? 
					In what overall time? And what does movement mean for the avatar? 
					These questions and more are answered in the next sections. 
					We begin with answering the question "what exactly is a step?"</p>
			</body>
		</chapter>
		<chapter>
			<heading id="A3">Biomechanics and Phases</heading>
			<body>
				<p>When walking, humans follow a technique called the 
					<link loc="wiki">
						<url>http://en.wikipedia.org/wiki/Double_pendulum</url>
						<text>double pendulum</text>
					</link>: one leg is raised from the surface and swings forward, 
					until the heel eventually touches the surface in some distance 
					from the origin. The leg then rolls through until it reaches the toe, 
					at which point the process is repeated for the other leg.</p>
				<p>Notice, that during such a motion one leg always is in touch 
					with the ground (this is different when running, which is why 
					we can not just make the avatar "walk faster" to have it running).</p>
				<p>Now let's assume, that our avatar already is in the process of walking, 
					i.e. it is not standing still. What would make up a repeatable motion? 
					It obviously is not a single step, which would involve the movement 
					of just one leg: we must consider the movement of both legs, 
					until they are in the same position again with which we started out. 
					From there we can repeat that motion over and over again to create 
					the illusion of continuous locomotion.</p>
				<p>So we need to examine a "double step" rather than just a single step. 
					But what does this mean in terms of effective distances? 
					How many pixels does such a double step span?</p>
				<p>Let's look at an individual tile again: in article 
					<link loc="int">
						<url>introduction_to_isometric_avatars.aspx#B2</url>
						<text>Introduction to Isometric Avatars</text>
					</link>, section "Dimensions and Measurements" 
					we already anticipated motion and <em>defined</em> the length 
					of a tile's edge (the diagonal of a bounding rectangle 
					with dimensions 24 &#215; 12 pixels) to represent a single step length 
					(or, in absolute terms, exactly 67.2 cm).</p>
				<img float="left" width="135">
					<url>img/wia_fig02.jpg</url>
					<alt>Double step spanning two tiles</alt>
					<caption>Fig. 2: Double step spanning two tiles</caption>
				</img>
				<p>Therefore, the answer seems to be obvious: the motion we need to examine 
					spans exactly two tiles, one tile for each leg's step.</p>
				<p>However, there's a caveat. Should we indeed plan our design based 
					on above observation alone, we would needlessly restrict ourselves too much: 
					we could start and stop such a motion only on every second tile. 
					The complication arises because our inital assumption started out with an 
					<em>already walking</em> avatar, and we implied the avatar is to walk forever. 
					Of course, such needs not necessarily to be the case: 
					at some point the avatar <em>starts</em> to walk, and at some point 
					it <em>ends</em> its motion. Let's have a closer look at these two events.</p>
				<p>At first glance, the transition from standing still to walking could imply, 
					that we just need to start out from a double step's middle point. 
					However, this would be wrong: having the legs above the same spot in the 
					<code>x/z</code> plane does not imply, that the avatar does look the same. 
					During locomotion, one of the legs does not touch the ground 
					but is in the process of swinging by the other leg. 
					Similarly, stopping a walk calls for a motion which ends in both legs 
					touching the ground next to each other.</p>
				<p><em>Starting</em> the locomotion in some aspect is easier than stopping it: 
					we can freely decide with which leg we want to start out the locomotion: 
					it does not really matter, if that's the right or the left one. 
					Note, however, that this decision is asymmetric: if you for some reason 
					want or need to start out always with the same leg, then you can not mirror 
					two of the avatar's orientations to obtain the other two orientations.</p>
				<p><em>Ending</em> the motion, on the other hand, needs two individual transitions
					in any case: whatever leg happens to be the one behind the avatar's mass center 
					needs to come to a halt by moving it next to the other leg.</p>
				<p>The good news is, that we can handle the transitions without additional work, 
					if we just plan the motions carefully enough.</p>

				<p>Let's sum up the identified phases:</p>
				<table>
					<row>
						<col>Phase</col>
						<col>Name</col>
						<col>Activity at phase start</col>
						<col>Activity at phase end</col>
						<col>Possible continuation at phase end</col>
					</row>
					<row>
						<col>0</col>
						<col>Standing still</col>
						<col>Standing still</col>
						<col>Standing still</col>
						<col>0 or 1</col>
					</row>
					<row>
						<col>1</col>
						<col>Advancing right leg</col>
						<col>Feet close together while doing right foot step 
							(also first step after standing still)</col>
						<col>End position right foot step = 
							before start position left foot step</col>
						<col>2</col>
					</row>
					<row>
						<col>2</col>
						<col>Following suit left leg</col>
						<col>Start position left foot step</col>
						<col>Before feet close while doing left foot step 
							(near tile's center)</col>
						<col>3 or 0</col>
					</row>
					<row>
						<col>3</col>
						<col>Advancing left leg</col>
						<col>Feet close together while doing right foot step</col>
						<col>End position left foot step = 
							before start position right foot step</col>
						<col>4</col>
					</row>
					<row>
						<col>4</col>
						<col>Following suit right leg</col>
						<col>Start position right foot step</col>
						<col>Before feet close while doing right foot step 
							(near tile's center)</col>
						<col>1 or 0</col>
					</row>
				</table>
			</body>
		</chapter>
		<chapter>
			<heading id="A4">Distance, Time and Speed</heading>
			<body>
				<p>Now that we know more about what phases we need, let's talk about 
					how the individual phases shall be displayed to obtain 
					the illusion of motion.</p>
				<p>First of all, we need to clarify what real environment facts 
					we want to simulate with such a motion. Most notably, walking means 
					to relocate an object (our avatar) from one place to an other 
					in a given amount of time. The involved physical properties thus are 
					<em>distance</em> and <em>time</em>, or, more precisely, 
					distance <em>per</em> time. In other words: <em>speed</em>.</p>
				<p>Physically, we measure speed in meters per second (m/s). 
					One of the two units is already known: we know, that the distance 
					between two adjacent tiles represents 67.2 cm (or 0.672 m). 
					What we need to find out, is the time needed to cover that distance. 
					For this we need to research a human's average walking speed.</p>
				<p>Alas, there is no such thing like a standardized walking speed for humans: 
					the individual speed depends on many circumstances, such as body weight, 
					height, age, cultural environment and last, but not least, 
					simply on the motivation for the walk. The literature gives 
					varying indications in the range of usually between 1 and 1.3 m/s. 
					However, it can be found empirically, that a walking speed of around 
					3 km/h (<formula>3,000 m/3,600 s = 0.83 m/s</formula>) is perceived as very slow by most people 
					(close to strolling), whereas 
					6 km/h (<formula>6,000 m/3,600 s = 1.67 m/s</formula>) is mainly regarded 
					as quite fast walking (as in military marching). For our purposes, 
					let's start out with the given range of 
					4.5±1.5 km/h (1.25±0.42 m/s) and see, if we can find a speed 
					suitable enough to create the illusion of motion.</p>
				<p>At 1.25±0.42 m/s we cover 1m in 0.9±0.3s, and a tile 
					measuring 0.672m in 0.6±0.2s.</p>
			</body>
		</chapter>
		<chapter>
			<heading id="A5">Frames and Animation</heading>
			<body>
				<p>We know the physical constraints by now, but this does not tell us 
					anything yet about the process of animating a motion. 
					To do so, we need to discuss animation first.</p>
				<p>An animation in the end is nothing else than an optical illusion 
					due to the persistence of our eyes: show pictures fast enough 
					and you will perceive the individual pictures as a continuous movement. 
					Such an individual picture is called a 
					<link loc="wiki">
						<url>http://en.wikipedia.org/wiki/Film_frame</url>
						<text>frame</text>
					</link> and the number of pictures displayed in any second is known as the 
					<link loc="wiki">
						<url>http://en.wikipedia.org/wiki/Frame_rate</url>
						<text>frame rate</text>
					</link> (expressed in <em>Hertz</em>, abbreviated with Hz, standing for 
					the number of events per second).</p>
				<p>If we'd strive for a perfect quality, the frame rate would need 
					to be very high, because below a certain threshold the sequence 
					of pictures may be perceived as flickering. 
					This threshold depends from many variables, including the observer's fatigue, 
					but in general it is assumed to be around 75 Hz. 
					However, for the purpose of simulating motion the threshold is 
					significantly lower and usually taken to be approximately 16 Hz
					<note ref="1">
						<p>(TV cameras usually operate with 24, 25 or 30 Hz, 
						depending on the used system.)</p>
					</note>: 
					this is the value which we want to come close to.</p>
				<p>Now let's see, how we can transform our avatar's locomotion into frames, 
					i.e. to take a series of snapshots of the particular movement. 
					Of course, it is of a big advantage, if we can split our tile 
					into equal portions: such we can guarantee that equal durations 
					are needed for the same distance. It is exactly for this reason 
					that we defined our tiles to have an edge length of 24 pixels: 
					24 is divisible by 2, 3, 4, 6, 8 and 12, such giving us several choices 
					to select from. The subdivision should not consist of a very small number 
					of individual frames, since this would appear pretty bulky. 
					Thus, subdividing the tiles into 2, 3 or even 4 parts only belongs not 
					to the best of all choices. Obviously, 12 or even 24 would be the best choices, 
					but recall, that this comes at a price: we would need to draw 
					12 or 24 pictures per tile, i.e. 24 or 48 pictures for a double step. 
					But, is this needed? Let's see.</p>
				<p>We want to catch a motion spanning a double step, 
					which equals a distance of <formula>2 &#215; 0.672 m = 1.344 m</formula>. 
					Our avatar shall move with a speed of 0.6±0.2s per tile. 
					Therefore we have <formula>2 &#215; 0.6±0.2s = 1.2±0.4s</formula> of time 
					for the whole motion. Let's check what subdivisions yield what frame rates:</p>
				<table>
					<row>
						<col>Subdivision of tile</col>
						<col>Pictures/tile</col>
						<col>Time per picture</col>
						<col>Frame rate<br/>fast...slow (normal)</col>
					</row>
					<row>
						<col>1/6 (every 4th horiz. pixel)</col>
						<col>6</col>
						<col>0.6±0.2s / 6 = 0.1±0.033s</col>
						<col>15...7.5 (10) Hz</col>
					</row>
					<row>
						<col>1/8 (every 3rd horiz. pixel)</col>
						<col>8</col>
						<col>0.6±0.2s / 8 = 0.075±0.025s</col>
						<col>20...10 (13.33) Hz</col>
					</row>
					<row>
						<col>1/12 (every 2nd horiz. pixel)</col>
						<col>12</col>
						<col>0.6±0.2s / 12 = 0.05±0.017s</col>
						<col>30...15 (20) Hz</col>
					</row>
					<row>
						<col>1/24 (every horiz. pixel)</col>
						<col>24</col>
						<col>0.6±0.2s / 24 = 0.025±0.008s</col>
						<col>60...30 (40) Hz</col>
					</row>
				</table>
				<p>As outlined above, our goal is to achieve approx. 16 Hz. 
					A subdivision of the tile into segments of 1/24 thus is over-engineering, 
					a such of 1/6 definitely not good enough. 
					Remains the choice between 1/12 (12 pictures per tile or 24 for a double step) 
					and 1/8 (8 pictures per tile or 16 for a double step).</p>
				<p>Whereas 1/12 is acceptable in the whole speed range, 1/8 is acceptable 
					only if we don't use the slow end within the given range. 
					For example would a speed of 
					<formula>5 km/h = 5,000 m/3,600 s = 1.39 m/s = 0.72 s/m = 0.484 s/tile</formula>
					yield a frame rate of 
					<formula>0.484 s/tile = 0.0605 s/8th tile = 16.53 Hz</formula>. 
					This value is absolutely acceptable and can be achieved when we have 
					the avatar walk at a perceived speed of 5 km/h (i.e., displaying 
					each frame for 60.5 ms).</p>
				<p>Preferring 1/8 over 1/12 has an additional advantage over the obvious one 
					(which is less pictures and thus less work): because 8 is a power of 2, 
					we can easily separate the motion between any two tiles into 2 halves, 
					which we both separate again into 2 halves, repeating this process again 
					with the 4 resulting quarters. You will see, that halving will help us 
					tremendously in finding the correct positions in our designs.</p>
			</body>
		</chapter>
		<chapter>
			<heading id="A6">Summary</heading>
			<body>
				<p>The previous subsections discussed, how we can find the number of pictures 
					into which we need to partition an arbitrary motion, and for how long 
					we need to show each such picture in order to ensure a fluent motion, 
					while at the same time we attempt to avoid over-engineering.</p>
				<p>These numbers ultimately depend on the intended (perceived) speed 
					of the object and the desired animation quality. 
					For the task at hand the requirements were:</p>
				<list>
					<li>We want a frame rate of at least 16 Hz.</li>
					<li>We want a perceived walking speed of about 5 km/h (1.39 m/s).</li>
				</list>
				<p>Above requirements lead to the following consequences:</p>
				<list>
					<li>We represent the avatar's locomotion with 8 pictures per tile 
						(with a total of 16 pictures for a double step).</li>
					<li>We display each picture for a duration of 0.06 seconds.</li>
				</list>
			</body>
		</chapter>
	</part>

</page>

