Example with an algebraic formula-driven animation

Here you see an bitmapped animation object, driven in two directions by two formula's. Each part of a second the processor is free for other tasks. This is done by 'setTimeout'.

<CENTER>
<APPLET
 code="Animatie.class"
 name=A1
 width=200
 height=200>
</APPLET>

<FORM name="F1">
<input type="button" name="R" value="Run" onClick="run(this.form)">
<input type="button" name="S" value="Set" onClick="set(this.form)">
</FORM>
</CENTER>

...

<SCRIPT>
function set()
{
 t = 0.0; 
 dt = 0.03;
 v0 = 10.0;
 h0 = 2.0;  
 g = 9.8;
 a = 5.0;
 b = 10.0;
 c = -30.0;
 d = 150.0;
 xx = 0.0;
 yy = h0;
 i = a*xx + b;  
 j = c*yy + d;
 document.A1.setX(Math.round(i));
 document.A1.setY(Math.round(j));
}

function run()
{
   t = t + dt; 

   xx = v0*t*Math.cos(2*3.14/8);
   yy = v0*t*Math.sin(2*3.14/8) + h0 - g*t*t/2;

   i = a*xx + b;  <--- transformation of the coordinates 
   j = c*yy + d;

   document.A1.setX(Math.round(i));
   document.A1.setY(Math.round(j));
   if (j<180) {window.setTimeout("run();",50)};
}
</SCRIPT>

So: use always 'setTimeout()' for your animations. Otherwise you or your computer can't interrupt or handle correctly all his processes.

Enschede, 18 januari 1999; updated febr. 2004.