Verkehrte Welt - One Button Murmelbahn

Mit p5.js und matter.js entwickelten wir eine Murmelbahn, in der unser gesamtes Wissen aus dem ersten Semester in Programmiersprachen und Programmierendem Entwerfen zusammen geflossen ist.

Key Idea

Hier das Video, das uns zu unserer Initial Idee inspiriert hat. Wir wollten eine Murmelbahn kreieren, in der die Murmel durch eine verkehrte Welt rollt!

Key Visuals

Der Kreisel

Die Murmel starten in einem Kreisel, bestehend aus drei Elementen. Gleich hier findet auch die erste Interaktion mit den Betrachter:innen statt: Die Enter-Taste startet die Bewegung der Murmel.

Der Pfeil

Insgesamt wollten wir mit den Erwartungshaltungen der Betrachter:innen spielen und diese eben nicht erfüllen. Exemplarisch hierfür ist der große rote Pfeil, der deutlich in eine Richtung deutet.

Die Dominosteine

Auch die Dominosteine werden sich nicht wie erwartet verhalten und der Klügere gibt bekanntlich nach!

Die Faust

An dieser Stelle der Murmelbahn liefert sich unsere Murmel einen handfesten Kampf.
Für alle nach uns folgenden Bahnen hoffen wir doch sehr, dass die Murmel unbeschadet daraus hervor geht.

Der Affe

Fast am Ende angelangt, trifft die Murmel noch auf einen Affen. Seid gespannt, was dabei passiert.

Rules

Hier noch zum Schluss eine Übersicht zu unseren Gestaltungsregeln, an die wir uns Gehalten haben.

Code

Diese drei Beispiele aus dem Code geben einen guten Einblick in unsere Herangehensweise an das Programmieren.

Der Smiley

Am Beispiel des Smiley lässt sich sehr gut darstellen, wie wir im gesamten Code vorgegangen sind: Um unseren Ansprüchen der Gestaltung gerecht zu werden, arbeiteten wir viel mit PNG- oder SVG-Dateien. Diese implementierten wir mithilfe von der SpriteBlock Class. Die Elemente, denen wir durch matter.js physikalische Eigenschaften verliehen haben, generierten wir mit der Block Class.

Die Flipperbox

Sounds dürfen bei einer coolen Murmelbahn natürlich nicht fehlen! Am Beispiel der Flipperbox bekommt man einen Eindruck wie wir diese Sounds gecodet haben.

Der Affe

Damit die Murmel wie geplant mit dem Affen interagiert, mussten wir die Eigenschaften der Murmel in Abhängigkeit zu ihrer Position bestimmen:

Endergebnis

Und nun viel Spaß in der verkehrten Welt!