Simulationen in Javascript

Die Simulationen auf dieser Homepage sind in Javascript geschrieben. Genauer gesagt ist die Funktionalität der Simulation in Javascript geschrieben, zum Anzeigen in der Homepage benötigt man noch etwas HTML sowie CSS. Javascript ist eine sogenannte Skriptsprache, also eine Programmiersprache, die im Browser gelesen und ausgeführt wird. Wir arbeiten mit einer Online-Programmierumgebung, die einige Dinge vereinfacht: p5js.org.

p5js bietet einen Editor zum Eingeben des Programmcodes und eine ausführliche Referenz aller Methoden (Befehle) mit konkreten Beispielen. Um Programme speichern zu können, musst Du Dir einen account anlegen, bei dem Du lediglich eine funktionierende Email-Adresse benötigst. Eine sehr ausführliche Tutorial-Reihe zum Programmieren mit p5js findest Du hier.

Auf dieser Seite bekommst Du ein zielorientiertes Tutorial, wie Du selbst eine biologische Simulation zu einem Thema programmieren kannst. Vom Niveau her habe ich es für Schülerinnen und Schüler der Kursstufe angelegt. Viel Spaß!

Nach diesem Tutorial weißt Du, wie man die Programmierumgebung p5.js verwendet.

Jetzt lernst Du, wie Du Grafiken mit einem Mausklick und Mausziehen zielgerichtet ansteuern und bewegen kannst. Du entdeckst den Unterschied, wie man einen Schieberegler nur in eine Richtung und eine andere Grafik in alle Richtungen bewegen kann.

Um das Konzept der Objekt orientierten Programmierung (OOP) kennenzulernen, empfehle ich Dir zunächst diese drei kurzweiligen Tutorials:

Nachdem Du das Prinzip der objektorientierten Programmierung kennengelernt hast, änderst Du nun Deine Simulation dahingehend ab. In diesem Tutorial wird Dir Schritt für Schritt erklärt, wie Du in einer neuen Javascript-Datei eine Klasse für "ziehbare Grafiken" anlegst und aus dem Hauptprgramm heraus als neue Objekte erstellst und gezielt ansteuerst.

Was jetzt noch fehlt ist die Programmierung einer mathematisierten Funktion, die sogenannte Modellbildung der Simulation. Wir erweitern im letzten Teil die Simulation um folgende Punkte: die beiden Regler erzeugen je nach ihrer Stellung ein unterschiedlich großes Rechteck; dies ist unsere Simulation in dieser Vorlage. Diese Modellierung soll nur erfolgen, nachdem der Startbutton gedrück wurde und solange bestehen, bis der Stoppbutton gedrückt wurde. In dieser Anzeigephase sollen die Regler nicht verschiebbar sein. Außerdem geben wir dem Becherglas noch eine Funktion: Wenn es mit der Maus nach unten links gezogen wurde, soll es sich entleeren. Dies erfolgt durch das Erscheinen einer zweiten Becherglasgrafik an der Stelle der ersten.

Damit Du Deine Simulation zielgerichtet programmieren kannst, muss sie geplant werden. Dazu erhältst Du hier auch eine Anleitung. Hier findest Du ein dazu passendes Word-/ bzw. OpenOffice-Dokument, die Planungen können aber genauso gut handgeschrieben verfasst werden:

(1) Am besten beginnst Du mit einer Beschreibung der Simulation. Es lohnt sich, zunächst die konkreten Ziele der Simulation und anschließend den genauen Ablauf zu notieren. Hinter den Zielen verbergen sich nämlcih die benötigten Grafiken und Eingabe-Interfaces wie z.B. Regler oder Taster, hinter dem Ablauf lässt sich bereits die Anzahl benötigter "Cases" für den Switch-State-Programmteil erkennen!

(2) Danach wird es in diesem und den folgenden Punkten richtig konkret. Plane die Programmstruktur vom Anfang bis zum Ende durch:

- Überlege Dir zuerst, welche Variablen du für die Simualtion benötigen wirst und vergib passende Namen. Die Konvention hierbei ist: Variablen werden klein geschrieben, wenn Sie aus mehreren Worten zusammengesetzt sind, geht dies über Großbuchstaben, z.B.: imgRegler.

- Außerdem erfolgt ganz oben mit der Preload-Funktion das Einlesen der benötigten Grafiken. Vergib jeder Grafik gleich einen passenden Namen. Wenn sie schon existieren, kopiere alle in einen Ordner und benenne sie gleich richtig. Schau auch nach den Größen der Grafiken und notiere sie dazu (Pixelangaben).

(3) So wie in der Prgrammstruktur auch geht es jetzt an die Planung des Setup-Teils:

- Welche Canvas-Größe ist für Deine Simulation sinnvoll? (Hinweis:  Sehr professionell gehst Du vor, wenn Du hierfür auch zwei Variablen verwendest und die Lage und Funktionalitäten auch relativ zur Canvasgröße planst, das ist aber noch einmal deutlich komplexer.)

- Müssen die Grafiken in der Größe angepasst werden, damit sie in diesem Canvas die richtige Größe besitzen? Notiere die ggf. diese Resize-Faktor(en).

- Welche Einstellungen sind für die einzelnen bewegbaren grafiken (z.B. Regler) sinnvoll? (x,y=Lage im Canvas / xMin,xMax,yMin,yMax=Beweglichket im Canvas / hightlight (true,false)=(keine)Umrandung, wenn Maus über Grafik)

(4) Jetzt kannst Du die einzelnen Fälle der Switch-State-Programmierung vorplanen:
- Welche Grafiken werden in welchem Fall (Case 0,1,2...) angezeigt?
- Welche Variablen werden auf welche Werte gesetzt?

(5) Plane nun, was in welchem Fall durch die verschiedenen Maus- bzw. Touchscreen-Aktionen ausgelöst wird:

- Lege fest, welche Grafiken durch Maus und Touchscreen anwählbar sind
- Überlege, unter welchen Bedingungen diese Grafiken anwählbar sind

(6) Notiere zum Schluss noch die Algorithmen deiner Simulation, Restart-Einstellungen und plane, ob Du weitere Funktionen erstellen musst:

- Welche Algorithmen stehen hinter Deiner Simulation? Wenn z.B. der EIngangsregler y-Werte zwischen 150 und 400 zurückgibt, Du aber Werte zwischen 0 und 100 benötigst, steckt dahinter Dein erster Algorithmus, man spricht hier von 'mapping'. Außerdem musst Du planen, welche Auswirkungen die Zahlen zwischen 0 und 100 dann haben (z.B. direkt graphisch oder indirekt in eine mathematische Formel gepackt) 

- Welche Variablen müssen zurückgesetzt werden, Case auf 0 setzen

- Welche weiteren Funktionen benötigst Du? z.B. zum Anzeigen der Werte und der graphischen Umsetzung im Canvas