Gravity – One Button Murmelbahn

Aufgabe

Die Aufgabe lautete, eine interaktive One Button Murmelbahn mit Hilfe von p5.js und Matter.js zu programmieren. Die einzige Vorgabe war dabei, die Murmel nur mit einer Taste oder einem Mausklick starten zu lassen. Gestalterisch sowie programmiertechnisch wurden uns keine Grenzen gesetzt. Wir machten uns es zur Aufgabe eine Murmelbahn in den Weiten des Weltraums zu entwerfen. Neben p5.js und matter.js verwendeten wir Tools wie Adobe Illustrator und p5.play.

Prozess

Nach intensivem Brainstorming und einigen Moodboards kamen wir gemeinsam zum Entschluss, eine Murmalbahn im Weltraum zu entwerfen. Wie diese aussehen sollte stand zu diesem Zeitpunkt jedoch noch in den Sternen. Ideen wie, dass die Murmel um die verschieden Planten des Sonnensystems kreist oder eine Murmelbahn für Kinder mit Lerneffekt wurden schnell verworfen. Schließlich einigten wir uns auf eine Murmelbahn ohne Planeten, dafür mit einer riesigen Raumstation, Hürden und Überraschungen über welche sie schließlich durch ein Spaceportal zur nächsten Bahn gelangt.

Gestaltung

Bei der Gestaltung entschieden wir uns schnell für einen futuristischen Stil, der durch seine vielen geometrischen Formen dem Prinzip des Konstruktivismus folgt. Durch Farbabstufungen unseres gewählten violetten Tons und einem Verlauf gelang es uns ein Licht- und Schattenspiel zu erzeugen. 
Um Räumlichkeit in unserer Murmelbahn entstehen zu lassen, entschieden wir uns für Illustrationen im 2,5 dimensionalen Raum. 
Der Sternenhimmel mit dem programmierten Parallax-Effekt unterstützt dabei die mystische Weltraumstimmung, während Murmel die über Hürden die Raumstation nimmt.