Programmiertes Entwerfen 1
Verkehrte Welt - One Button Murmelbahn
Mit p5.js und matter.js entwickelten wir eine Murmelbahn, in der unser gesamtes Wissen aus dem ersten Semester in Programmiersprachen und Programmierendem Entwerfen zusammen geflossen ist.
Key Idea
Hier das Video, das uns zu unserer Initial Idee inspiriert hat. Wir wollten eine Murmelbahn kreieren, in der die Murmel durch eine verkehrte Welt rollt!
Key Visuals
Der Kreisel
Die Murmel starten in einem Kreisel, bestehend aus drei Elementen. Gleich hier findet auch die erste Interaktion mit den Betrachter:innen statt: Die Enter-Taste startet die Bewegung der Murmel.
Der Pfeil
Insgesamt wollten wir mit den Erwartungshaltungen der Betrachter:innen spielen und diese eben nicht erfüllen. Exemplarisch hierfür ist der große rote Pfeil, der deutlich in eine Richtung deutet.
Die Dominosteine
Auch die Dominosteine werden sich nicht wie erwartet verhalten und der Klügere gibt bekanntlich nach!
Die Faust
An dieser Stelle der Murmelbahn liefert sich unsere Murmel einen handfesten Kampf.
Für alle nach uns folgenden Bahnen hoffen wir doch sehr, dass die Murmel unbeschadet daraus hervor geht.
Der Affe
Fast am Ende angelangt, trifft die Murmel noch auf einen Affen. Seid gespannt, was dabei passiert.
Rules
Hier noch zum Schluss eine Übersicht zu unseren Gestaltungsregeln, an die wir uns Gehalten haben.
Code
Diese drei Beispiele aus dem Code geben einen guten Einblick in unsere Herangehensweise an das Programmieren.
Der Smiley
Am Beispiel des Smiley lässt sich sehr gut darstellen, wie wir im gesamten Code vorgegangen sind: Um unseren Ansprüchen der Gestaltung gerecht zu werden, arbeiteten wir viel mit PNG- oder SVG-Dateien. Diese implementierten wir mithilfe von der SpriteBlock Class. Die Elemente, denen wir durch matter.js physikalische Eigenschaften verliehen haben, generierten wir mit der Block Class. 
Die Flipperbox
Sounds dürfen bei einer coolen Murmelbahn natürlich nicht fehlen! Am Beispiel der Flipperbox bekommt man einen Eindruck wie wir diese Sounds gecodet haben. 
Der Affe
Damit die Murmel wie geplant mit dem Affen interagiert, mussten wir die Eigenschaften der Murmel in Abhängigkeit zu ihrer Position bestimmen: 
Endergebnis
Und nun viel Spaß in der verkehrten Welt!
Michelle Boetzel, Philipp Roser, Mia Wannags
BetreuungProf. Benedikt Groß, Benno Stäbler
Tags
