Musik Murmelbahn

Worum geht’s?

Gegenstand dieses Projekts war es eine “One Button Murmelbahn” zu erstellen. Um dies zu erreichen, musste gleichzeitig an Teilstücken, bestehend aus Storyline, Design und Programmierung, gearbeitet werden.

Storyline

Die Murmel; zu Beginn in Form einer Münze, welche von oben in die Jukebox fällt.
Es passiert eine für den Zuschauer unsichtbare Transition, denn plötzlich spielt Musik und die Münze fällt nun in Gestalt einer Schallplatte von unten aus der Jukebox heraus. Es eröffnet sich eine Welt aus Instrumenten, welche die Schallplatte auf deren Umrissen erkundet. Sie rollt und springt über Bongos, Gitarren, Klaviere und weitere Instrumente. Im Hintergrund eine Landschaftliche Tapete der Notation. Nach erfolgreichem durchrollen, landet die Schallplatte in ihrem vorgesehenem Gehäuse, dem Schallplattencover. So findet die Geschichte der Musikmurmelbahn zu einem sinnigen Ende.

Design

Die Welt, in welcher sich die Murmel bewegt, besteht im Hintergrund aus einer Beigen Tapete, versetzt mit verschiedenen Noten, welche mit reduzierter Deckkraft drauf projiziert sind. Darüber liegt eine “Bahn aus Instrumenten”, welche alle in Adobe Fresko gezeichnet und später in Figma ihren Svg’s angeglichen wurden. Die erwähnten Svg’s wurden in Adobe Illustrator erstellt und in Figma exportiert, um eine funktionierende Abfolge zu erproben. Alle Elemente, seien es Instrumente oder Jukebox/ Schallplattencover, sind zwei Dimensional und folgen einem farblichen Schema, welches sich durch das gesamte Projekt zieht (siehe Styleguide).

Funfact

zu dem Schallplattencover: es zeigt abstrahiert eine bildliche Nachstellung des Beatles-Covers durch die Mitglieder dieses Projekts.

Programmierung

Orientiert am “Code-Grundgerüst” unseres Dozenten, wurden die verschiedenen Elemente, welche im Browser die Murmelbahn erzeugen, nach und nach eingefügt. Das erzeugte Bild setzt sich aus drei “Ebenen” zusammen.

1. Der Tapetenhintergrund, ein Png -> beeinflusst die Murmel nicht, fungiert schlicht als Bild im Hintergrund (wie eine echte Tapete), auf dem die anderen Elemente liegen.

2. Svg-Instrumente, statische Elemente -> daran prallt die Murmel ab, da sie selbst ein Svg-Körper ist und die Instrumente als solche physischen Objekte erkennt. Diese sind in dieser “Ebene” von der Farbe her unsichtbar.

3. Png-Instrumente, Illustrationselemente -> beeinflussen die Murmel nicht. Sie werden einfach nur eingeblendet und auf das physische Instrument (Svg) gelegt.

   

   Das Schallplattencover ist bspw. bloß eine Png, da die Murmel an der Stelle keinen Widerstand benötigt, und ruhig hinter dem Png verschwinden kann.
   Die Jukebox ist auch bloß ein Png, mit der Besonderheit, dass sich dahinter ein intelligenter Sensorblock (Svg) befindet, welcher nach der Berührung/ dem Zusammenstoß mit der Murmel das Png wechselt (vom Münz, zum Schallplattenimage) und Musik abspielt. Diese wird zu Beginn, durch das Bedienen einer beliebigen Taste, ausgelöst, was die Murmel dann auch zum starten bringt.

   

Die “One-Button”-Funktion ermöglicht es dem User außerdem, bei Bedarf, in die Murmelbahn einzugreifen und der Murmel im Falle eines Steckenbleibens, einen kleinen Schwung mitzugeben.