16b. Voorbeeld / Oefening met groeiende grafiek (model-driven simulatie)

Gevraagd: Maak een web-page met een 'groeiende grafiek' met een willekeurig gekozen wiskundig model.

Deze vraag komt veelvuldig voor bij educatieve computersimulatie. Daarom noemen een dergelijke techniek: 'model-driven' computersimulatie.

Werkwijze en tip: Aangezien deze presentatietechniek niet zomaar met javascript alleen kan worden gemaakt, dien je derhalve een applet te gebruiken. Gebruik derhalve onze Java-applet: 'grafiekYT.class'. Deze applet tekent een groeiende grafiek in de tijd. De applet dient door de ontwikkelaar zelf wel goed ingesteld te worden. De betreffende class-file zit in de map 'WebLib' in de folder 'Algemeen' op de gewone prakticum-server van TO.

Een oplossing met een heel eenvoudig model is hieronder aangegeven. Je ziet hier een voorbeeld van een combinatie met javascript en een applet.

Tip: De applet dient van te voren goed ingesteld te worden.

Oplossing (HTML-deel):

...
<APPLET
    CODE=grafiekYT.class
    NAME=grafiekYT1
    width=460
    height=185 >
   <PARAM NAME="BackColor" VALUE="255,255,255">
   <PARAM NAME="GridColor" VALUE="0,0,0">
   <PARAM NAME="Graph1Color" VALUE="255,0,0">
   <PARAM NAME="Graph2Color" VALUE="0,0,255">
   <PARAM NAME="GridT" VALUE="5">
   <PARAM NAME="GridY" VALUE="4">

   <PARAM NAME="Y1min" VALUE="-300">
   <PARAM NAME="Y1max" VALUE="300">
   <PARAM NAME="Y1text" VALUE="Y1(t) (rood): e-macht van (-300 tot +300)">

   <PARAM NAME="Y2min" VALUE="-300">
   <PARAM NAME="Y2max" VALUE="300">
   <PARAM NAME="Y2text" VALUE="Y2(t) (blauw): 300-e-macht (van -300 tot +300)">
   
   <PARAM NAME="Tmin" VALUE="0">
   <PARAM NAME="Tmax" VALUE="200">
</APPLET>
...
<FORM>
 <input 
  TYPE="button" 
  NAME="xxxx" 
  VALUE="run the model and present output" 
  onClick="run()">
</FORM>
...

Onze output-applet moet weten tussen welke waarden de variabelen op het scherm gepresenteer c.q. 'getekend' moeten worden. Voor het goed kunnen afstemmen van model en grafiek moet je een aantal dingen weten: zoals de 'ranges' waarbinnen de vairabelen 'zich bewegen'. Daartoe moet je van te voren weten welke werkelijke waarden de variabelen van het model zullen hebben en voor kunnen komen; niet de coordinatenwaarden, maar de werkelijke waarden van de twee modelvariabelen '...' en '...'. En ook van 't'. Van de tijd 't' weten we dat hij van 0 tot 1000 (eenheden) kan lopen. Van 'x' weten we niets, alleen dat hij wellicht alle waarden kan hebben. En van 'y' weten we ook niet meer. Daarom moeten we zowel de berekening zien te beperken (hier d.m.v. de grootheid 'Tmax') alsmede de grafische presentatie binnen zekere grenzen zien te houden (hier d.m.v. de grootheden 'Ymax' en 'Ymin'). Dat te weten en te kennen is een van de moeilijkste dingen uit dit vak. Immers van te voren weet je het gedrag van het model niet. Je kunt alleen maar schatten. Dat schatten hebben wij gedaan. Op grond van eerdere waarnemingen. Daarom geven wij jullie de grenzen van de modellen of van de formules van te voren aan.

Oplossing (script-gedeelte):

We nemen hier een heel eenvoudig wiskundig model. Bij elke iteratie wordt er een lijntje getekend (dus 100 maal).

<SCRIPT>
function run()
{
 y1 = 0.125;
 y2 = 300.0;
 t = 0.0;
 dt = 0.01;

 for (i=1; i<200; i++)
   {
      document.grafiekYT1.setGrafiek1YT1(t,y1);
      document.grafiekYT1.setGrafiek2YT1(t,y2); //setten van de 2 eerste waarden

      t = Math.round(i);
      y1 = y1 + 0.04*y1;        
      y2 = y2 - 0.04*y2;        
      document.grafiekYT1.setGrafiek1YT2(t,y1);
      document.grafiekYT1.setGrafiek2YT2(t,y2); //setten van de 2 tweede waarden
   }
}
</SCRIPT>

Output:

Je ziet hier een interactief model-driven fenomeen. Je kunt het wiskundige model, dat dit fenomeen simuleert, runnen. Het fenomeen is tijdens het runnen (hier) niet interactief. Dat komt pas bij de volgende serie voorbeelden.

In dit voorbeeld zie je de applet met de naam 'grafiekYT.class', een button met de tekst 'run the model and present output' en een method 'run()'.

De functie (of zo je wilt de method) 'run' draait net zolang tot er ergens aan een eindcriterium wordt voldaan.

De output x en y (of alleen x of y) wordt hier als functie van de tijd via de applet op het beeldscherm gepresenteerd. Door een parameter interactief - en 'tijdens de run' - een andere waarde te geven kun je (dan) 'oorzaak' en 'gevolg' van je ingrijpen bestuderen. (Zie andere voorbeelden.)

Zoals je weet moeten reals soms omgezet worden naar integers en integers naar reals. Hier wordt bijvoorbeeld i (een integer) naar t (een real) omgezet. Dat komt bij grafische zaken en animaties heel vaak voor. Immers pixel-coordinaten zijn gehele getallen (integers) en wiskundige modellen rekenen met gebroken getallen (reals). Daarvoor zijn hier standaardprocedures (functies) gebruikt. Hier zijn dat parseFloat(..) of Math.round(..). Zie boek van Lemay.

Waar komt dit soort techniek te pas? Waar is het grafisch weergeven van dat in de tijd van belang? Denk bij deze presentatie-techniek aan de AEX-index; daar zie veel 'groeiende grafieken'. Immers elke dag of elk uur of elke minuut komt er een punt of een lijntje op een beeldscherm bij. Het model dat er aan ten grondslag ligt is - in dit geval - afwezig en de onderliggende mechanismes van het fenomeen 'koers' is voor velen (toch) niet te doorgronden. Het lijkt voor een oppervlakkige waarnemer een zuiver toevallig, statistisch random fenomeen.

Enschede, 1 dec. 2000; update: 16 febr. 2001.