Visualisierte Simulation mit JavaScript und Canvas Element

Simulationen lässt man für gewöhnlich auf großen Maschinen laufen, um in angemessener Zeit zu Ergebnissen zu kommen. Wenn jedoch die Visualisierung im Vordergrund steht – frage ich mich – warum nicht auch mal mit JavaScript im Browser durchführen.

Folgende Aufgabe war gestellt: (Quelle: Universität Karlsruhe/KIT Vorlesung Grundzüge der Informationswirtschaft 2011, Prof. Dr. Christof Weinhardt, Timm Teubner)

Auf einem Schulhof mit 400 Schülern breiten sich drei unterschiedliche Gerüchte über den Verbleib eines Lehrers aus.

(1) Der Lehrer ist krank und deshalb nicht da.
(2) Der Lehrer ist mit einer Schülerin nach Argentinien durchgebrannt. (3) Der Lehrer ist ein gesuchter Serienmörder und jetzt im Gefängnis.

Bilden Sie den Schulhof als Raster von 20  20 Feldern ab, wobei sich auf jedem Feld genau ein Schüler befindet. Jeder Schüler kann mit den Mitschülern auf den umliegenden acht Positionen reden, (so wie hier dargestellt) und tut dies auch! Jeder Schüler glaubt zu jedem Zeitpunkt an genau eine Version des Gerüchts. Zunächst sei die Verteilung zufällig und gleichverteilt.

Für die Verbreitung der Gerüchte von einem Zeitpunkt auf den nächsten gelten folgende Regeln:

  1. (i)  Ein Schüler glaubt zum Zeitpunkt t+1 an ein Gerücht, wenn zum Zeitpunkt t vier oder mehr seiner Nachbarn an dieses Gerücht geglaubt haben.
  2. (ii)  Gerücht zwei stellt eine Ausnahme dar: Hier genügen drei Nachbarn – das Gerücht wird als plausibler erachtet, weil die betreffende Schülerin ebenfalls abwesend ist.
  3. (iii)  Sollten zwei der Bedingungen erfüllt sein, dominiert (natürlich) das absurdere Gerücht (3 > 2 > 1).

Die visualisierte Lösung findet Ihr unter:

http://www.alexander-wolf.net/simulation.htm

 

Eingesetzt wurde ein Canvas Element zur Darstellung des “Schulhofes”. Dieser wird nach jeder durchgeführtem Simulationsfolge neu gezeichnet. Die größten Zeiteinbußen in der Simulation stellt auch dieser Zeichenschritt dar. Wenn man die Randhöhe des Schulhofes erhöht (z.B. auf 1000) lässt sich mit diesem Skript eine sehr hohe Auslastung im Browser erzeugen. Dann funktioniert auch die Darstellung nur noch bedingt.