Unterwasserwelt - One Button Murmelbahn

Aufgabenstellung

In dem Coding Projekt “one button murmelbahn” , sollten wir in Kleingruppen eine Murmelbahn erstellen die nur über einen Button gesteuert werden kann. Dazu nutzen wir hauptsächlich die Programmiersprachen Javascript, p5js und des Weiteren die physics engine matterjs.

Prozess

Für uns war relativ schnell klar, dass unsere Murmelbahn eine Unterwasserwelt durchlaufen sollte, denn dazu vielen uns konzeptionell viele interaktive Umsetzungsmöglichkeiten ein. Beim durchforsten einiger sehr inspirierender Bilder, wurde für uns aber auch deutlich, dass es interessanter wäre, wenn die Murmel nicht von Beginn an im Wasser startet, sondern sich erst langsam aber stetig ihren Weg dorthin “erarbeitet”. Nach mehreren intensiven Brainstorming-Phasen kam uns dann die Idee, den Mond als Murmel zu verwenden und ihn über Berge in ein Tal hinunter und später dann ins Wasser zu überführen.

Generell versuchten wir unser Design dabei eher schlicht zu halten und orientierten uns dabei z.B. an den Silhouetten einiger Unterwasserpflanzen oder an grobgeformten Riffkonturen.

Aus den nun konzeptionell ausgearbeiteten Elementen entstand eine grobe Skizze, wie wir uns den Verlauf der Bahn vorstellten. Dabei verzichteten wir größtenteils auf SVG’s und versuchten die Bilder als PNGS mit der richtigen Anordnung (foreground/background) einzubinden. Farblich hatten wir uns einen Atmosphärenwechsel vorgestellt. Von einem anfänglich eher helleren freundlichen Design, übernahm Unterwasser dann eine eher düstere, dunklere Atmosphäre in der sich der helle Mond deutlich abhebte. Wir wollten uns interaktiv etwas abgrenzen, indem wir die Steuerung auf die umliegenden Elemente begrenzten, somit konnte man die Murmel nur indirekt, kontrolliert zum Ziel führen.

Ergebnis