Erste Schritte

Die Nachfolgenden Arbeiten sind vom Datensatz losgelöst und dienen dem „Beschnuppern“ der neuen Vorgehensweise. Dabei sollen die neu gewonnenen Möglichkeiten erkundet und erste, grobe Ideen gesammelt werden, wie mithilfe des Arduino UNO im weiteren Verlauf des Projekts ein Zugang zu den Wetterdaten gefunden werden könnte.

Kontraste — hell und dunkel

Dieses Beispiel ist an die Mechanik eines „Schachtelteufels“ angelehnt. Dazu wurde der Lichtsensor in einer Box befestigt. Er dient als analoger Input und stellt fest, ob die Box geschlossen oder geöffnet ist.

Anstatt eines Clowns, der aus der Box springt, wenn sie sich öffnet, begrüßt den Betrachter ein virtueller Schachtelteufel auf dem LCD-Screen, der angeht, sobald die Box sich öffnet und ausgeht, wenn sie wieder geschlossen wird.

Mapping — Temperatur

Um sich mit dem Mapping vertraut zu machen, wurde ein einfaches Thermometer als Beispiel gewählt. In diesem Setup dient der Temperatursensor als analoger Input, der vom Servo-Baustein ausgewertet und mithilfe eines Zeigers auf eine Skala übertragen wird.

Das von Servo und Zeiger abzudeckende Spektrum reicht von null bis 180 Grad (Radiant). Darauf werden Temperaturen zwischen zwölf und 30 Grad Celsius abgebildet. Damit das Thermometer ablesbar ist, wurde eine Skala aus Karton am Aktuator befestigt.

Team-Projekt

Im Folgenden sind die Arbeitsschritte aus dem Projekt mit Suzan Imhoff und Anja Krendlinger dokumentiert. Zur effizienteren Entscheidungsfindung wurden die Aufgabenbereiche in der Gruppe aufgeteilt. Jedes Teammitglied bekam – neben der Aufgabenfelder übergreifenden Zusammenarbeit und gegenseitigen Unterstützung – einen eigenen „Hoheitsbereich“:

Coding — Anja Krendlinger

Physisches System — Suzan Imhoff

Grafik — Eva Kunzmann

Zur gemeinsamen Strukturierung des Projekts sowie dem Austausch und der Entscheidungsfindung bezüglich Skizzen und Ideen wurde ein Miro-Whiteboard genutzt.

Konzeption: Entwürfe

Um die Wetterdaten mit den Interaktionsmöglichkeiten, die Arduino UNO und Grove Starter Kit bieten, zu verknüpfen, werden in der Gruppe Ideen gesammelt und zu Konzeptentwürfen ausgearbeitet.

Es handelt sich um Skizzen, die zunächst der Entscheidungsfindung, welche Ansätze weiterzuverfolgen sind, dienen.

Analoge Ein- & digitale Ausgabe

Die Darstellung skizziert eine interaktive Visualisierung der Wetterdaten, bei der der Nutzer die Möglichkeit hat, mithilfe verschiedener Grove-Starter-Kit-Komponenten unterschiedliche Statistiken zu generieren. Dafür werden Licht-, Temperatur und Soundsensor benötigt.

Die Interaktion besteht darin, die Werte der unterschiedlichen Sensoren zu verändern. Dem Lichtsensor kann mehr oder weniger Licht zugeführt werden. Der vom Sensor erfasste Wert soll dann beispielsweise auf Sonnenstunden oder Bedeckungsgrad übertragen werden und auf dem Bildschirm zeigt eine Statistik, wie häufig die entsprechende Sonnenstundenzahl in den Jahren von 2009 bis 2018 war.

Der vom Temperatursensor gemessene Wert kann zum Beispiel durch Körperwärme, Anhauchen oder Abkühlen (zum Beispiel mit verpackten Eiswürfeln) modifiziert werden. Dieser Wert überträgt sich dann wie im vorhergehenden Beispiel auf die Statistik, die auf dem Bildschirm gezeigt wird.

Der Soundsensor soll dabei helfen, entsprechende Werte rund um Wind zu filtern.

Spielerischer Ansatz

Dieses Konzept konzentriert sich auf einen spielerischen Umgang mit den Wetterdaten. Dazu wird eine Lenkradkonstruktion am Drehwinkelsensor angebracht. Der Nutzer soll damit über den Screen navigieren und einzelne Komponenten des Datensatzes „einsammeln“.

Ob es sich dabei beispielsweise um Sonnenstrahlen oder Regentropfen handelt, bestimmt der Datensatz, der in einer bestimmten Geschwindigkeit durchlaufen wird.

Weiterentwicklung — The Making of: VACATION SURFER

Nach der Festlegung auf das Konzept, das den spielerischen Ansatz verfolgt, wurden Umsetzungsmöglichkeiten besprochen. Dabei stellte sich schnell heraus, dass das Konzept hinsichtlich der Spielmotivation überarbeitet werden muss. Um das Spiel spannender zu gestalten, soll der Handlungsspielraum des Nutzers erweitert werden. Anstatt einer befahrbaren Straße, sollte es drei Spuren geben, zwischen denen gewechselt werden kann – und auch muss, um Hindernissen auszuweichen. Mit dieser Entscheidung wich die zunächst geplante perspektivische Ansicht der Vogelperspektive.

Im Folgenden sind erste Skizzen für den Hintergrund, auf dem später durch verschiedene analoge Interaktionen navigiert werden soll, zu sehen.

Exkurs: Verbindung des Rotary Angle Sensor und Lenkrad

Um den verhältnismäßig kleinen Rotary Angle Sensor mit dem Lenkrad verbinden zu können, wurde eine Konstruktion aus Karton und Kabelbindern entwickelt.

Ressourcen:

• Rotary Angle Sensor
• Vier (kleine) Kabelbinder
• Karton, in den sechs Schlitze in Kabelbinderbreite geschnitten werden

Grafik-Design

Die Gruppe entschied sich für eine an 8-Bit / Arcade angelehnte Ästhetik. Entsprechend wurden verschiedene Hintergründe und Assets gestaltet.

Exkurs: Pixelgrafiken mithilfe von Adobe Illustrator

Dank des Rasterwerkzeugs eignet sich Illustrator hervorragend, um vektorbasierte und damit beliebig skalierbare Pixelgrafiken zu erstellen. Im Folgenden werden die nötigen Schritte dafür erklärt.

1. Rechtsklick auf das Linien-Werkzeug > Rasterwerkzeug auswählen
2. Rastergröße definieren
3. Raster auf der Zeichenfläche zentrieren & für die Orientierung eine leichte Kontur hinzufügen
4. Bei Bedarf: neue Ebene erstellen & Referenzbild darauflegen
5. Bei ausgewähltem Raster, Malen-Werkzeug auswählen (K) & lospixeln
6. Um dem Vergessen von Stellen vorzbeugen: Ansicht > Transparenz-Raster einblenden (Umschalt+Strg+D)
7. Wenn fertig: Rechtsklick > Gruppierung aufheben
8. Objekt > Interaktiv malen > Umwandeln
9. Pathfinder > Fläche aufteilen
10. Mit dem Zauberstab die überflüssigen Pixel auswählen > Entfernen
11. Datei > Auswahl exportieren (Einstellungen nach Bedarf anpassen) > Fertig!

Spielhintergrund: Straße

Der Haupthintergrund ist die dreispurige Straße, auf der das eigentliche Spielgeschehen stattfindet. Diesbezüglich wurden variierende Pixelgrößen für den Rasen gestaltet, woraufhin sich das Team auf eine Größe festlegte. Um das im Spiel thematisierte Durchfahren des Jahres auch optisch erkennbar zu machen, erhielt das Muster am Straßenrand entsprechend der Jahreszeiten unterschiedliche Attribute entsprechend der Jahreszeiten. Diese werden durch die Büsche noch einmal aufgegriffen.

Weil sich die Mittelstreifen der einzelnen Spuren beim Zusammenspiel mit dem Programm als Irritation offenbarten, wurden sie im nächsten Schritt von der Grafik entfernt und direkt durch p5js erzeugt.

Assets: Player, Barriers & Tokens

Player — Auto, das der Spieler steuert, um Kollisionen mit Hindernissen zu vermeiden und Sonnen einzusammeln

Barrier I — Kühe in verschiedenen Farben, die zufällig auf den einzelnen Spuren erscheinen, Kollisionen ziehen ein Leben ab

Barrier II — Steine die zufällig auf den einzelnen Spuren erscheinen, Kollisionen ziehen ein Leben ab

Barrier II — Pfützen die zufällig auf den einzelnen Spuren erscheinen (Blauton abhängig vom entsprechenden Niederschlag des Datensatzes), Kollisionen ziehen ein halbes Leben ab

Lifebar — Drei Herzen, die die Leben des Spielers Symbolisieren und bei Kollisionen ihren „Füllstand“ anpassen

Sonne — Tokens, die der Spieler einsammeln muss, um Punkte zu sammeln (Größe abhängig von der Sonnenscheindauer entsprechend des Datensatzes)

Spielhintergrund: Ende

Hat der Spieler alle Leben verloren, wird ihm gemäß des Punktestandes einer von vier Urlauben präsentiert. Die zu gestaltenden Möglichkeiten wurden in der Gruppe besprochen und festgelegt.
Erreicht ein Spieler den 31.12.2018 erscheint in aller bester Silvester-Manier ein Feuerwerk, welches aus insgesamt zehn Einzelbildern animiert wurde.

Nachfolgend werden die zu gestaltenden Endscreens gezeigt:

• Strandurlaub
• Skiurlaub
• Städtereise
• Wellnes-/ Spaurlaub
• Feuerwerk

Ergebnis

Alle Komponenten (Spiel-Programm/ Code, phsysisches Lenkrad, grafische Elemente) zusammengesetzt, sind im Projekteintrag der finalen Version des Vacation Surfer zu sehen.