Voorbeeld / oefening met een formula-driven animatie

Tip: De applet-code bevindt zich in een file met de naam 'Animatie.class' en het object is een plaatje met de file-naam 'front.gif'. De background dient de naam 'back.gif' te hebben. De slider bevindt zich in de applet 'slider.class'.

Tip: Deze interactieve animatie is goed als sjabloon voor een eigen interactieve formula-driven animatie te gebruiken. Je kunt de telletjes bijvoorbeeld weglaten.

Een oplossing is:

<SCRIPT language="javascript">
t=0.0;

function infoFromJava_Slider(slidernaam,waarde)
{
 document.waarde.veld1.value = waarde;
}

function reStart()
{
 dt=0.003;
 k=0.0;
 y=10.0;
	
 document.slider1.setPMax(0.5);
 document.slider1.setPMin(0.0);
 document.slider1.setPStart(0);
 document.slider1.setDigits(1);

 document.vogel1.setX(Math.round(0));
 document.vogel1.setY(Math.round(20));
}

function run()
{
  iii=document.waarde.veld1.value;
  k=parseFloat(iii);

  t=t+dt;
  dydt=-k*y
  y=y+dydt;

  document.tellerY.setValue (Math.round(y*100));
  document.tellerT.setValue (Math.round(t*100));
 	
  document.vogel1.setX(Math.round(0));
  document.vogel1.setY(Math.round(300 - 28*y));

  window.setTimeout("run()",50)
}
</SCRIPT>
...
<APPLET
  code=Animatie
  name=vogel1
  width=225
  height=300>
</APPLET>

<FORM name="iets"> 
<INPUT type="button" value="Start" onClick="run()"> en doe daarna de kraan open

<INPUT type="button" value="Vul" onClick="reStart()"> en zet kraan open
</FORM>

<FORM name="waarde">
<APPLET
    code=slider.class
    NAME=slider1
    width=200
    height=16 MAYSCRIPT>
</APPLET> 
<INPUT TYPE="text" NAME="veld1" VALUE="50" SIZE="10">

(Als je de kraan op tijd dicht zet stopt de animatie.)
</FORM>

U ziet het resultaat: een waterbak met een kraantje. Het kraantje kan open worden gezet.

Merk op dat het animatie-object zich niets aantrekt van de grootte van de background. De slider is verbonden met de parameter 'k'. Deze parameter 'k' beinvloedt de snelheid van zakken van het water in de waterbak (het animatie-object). Andere parameters, anders dan de onbelangrijke 'dt', zijn hier eigenlijk niet. Let goed op de coordinatentransformatie van y naar j. Beweging in de x-richting is er niet; i ligt hier vast op 100 pixels.

Let er ook op dat het aangrijpingspunt van de beweging van het animatie-object links boven in de hoek ligt. Lees ook goed de teksten uit de andere voorbeelden (15a, b en c, resp. 17a en b).

Enschede, 10 april 2001