One Button Murmelbahn - Unterwasser Murmelbahn

Nachdem unser erstes gemeinsames Projekt geschafft war, folgte auch schon das Zweite. Die Aufgabe war es mithilfe von p5.js und matter.js eine interaktive Murmelbahn zu gestalten, die sich durch einen einzigen Button steuern lässt.

Dabei machten wir uns Gedanken zum Aufbau und der Funktion des Buttons. Das Ziel war es, eine gute Balance zwischen Spaß und Überraschung finden.

Durch das Sketchen von einzelnen Elementen versuchten wir, einen Ablauf zu finden. Bei der Umsetzung dieser Ideen haben wir damit begonnen die Elemente, welche wir gerne einbauen würden, zu programmieren.

Wir entschieden uns mit der Schwerkraft zu spielen und diese mithilfe des Buttons umzukehren. Dadurch konnten wir Hindernisse einbauen, die sich nicht durch bloßes Rollen bewältigt lassen. Diese Funktion ermöglichte es auch, Elemente beidseitig zu verwenden.
Daraus entstand unser erster Code für den Button:

Mit der Zeit haben sich dann auch einige Ideen weiterentwickelt und wir haben beschlossen, eine Unterwasserwelt als Handlungsort für die Murmelbahn zu wählen.

Dazu benötigten wir dann natürlich auch eine passende Kugel. Nämlich einen Kugelfisch. Die Idee war es, dass sich der Kugelfisch zusätzlich aufbläst und seine Größe ändert, sobald die Schwerkraft umgedreht wird.

Unsere Murmelbahn beschreibt damit die Reise des Kugelfischs durch die Unterwasserwelt. Dabei trifft er zum einen auf Verbündete, aber auch auf hungrige Feinde. Wie diese Reise endet, zeigt unser Video der Murmelbahn.