|

matter.js: Zweidimensionale Physiksimulation im Browser

Als Web Developer bewegt man sich normalerweise in einer eher statischen Welt. Elemente werden an ihren Platz gesetzt und dann höchstens mal beim Resize oder durch eine Transition bewegt. Das ist meistens auch okay so, aber manchmal ist einem das einfach etwas zu langweilig.

Mit matter.js erwacht die Web-Welt zum Leben. Im zweidimensionalen Raum können hier Körper mit verschiedenen Eigenschaften platziert werden. Matter.js simuliert ein physikalisches Umfeld, sodass diese Körper miteinander interagieren. Das Ergebnis der Simulationen wird dann in einen HTML canvas gerendert.

Dieses Beispiel ist ziemlich simpel aufgebaut: Die quadratische Welt enthält zwei statische Rechtecke. Diese habe ich leicht gedreht und an unterschiedliche Stellen in die Welt gesetzt, sodass sie zu Hindernissen werden.
Beim Klick auf den linken Button und bei der Initialisierung wird die Funktion rain() ausgeführt. Sie generiert über eine for-Schleife 40 Kreise, die dann oberhalb des sichtbaren Bereichs der Welt gespawned werden und herunterfallen. Um das ganze etwas interessanter zu machen, habe ich den Kreisen noch zwei unterschiedliche Größen/Massen und einen leichten Schubs nach rechts verpasst.
Beim Klick auf den rechten Button wird mit einer Zeile Code die Richtung der Gravitation einfach umgekehrt, was auch einen sehr amüsanten Effekt ergibt.
Besonders interessant wird die Geschichte, wenn Maus-Interaktion mit ins Spiel kommt. Die wird einfach durch eine Instanz von MouseConstraint hinzugefügt.

Dieses Beispiel ist nur ein kleiner Teil dessen, was man mit matter.js anstellen kann. Aber allein hier habe ich schon echt viel Freude dabei gehabt, mit physikalischen Paramtern (Masse, Reibung, Gravitation, Krafteinwirkung etc.) und optischen Parametern (Farbe, Textur etc.) herumzuspielen. Die realistische Simulation zu beobachten ist mitunter schon echt sehr satisfying.

Hier ein paar Links zu Seiten, wo matter.js richtig nice eingebaut wurde:

Weiterführende Links: