16c. Voorbeeld / Oefening met groeiende grafiek (als presentatietechniek bij een simulatie met een wiskundig model van het dynamisch gedrag van een kloppende aorta)

== vanaf heden is deze web-pagina te gebruiken, maar let op de mededeling die we 1 maart over deze techniek in teleTOP hebben gezet ==

Gevraagd: Maak een web-page met een 'groeiende grafiek', (hier) 'aangedreven' (driven) door een model van een kloppende aorta.

Deze vraag naar grafische presentatie van output van een gesimuleerd fenomeen komt veelvuldig voor bij educatieve computersimulatieprogramma's. Die functionaliteit zit meestal in een applet. Die applet is dan weer een onderdeel van een grote geheel, bijvoorbeeld een stuk courseware op een web-pagina of een web-site. Een dergelijke techniek noemen we '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, d.w.z. de properties (zoals Tmax, Tmin, Ymax, Ymin, etc.) dienen goed vastgelegd - 'ge-set' - te worden.

Een oplossing met een - op zich - vrij eenvoudig model is hieronder aangegeven. Je ziet een voorbeeld van een perfecte combinatie met javascript met een applet. De betreffende class-file zit in de map 'WebLib' in de folder 'Algemeen' op de gewone prakticum-server van TO.

NB. Deze class-file kan maar duizend punten in de t-richting aan. Let daar op. Dus i kan helaas en mag in de loop niet meer dan 1000 x het model doorrekenen. Er moet dus soms wat geschoven worden.

Oplossing (HTML-deel):


.
.
<APPLET
    CODE=grafiekYT.class
    NAME=kaderA
    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="4">
   <PARAM NAME="GridY" VALUE="3">

    <param name="Y1min"  Value="0">
    <param name="Y1max"   Value="150">
    <param name="Y1text"  Value="Pao(t) rood van 0 tot +150">

    <param name="Y2min"  Value="0">
    <param name="Y2max"  Value="150">
    <param name="Y2text"  Value="Plv(t) blauw van 0 tot +150">
   
   <PARAM NAME="Tmin" VALUE="0">
   <PARAM NAME="Tmax" VALUE="40">
</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 gepresenteerd 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 'pao' en 'plv'. En ook van 't'. Van de tijd 't' weten we dat hij van 0 tot 4 (seconden) kan (moet) lopen. Van 'pao' weten we dat hij net als 'plv' tussen 0 en 150 (mmHg) kan lopen. Daarom moeten we de schaalverdeling goed instellen (hier d.m.v. de grootheid 'Tmax' alsmede de grootheden 'Ymax' en 'Ymin'). Dat instellen van de assen (en de juiste eenheden daarlangs) moet je uit de model-informatie halen en is een van de moeilijkste dingen uit de simulatie en het modelvormingsvak. Immers van te voren weet je het gedrag van het model en het gedrag van de variabelen niet. Je kunt alleen maar schatten. Dat schatten hebben wij gedaan. Op grond van eerdere waarnemingen. Daarom geven wij jullie de grenzen (de ranges, d.w.z. de minimaal en de maximaal te verwachtte waarden) van de modellen of van de formules allemaal van te voren aan.

Oplossing (script-gedeelte):

We nemen hier een heel eenvoudig wiskundig model. Bij elke iteratie wordt er een klein lijntje getekend (hier 400 maal). Dat is het kenmerk en geeft tegelijkertijd het effect van een groeiende grafiek.


<SCRIPT>
function run()
{
 vao = 80.0;
 pao = 80.0;
 t = 0;
 f = 1.0;
 qao = 80.0;
 qp = 70.0;
 plv = 0.0;
 rp = 1.25;
 cao = 1.1;
 plvmax = 120.0;
 dt = 0.1;

 for (i=1; i<40; i++)
   {
      document.kaderA.setGrafiek1YT1(t,pao);
      document.kaderA.setGrafiek2YT1(t,plv); //setten van de 2 eerste waarden

      t = Math.round(i);
      plv = plvmax * Math.sin(0.1*3.14*f*t);
      if (plv < 0.0) {plv = 0.0}
      qao = 33.0 * (plv - pao);
      if ((plv - pao) < 0) {qao = 0.0}
      vao = vao + (qao - qp)*0.1;
      qp = pao/rp;
      pao = vao/cao;

      document.kaderA.setGrafiek1YT2(t,pao);
      document.kaderA.setGrafiek2YT2(t,plv); //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 'kaderA' en waarvan de code zich in de file 'grafiekYT.class' bevindt. Verder zie je 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 dat 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: 2 mrt. 2001.