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ß!

1. Die Programmierumgebung p5js kennenlernen

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

2. Das erste Programm: Einladen und Darstellen von Bildern mit p5js

In diesem Tutorial lernst Du, wie Du Grafiken in Dein Projekt speicherst. Du lernst sie abzurufen und  an eine bestimmte Stelle im Canvas zu platzieren. Am Ende erhältst Du ein solches Bild aus Deinen Grafiken.

Lade Dir diese ZIP-Datei mit den benötigten Grafiken herunter und entpacke sie, bevor Du loslegst. Wenn Du das Video auf dem Smartphone schaust, kannst Du parallel bei p5js den Code eingeben.

Download
Grafiken DemoSimulation.zip
Komprimiertes Archiv im ZIP Format 136.2 KB

3. Jetzt wird es interaktiv: Grafiken über den Bildschirm ziehen und Schieberegler bewegen

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.

4. Jetzt wird es objektorientiert: in Klassen und Objekten denken und programmieren

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

5. Mache jetzt Deine Simulation objektorientiert

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.

Falls Du beim Programmieren durcheinander gekommen bist, kannst Du hier den Stand der Simulation nach Teil 5 herunterladen und in p5js hochladen:

Download
Simulation in JS nach Teil5.zip
Komprimiertes Archiv im ZIP Format 897.1 KB

6. Wir erweitern und kommen zum Ende dieser Simulations-Vorlage

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.

Im Laufe des Tutorials wird eine weitere Grafik in p5js hochgeladen, du kannst sie hier herunterladen:

Download
becherglas1b.png
Portable Network Grafik Format 11.2 KB

Hier findest Du nun auch die finale Simulations-Vorlage als Datei zum Herunterladen und Hochladen in p5js:

Download
Simulation in JS FINAL.zip
Komprimiertes Archiv im ZIP Format 909.5 KB