One Button Murmelbahn – Hyper Laser Synth Flute Action

Aufgabenstellung
Die Aufgabe bestand darin, eine interaktive Murmelbahn zu programmieren. Die Möglichkeiten zur Interaktion sollten stark eingeschränkt sein und nur über das Drücken einer einzigen Taste erfolgen. Dabei ist es der Gruppe frei überlassen, welche Funktion sie dieser Taste geben möchte. Wichtig ist allerdings, dass es dem Nutzer Spaß macht, die Murmel über die Bahn rollen zu lassen.

Umgesetzt wurde die Arbeit mit der Programmiersprache JavaScript und den libaries „P5.js” und „Matter.js”. Letztere ermöglichten es eine Art Welt zu schaffen, in der sich Physische Objekte relativ real wirkenden physikalischen Gesetzen fügen.


Prozess
Vor den ersten Coding-Versuchen, sammelten wir Skizzen und Ideen für einen möglichen Murmelbahnverlauf. Basierend auf diesen und weiteren Skizzen, erstellten wir eine Liste mit interaktiven Elementen, die für die Verwendung in der finalen Version der Murmelbahn infrage kommen könnten. Nachdem wir uns auf einen Murmelbahnverlauf einigten, begannen wir die einzelnen Elemente zu programmieren. Dafür planten wir statische Blöcke ein, welche abhängig von dem Zustand der Funktionstaste (gedrückt oder nicht gedrückt) durchlässig werden, oder die Murmel am Weiterollen hindern. Diese ermöglichen es dem Nutzer die Murmel über Hindernisse rollen zu lassen. Außerdem planten wir einen Magnet, einen Propeller, sowie Boost-Zonen und ein Galton Board ein.

Nach dem Wegfall der Boost-Zonen und des Propellers, fügten wir die Elemente zusammen, passten die Bahn optisch an und fügten diesen als SVG Pfad ein. Anschließend einigten wir uns auf einen Style und fügten passende Sounds, sowie Texturen in den Code ein.

Moodboard
Zur visuellen Ausgestaltung der Bahn stellten wir ein Moodboard zusammen, das wir als Stilvorlage für das Erstellen von Texturen und Hintergründen nutzen konnten.

Ergebnis
Die Steuerung der Murmelbahn erfolgt durchDrücken der ‘B’-Taste. Je nach Zustand, aktivieren oder deaktivieren sich abwechselnd die blauen und roten Blöcke und werden dabei durchlässig oder undurchlässig. Sobald die Murmel auf eine Grube zurollt, gilt es die Blöcke durch Drücken der ‘B’-Taste ein -oder auszuschalten, sodass die Murmel nicht hineinfällt. Fällt sie doch hinein, erscheint die Murmel wieder am Anfang der Bahn und muss erneut über die Hindernisse geführt werden. Der Magnet in der Mitte der Strecke wird bei dauerhaft gedrückter ‘B’-Taste eingeschaltet.