Mini-Challenges

Über das Semester bearbeiten die Studierenden acht aufeinander aufbauende Mini-Challenges als Hausaufgaben. Jede Mini-Challenge besteht aus zwei Teilaufgaben und erstreckt sich über zwei Wochen. Die Ergebnisse werden im seminaristischen Unterricht vorgestellt und gemeinsam reflektiert. Anschließend wird die jeweils nächste Teilaufgabe gestellt und bis zum folgenden Termin im Selbststudium bearbeitet.

Die Mini-Challenges dienen dazu, unterschiedliche gestalterische Prinzipien digitaler Medien praktisch zu untersuchen. Dabei wird p5.js über das Semester zunehmend als gestalterisches Werkzeug eingesetzt. KI-Tools können bei der Erstellung und Veränderung von Code verwendet werden. Entscheidend ist nicht, den gesamten Code selbst zu schreiben, sondern die Zusammenhänge zwischen gestalterischer Idee, Regel, Parameter, Interaktion und Ergebnis nachvollziehen und gezielt verändern zu können.

Prozess, Varianten und Ergebnisse werden kontinuierlich in der Dokumentationsbox festgehalten.

Wie lassen sich mit wenigen Formen unterschiedliche Kompositionen erzeugen und durch digitale Parameter verändern?

Beschäftigt euch zunächst mit ausgewählten Arbeiten von Piet Mondrian und untersucht, wie dort rechteckige Flächen, Linien und die Farben Rot, Gelb, Blau, Schwarz und Weiß zu unterschiedlichen Kompositionen zusammengefügt werden. Entwickelt anschließend mit p5.js eigene Kompositionen, die diese grundlegende Form- und Farbsprache als Ausgangspunkt verwenden. Es geht ausdrücklich nicht darum, ein vorhandenes Werk Mondrians nachzubauen. Stattdessen sollen die gestalterischen Prinzipien untersucht und in ein eigenes digitales System übertragen werden.

Experimentiert insbesondere mit:

• Größe und Verhältnis der Flächen
• horizontaler und vertikaler Gliederung
• Position und Abstand
• Verteilung der Farben
• Positiv- und Negativraum
• visuellem Gewicht
• Balance und Spannung

Erstellt einige unterschiedliche Varianten. Verändert dafür gezielt einzelne Parameter und beobachtet, wie bereits kleine Veränderungen die Gesamtwirkung beeinflussen. Wählt abschließend drei Varianten aus, die sich in ihrer Wirkung besonders deutlich unterscheiden, und dokumentiert kurz, wodurch diese Unterschiede entstehen. Diese drei Varianten werden in der nächsten Sitzung vorgestellt.

Dokumentiert euren Gestaltungsprozess von den ersten Überlegungen bis zum Ergebnis. In die DokuBox gehören insbesondere Skizzen, Scribbles und handschriftliche Aufzeichnungen zu möglichen Kompositionen, Ausdrucke ausgewählter Zwischenstände und Varianten sowie die drei ausgewählten finalen Kompositionen. Digitale Ergebnisse werden als Screenshots oder exportierte Bilder ausgedruckt. Ergänzt außerdem den Link zum öffentlich zugänglichen p5.js-Sketch.

Verwendet eine der Kompositionen aus Teilaufgabe A und entwickelt daraus ein dynamisches und interaktives System.

Die bisher statische Komposition soll nun auf Eingaben reagieren. Verwendet beispielsweise:

• Mausposition
• Mausklick
• Tastatureingaben

Durch diese Eingaben können Eigenschaften der Komposition verändert werden, beispielsweise:

• Position
• Größe
• Farbe
• Flächenaufteilung
• Sichtbarkeit
• Bewegung
• Geschwindigkeit

Verwendet verschiedene Formen der Veränderung – auch in Kombination. Untersucht dabei, wie aus einer statischen Komposition ein System wird, dessen Erscheinungsbild nicht mehr vollständig festgelegt ist. Dokumentiert weiterhin Eure Skizzen, Scribbles und kurzen Aufzeichnungen und haltet unterschiedliche Versuche und Zwischenstände fest. Druckt Screenshots bzw. charakteristische Frames unterschiedlicher Zustände des finalen Sketches aus. Ergänzt den Link zum p5.js-Sketch.

Wie beeinflussen Farbe und Wahrnehmung, was wir in einem Bild sehen?

Schaut euch zunächst die RGB-Arbeiten des Künstlerduos Carnovsky an. Untersucht, wie dort mehrere Bildmotive durch unterschiedliche Farblayer auf derselben Fläche miteinander verbunden und überlagert werden.

Eure Aufgabe ist es, einen DIN-A3-Ausdruck mit einer Multi-Layer-Komposition zu entwickeln, in der sich drei unterschiedliche Bildmotive überlagern. Verwendet für die einzelnen Ebenen die Farben CMY und/oder RGB. Für die Bearbeitung könnt ihr eine Software bzw. Technik eurer Wahl verwenden, beispielsweise Photoshop, GIMP, Affinity Photo oder p5.js. Für p5.js steht außerdem ein Beispielcode Carnovsky zur Verfügung.

Überlegt euch zunächst, welche Geschichte oder inhaltliche Beziehung zwischen euren drei ausgewählten Bildmotiven bestehen könnte. Die Motive sollen nicht beliebig ausgewählt werden. Ein einfaches Beispiel wäre: blauer Ozean + gelber Fisch + rote Plastikflasche. Überlegt:

• Was verbindet die drei Motive?
• Welche Geschichte entsteht durch ihre Überlagerung?
• Was wird erst durch die Kombination der Motive sichtbar?
• Funktioniert jede Farbe mit jedem Bildinhalt?
• Kann die Zuordnung einer bestimmten Farbe die Bedeutung eines Motivs unterstützen?

Durch drei zunächst unabhängige Motive soll eine gemeinsame Aussage entstehen.

Arbeitet anschließend an eurer Bildcollage. Untersucht unterschiedliche Möglichkeiten der Überlagerung und optimiert insbesondere:

• Position
• Größe
• Ausschnitt
• Überlagerung
• Detailgrad
• Farbzuordnung
• visuelles Gewicht der einzelnen Motive

Erstellt mehrere Varianten. Die drei Ebenen müssen nicht gleich stark sichtbar sein. Überlegt gezielt, welches Motiv dominant sein soll und welche Motive erst bei genauerer Betrachtung sichtbar werden. Ziel ist eine Komposition, bei der Farbe, Bildauswahl und Überlagerung gemeinsam die Aussage eurer Geschichte unterstützen.

Das finale Ergebnis ist ein DIN-A3-Ausdruck, der aus mindestens drei unterschiedlichen Bildmotiven bzw. Farbebenen besteht. Das Ergebnis wird im folgenden Seminar gemeinsam vorgestellt und besprochen. (Entsprechendes farbiges Licht ist im Lab vorhanden.)

Dokumentiert den gesamten Entwicklungsprozess. In die DokuBox gehören insbesondere:

• erste Ideen und Scribbles
• Skizzen zur Geschichte bzw. zur Beziehung der drei Motive
• Überlegungen und Aufzeichnungen zur Auswahl der Bildinhalte
• verwendetes Ausgangsmaterial
• unterschiedliche Kompositionsversuche
• Farb- und Layer-Experimente
• Screenshots von Zwischenständen
• verworfene Varianten
• ausgewählte Details und Ausschnitte
• das finale Ergebnis

Digitale Zwischenschritte werden als Screenshots oder exportierte Bilder ausgedruckt. Auch handschriftliche Skizzen, Scribbles und Aufzeichnungen gehören in die Dokumentationsbox.

Visuelle Wahrnehmung bildet die physische Realität nicht einfach neutral ab. Farbe, Helligkeit, Kontrast, Bewegung, Umgebung und räumliche Anordnung können beeinflussen, was wir wahrnehmen. Schaut euch zunächst die Sammlung visueller Phänomene und optischer Täuschungen von Michael Bach an. Wählt daraus ein Sehphänomen bzw. eine optische Täuschung aus und versucht zunächst zu verstehen, wodurch der jeweilige Effekt entsteht. Entwickelt anschließend mit p5.js eine eigene Umsetzung des ausgewählten Phänomens.

Für alle Arbeiten gilt dabei ein einheitliches Format von 500 × 500 px!

Der Sketch soll das ausgewählte Wahrnehmungsphänomen möglichst klar demonstrieren. Dabei kann die ursprüngliche Darstellung vereinfacht oder gestalterisch verändert werden, solange der zugrunde liegende Effekt erhalten bleibt.

Erstellt zusätzlich:

• einen Screenshot des finalen 500 × 500 px Sketches
• Titel des Wahrnehmungsphänomens
• eine kurze Beschreibung des Effekts
• eine kurze Erklärung, wodurch der Effekt entsteht
• Link zum p5.js-Sketch

Die Screenshots und Beschreibungen werden gesammelt und anschließend von Leonie zu einem gemeinsamen Kursplakat über Sehphänomene und optische Täuschungen zusammengeführt.

Wie auch bei den vorherigen Aufgaben wandern alle Skizzen, Diagramme, Scribbles und kurzen Aufzeichnungen in die Dokubox. Zeigt anschließend, wie ihr das Prinzip in p5.js übertragen habt. Druckt unterschiedliche Versuche und Zwischenstände sowie den finalen 500 × 500 px Screenshot aus. Ergänzt Titel und kurze Erklärung des Phänomens sowie den Link zum p5.js-Sketch.

Wie kann ein Buchstabe gleichzeitig Information und visuelle Form sein?

• Verwenden Sie für diese Aufgabe P5.JS
• Wählen Sie hier sich eine Schrift aus.
• Wählen Sie sich einen Buchstaben aus.
• Setzen Sie den Buchstaben interessant in ein quadratisches Format ein. Dabei darf der Buchstabe in der Größe, der Drehung und im Anschnitt variieren. Die verwendete Farbe muss entweder schwarz auf weiß oder weiß auf schwarz sein.
• Setzen Sie Ihre Ergebnisse in eine Gesamtkomposition von 5×5 Elementen zusammen.
• Drucken Sie Ihre Gesamtkomposition auf DIN A3 aus und bringen Sie diese beim nächsten mal mit in den Unterricht.
  
  Zur Inspiration:
  \\ 
  
• Untersucht, an welchem Punkt ein Buchstabe noch eindeutig gelesen wird und wann er zunehmend als abstrakte Form wahrgenommen wird. Die 25 Felder sollen als zusammenhängende Serie funktionieren, gleichzeitig aber möglichst unterschiedliche formale Möglichkeiten zeigen.
• Dokumentiert eure ersten typografischen Überlegungen durch Skizzen, Scribbles und handschriftliche Formstudien. Zeigt unterschiedliche Versuche mit Größe, Position, Rotation, Ausschnitt und Überlagerung. Druckt ausgewählte Zwischenstände sowie die finale 5 × 5 Matrix aus.

• Verwenden Sie für diese Aufgabe P5.JS.
• Bauen Sie auf Ihrer Gestaltung aus Aufgabe 3A auf. Nutzen Sie den dort gewählten Buchstaben, die Schrift und die Schwarz-Weiß-Gestaltung erneut.
• Entwickeln Sie für Ihren bisherigen Sketch eine einfache Benutzeroberfläche, mit der Varianten Ihrer Gestaltung erzeugt werden können. Als Interface-Elemente müssen mindestens ein Button, ein Slider und ein Toggle Switch eingesetzt werden. Alle Interface-Elemente dürfen ebenfalls nur in Schwarz und Weiß gestaltet sein. Die Bedienelemente sollen so eingesetzt werden, dass sich im Sketch sichtbare Varianten erzeugen lassen, zum Beispiel durch Veränderung von Größe, Position, Drehung, Anschnitt oder Kontrast. Die Oberfläche soll klar lesbar, logisch angeordnet und ohne Erklärung bedienbar sein. Es soll sofort erkennbar sein, was angeklickt, verschoben oder ein- und ausgeschaltet werden kann. Für die Gestaltung der Interface-Elemente darf nicht auf vorhandene Browser- oder Standard-UI-Elemente zurückgegriffen werden. Jegliche Elemente (Button, Slider und Toggle Switch, etc.) müssen vollständig selbst gestaltet und aus einfachen geometrischen Formen in P5.JS aufgebaut werden. Ziel ist es, nicht nur Bedienlogik zu verstehen, sondern auch die visuelle und formale Gestaltung von Interfaces selbst zu entwickeln.
• Die im Sketch erzeugten Varianten sollen als Bilder exportiert werden können.
  
  Zur Inspiration:
  
  
  
• Entwickelt das Interface zunächst auf Papier. In die DokuBox gehören Scribbles, Skizzen und Aufzeichnungen zur Anordnung und Funktion der Bedienelemente sowie unterschiedliche getestete Varianten. Dokumentiert das digitale Ergebnis mit ausgedruckten Screenshots verschiedener Zustände des Interfaces und ergänzt den Link zum p5.js-Sketch.

Wie kann Gestaltung durch Regeln und Parameter statt durch die manuelle Platzierung einzelner Elemente entstehen?

• Verwenden Sie für diese Aufgabe P5.JS.
• Entwickeln Sie Ihre Benutzeroberfläche aus der vorherigen Aufgabe weiter zu einem kleinen Gestaltungssystem. Erweitern Sie Ihren Sketch so, dass mit dem Interface mindestens drei klar unterscheidbare Bildvarianten oder Kompositionen erzeugt und gezielt gespeichert bzw. wieder aufgerufen werden können.
• Zusätzlich zu Button, Slider und Toggle Switch sollen die Bedienelemente nun so zusammenwirken, dass nicht nur Einzelwerte verändert werden, sondern unterschiedliche visuelle Zustände entstehen, zum Beispiel ruhig, dynamisch oder verdichtet.
• Die Benutzeroberfläche soll weiterhin vollständig selbst in P5.JS gestaltet werden und ausschließlich aus einfachen geometrischen Formen bestehen. Alle Interface-Elemente bleiben auf Schwarz und Weiß beschränkt.
• Ziel ist es, ein konsistentes visuelles und funktionales Interface zu entwickeln, das nicht nur einzelne Parameter verändert, sondern ein kleines System zur Steuerung gestalterischer Entscheidungen bildet.
• Die erzeugten Varianten sollen als Bilder exportiert und in einer nachvollziehbaren Serie präsentiert werden können.
  
  Zur Inspiration:
  
• Für die Dokubox: Haltet durch Skizzen, Scribbles, Diagramme oder kurze Aufzeichnungen fest, welche Regeln und Parameter euer System bestimmen sollen. Dokumentiert anschließend unterschiedliche Parameterkombinationen und Zwischenstände. Druckt eine Auswahl charakteristischer visueller Zustände aus und notiert jeweils, welche Parameter zu diesem Ergebnis geführt haben. Ergänzt den Link zum p5.js-Sketch.

Erweitert das System aus Teilaufgabe A um Zufall und automatisierte Variation.

Verwendet beispielsweise:

• random()
• Wiederholungen
• definierte Wertebereiche
• Wahrscheinlichkeiten
• Kombinationen unterschiedlicher Regeln

Der Zufall soll dabei nicht vollkommen beliebig eingesetzt werden. Definiert Grenzen und Regeln, innerhalb derer das System unterschiedliche Ergebnisse erzeugen darf.

Lasst euer System eine größere Anzahl von Varianten erzeugen und beobachtet, welche Ergebnisse entstehen.

Wählt anschließend mindestens zehn charakteristische Varianten aus.

Untersucht:

• Welche Eigenschaften bleiben konstant?
• Welche Eigenschaften verändern sich?
• Wann wirken die Ergebnisse noch wie Teile desselben Systems?
• Wann wird Zufall beliebig?
• Können unerwartete, aber gestalterisch interessante Ergebnisse entstehen?

Dokumentiert die Regeln und Grenzen eures generativen Systems durch Skizzen, Scribbles, Diagramme und kurze Aufzeichnungen.

Sammelt auch unerwartete, fehlerhafte oder verworfene Ergebnisse. Druckt mindestens zehn charakteristische generierte Varianten aus und kennzeichnet, warum ihr diese ausgewählt habt.

Ergänzt den Link zum p5.js-Sketch.

Wie entsteht aus einzelnen statischen Zuständen die Wahrnehmung von Bewegung?

Entwickelt eine kurze zyklische Bewegungssequenz für ein Zoetrop.

Die Bewegung soll aus einer begrenzten Anzahl einzelner Bilder bestehen und so gestaltet sein, dass das letzte Bild wieder sinnvoll in das erste übergeht.

Beginnt mit einer einfachen Bewegung. Verändert beispielsweise:

• Position
• Größe
• Form
• Orientierung
• Rotation
• Verformung

Plant die Bewegung zunächst als einzelne Zustände. Achtet darauf, wie groß die Veränderung zwischen zwei aufeinanderfolgenden Bildern ist.

Übertragt die Sequenz anschließend auf die vorgegebene Zoetrop-Vorlage und testet sie im Zoetrop.

Überarbeitet eure Sequenz nach dem ersten Test mindestens einmal.

Untersucht insbesondere, warum einzelne statische Bilder bei schneller Wiederholung als kontinuierliche Bewegung wahrgenommen werden.

Der Entwicklungsprozess ist bei dieser Aufgabe besonders wichtig.

In die DokuBox gehören:

• erste Bewegungsskizzen und Scribbles
• Überlegungen zum Ablauf der Bewegung
• einzelne gezeichnete Zustände bzw. Frames
• erste Sequenz
• Dokumentation des ersten Tests
• Überarbeitung nach dem Test
• finale Bildsequenz
• geeignete Fotos bzw. Ausdrucke des fertigen Zoetrops

Alle digitalen Zwischenschritte und Ergebnisse werden in geeigneter Form ausgedruckt.

Übertragt die Erfahrungen aus dem Zoetrop auf eine digitale Animation mit p5.js.

Wählt mindestens zwei klassische Principles of Animation aus, beispielsweise:

• Timing
• Squash & Stretch
• Anticipation
• Follow Through

Entwickelt eine einfache Bewegung und erstellt davon unterschiedliche Varianten.

Die grundlegende Handlung soll möglichst gleich bleiben. Verändert stattdessen gezielt die Animation.

Beispielsweise kann ein Kreis:

• fallen
• springen
• beschleunigen
• abbremsen
• auf eine Fläche treffen
• sich dabei verformen

Vergleicht anschließend die unterschiedlichen Varianten.

Untersucht, wie stark Timing, Beschleunigung, Verformung und Vor- bzw. Nachbewegung den Charakter einer ansonsten identischen Bewegung verändern können.

Plant die Bewegung zunächst durch Skizzen, Scribbles, Bewegungsabläufe oder ein einfaches Storyboard.

Dokumentiert anschließend verschiedene Versuche mit Timing und den ausgewählten Animationsprinzipien.

Druckt charakteristische Frames der unterschiedlichen Varianten aus, sodass die Veränderungen auch außerhalb des laufenden Sketches nachvollziehbar werden.

Ergänzt den Link zum p5.js-Sketch.

Wie kann Klang zu einem aktiven Bestandteil eines interaktiven digitalen Systems werden?

Mit dieser Mini-Challenge beginnt eine zusammenhängende Entwicklung, die in den folgenden Mini-Challenges weitergeführt wird:

Entwickelt mit p5.js einen kleinen interaktiven Sketch, in dem Bild, Bewegung und Klang miteinander verbunden sind.

Der Sketch soll nicht einfach eine Animation mit Hintergrundmusik sein. Visuelle und auditive Ereignisse sollen sich gegenseitig beeinflussen.

Verwendet Eingaben wie beispielsweise:

• Mausposition
• Mausklick
• Tastatur

Diese können unterschiedliche audiovisuelle Parameter beeinflussen:

• Tonhöhe
• Lautstärke
• Rhythmus
• Dauer
• Wiederholung
• Geschwindigkeit
• Position
• Größe
• Farbe
• Bewegung

Beispielsweise könnte die vertikale Mausposition die Tonhöhe verändern, ein Klick ein audiovisuelles Ereignis auslösen oder die Bewegung eines Objekts einen Klang erzeugen.

Entwickelt zunächst mehrere kleine Experimente und entscheidet euch anschließend für ein System, das ihr weiterentwickelt.

Wichtig ist ein nachvollziehbarer Zusammenhang zwischen Interaktion, visueller Veränderung und Klang.

Dieser Sketch bildet die technische und gestalterische Grundlage für die folgenden Aufgaben.

Haltet zunächst durch Skizzen, Scribbles, Diagramme und handschriftliche Aufzeichnungen fest, wie Eingabe, Bild, Bewegung und Klang miteinander verbunden werden sollen.

Eine einfache Darstellung kann beispielsweise zeigen:

Dokumentiert Experimente, Zwischenstände und verworfene Ansätze.

Druckt Screenshots bzw. charakteristische Frames des finalen Sketches aus und ergänzt kurze Beschreibungen der verwendeten Klänge und Interaktionen.

Ergänzt den Link zum p5.js-Sketch.

Entwickelt aus der Sound Machine aus Teilaufgabe A ein kleines spielbares System.

Erfindet dafür keine vollständig neue Anwendung. Verwendet die vorhandenen visuellen Elemente, Bewegungen, Interaktionen und Klänge und ergänzt diese um eine einfache Spielidee.

Euer Spiel benötigt mindestens:

• ein verständliches Ziel
• eine oder mehrere Regeln
• eine Eingabemöglichkeit
• eine Reaktion auf die Eingabe
• eine Form von Erfolg, Misserfolg oder Fortschritt
• visuelles und auditives Feedback

Das Spiel kann sehr einfach sein. Beispielsweise kann etwas:

• getroffen
• gesammelt
• vermieden
• bewegt
• sortiert
• verfolgt
• synchronisiert

werden.

Entscheidend ist nicht die Komplexität des Spiels, sondern die Frage, wie Regeln, Interaktion, Bild, Bewegung und Klang gemeinsam eine verständliche Erfahrung erzeugen.

Beschreibt eure Spielidee zunächst anhand von vier Fragen:

Entwickelt die Spielidee zunächst auf Papier.

Dokumentiert mit Skizzen, Scribbles, Ablaufdiagrammen und kurzen Aufzeichnungen:

• Spielidee
• Spielziel
• Regeln
• mögliche Aktionen
• mögliche Reaktionen
• audiovisuelle Gestaltung

Haltet unterschiedliche Entwicklungsstände des Spiels fest.

Druckt Screenshots bzw. charakteristische Frames des finalen Spiels aus und ergänzt eine kurze Beschreibung von Ziel, Steuerung und Regeln.

Ergänzt den Link zum p5.js-Sketch.

Wie kann ein einfaches Spiel durch die systematische Gestaltung von Interaktion und Feedback verbessert werden?

In dieser Mini-Challenge wird kein neues Spiel entwickelt. Das in Mini-Challenge 06 entstandene Spiel wird weitergeführt und gezielt untersucht.

Analysiert zunächst die Interaktion eures Spiels.

Beschreibt jede wichtige Interaktion mit dem einfachen Modell:

Beispiel:

Entwickelt anschließend mindestens drei unterschiedliche Varianten der Steuerung bzw. Interaktion.

Untersucht beispielsweise:

• Mausposition
• Mausklick
• Tastatur
• gedrückt halten
• wiederholte Eingaben
• Geschwindigkeit einer Eingabe
• Kombination mehrerer Eingaben

Vergleicht die Varianten miteinander.

Welche Steuerung ist unmittelbar verständlich? Welche erzeugt interessante Schwierigkeiten? Welche verändert den Charakter des Spiels?

Entscheidet euch anschließend begründet für eine Variante und integriert diese in das Spiel.

Analysiert und plant die Interaktion zunächst durch Skizzen, Scribbles und einfache Input–Process–Output-Diagramme.

Dokumentiert die mindestens drei untersuchten Steuerungsvarianten und haltet fest, welche Beobachtungen ihr dabei gemacht habt.

Druckt Screenshots bzw. charakteristische Zustände der Varianten und der ausgewählten finalen Lösung aus.

Ergänzt den Link zum p5.js-Sketch.

Konzentriert euch nun darauf, wie das Spiel auf die Aktionen der Spieler*innen reagiert.

Ein identisches Ereignis kann auf sehr unterschiedliche Weise kommuniziert werden.

Beispielsweise kann ein Treffer beantwortet werden durch:

• Farbwechsel
• Größenänderung
• Bewegung
• kurze Animation
• Partikel
• Verformung
• Klang
• Veränderung der Geschwindigkeit
• Verzögerung
• Kombination mehrerer Reaktionen

Entwickelt für mindestens ein zentrales Ereignis drei unterschiedliche Feedback-Varianten.

Vergleicht deren Wirkung.

Untersucht insbesondere:

• Ist verständlich, was passiert ist?
• Wie schnell erfolgt die Reaktion?
• Wie stark muss Feedback sein?
• Welche Rolle spielt Sound?
• Wann unterstützt Animation das Verständnis?
• Wann wird Feedback störend oder übertrieben?

Übertragt anschließend die überzeugendsten Lösungen auf das gesamte Spiel.

Das Ergebnis dieser Mini-Challenge ist eine überarbeitete Version des Spiels mit bewusst gestalteter Interaktion und audiovisuellem Feedback.

Entwickelt unterschiedliche Feedback-Ideen zunächst mit Scribbles, Bewegungszeichnungen, kleinen Storyboards und handschriftlichen Notizen.

Dokumentiert die mindestens drei getesteten Feedback-Varianten.

Druckt geeignete Screenshots oder einzelne Frames aus, anhand derer die Unterschiede nachvollziehbar werden.

Haltet außerdem kurz fest, welche Variante ausgewählt wurde und warum.

Ergänzt den Link zum p5.js-Sketch.

Was passiert mit einem digitalen Spiel, wenn es den persönlichen Bildschirm verlässt und zu einer medialen Anwendung im öffentlichen Raum wird?

Ausgangspunkt ist das in Mini-Challenge 06 und 07 entwickelte Spiel.

Als neuer Kontext dient die Medienfassade des FIESP Building in São Paulo, die im Rahmen des FILE – Electronic Language International Festival für großformatige digitale und interaktive Medienarbeiten genutzt wurde.

Das bisher für einen Computerbildschirm entwickelte Spiel wird nun als öffentliche, architekturbezogene Anwendung neu gedacht.

Übertragt die Grundidee eures Spiels auf die Fassade des FIESP Building.

Analysiert zunächst, welche Bestandteile des bisherigen Spiels auch auf einer großen Fassade funktionieren könnten.

Berücksichtigt dabei insbesondere:

• Größe der Darstellung
• Entfernung der Betrachter*innen
• einfache und deutlich erkennbare Formen
• starke visuelle Kontraste
• Geschwindigkeit von Bewegungen
• Lesbarkeit von Veränderungen
• Verhältnis von Gestaltung und Architektur
• Sichtbarkeit im öffentlichen Raum

Reduziert oder verändert euer Spiel, wenn dies für den neuen Kontext notwendig ist.

Entwickelt anschließend mit p5.js eine Simulation der Fassadenanwendung.

Dabei soll der p5.js-Sketch nicht einfach das bisherige Spiel auf einer anderen Fläche darstellen. Gestaltet eine Version, die ausdrücklich für eine große architektonische Medienfläche gedacht ist.

Untersucht mehrere Varianten:

• Wie groß müssen Spielelemente werden?
• Welche Details können entfallen?
• Welche Bewegungen funktionieren aus großer Entfernung?
• Welche Rolle spielt die Form der Fassade?
• Welche Inhalte funktionieren noch, wenn sie nur wenige Sekunden betrachtet werden?

Dokumentiert die Entwicklung vom ursprünglichen Spiel zur Fassadenversion.

Dokumentiert die Übertragung vom Bildschirm auf die Architektur ausführlich.

In die DokuBox gehören insbesondere:

• Skizzen und Scribbles zur Fassadenidee
• Studien zur Position der Inhalte
• Größen- und Maßstabsstudien
• Überlegungen zu Sichtweite und Betrachtungsstandpunkt
• unterschiedliche Fassadenvarianten
• verworfene Lösungen
• Screenshots der p5.js-Simulation
• charakteristische Frames
• Vergleich zwischen ursprünglichem Spiel und Fassadenversion

Alle relevanten digitalen Zwischenstände und Endergebnisse werden ausgedruckt.

Ergänzt den Link zum p5.js-Sketch.

Entwickelt aus der Fassadenversion eine interaktive Anwendung für den öffentlichen Raum.

Denkt nun nicht mehr ausschließlich über den Inhalt auf der Fassade nach, sondern über die gesamte Situation:

Definiert zunächst:

• Wo befinden sich die Spieler*innen?
• Von wo aus betrachten sie die Fassade?
• Wie starten sie die Anwendung?
• Wie geben sie etwas ein?
• Spielen eine oder mehrere Personen?
• Was passiert auf der Fassade?
• Wie erkennen Spieler*innen, dass das System auf sie reagiert?
• Wie endet die Interaktion?
• Was sehen Menschen, die nur zufällig vorbeikommen?

Die technische Umsetzung der realen Eingabegeräte muss nicht gebaut werden. Sie darf konzeptionell angenommen und im p5.js-Sketch simuliert werden.

Beispielsweise könnte eine spätere reale Anwendung gesteuert werden durch:

• Smartphone
• Kamera
• Bewegung
• Mikrofon
• Taster
• Sensor
• eine andere öffentliche Schnittstelle

Im p5.js-Prototyp können diese Eingaben zunächst durch Maus und Tastatur simuliert werden.

Entwickelt anschließend eine finale Simulation eurer Playable Facade.

Erstellt zusätzlich mindestens ein Mock-up, das zeigt, wie eure Anwendung auf der realen Architektur des FIESP Building aussehen würde.

Die finale Dokumentation soll nachvollziehbar zeigen, wie sich die ursprüngliche Idee entwickelt hat:

Dokumentiert das finale Interaktionskonzept von den ersten Überlegungen bis zur fertigen Anwendung.

Verwendet insbesondere:

• Skizzen und Scribbles
• Lage- bzw. Situationsskizzen
• Skizzen der Spieler*innen und ihrer Position zur Fassade
• Ablaufdiagramme
• kleine Storyboards
• Überlegungen zur Eingabe
• Überlegungen zum Feedback
• unterschiedliche Entwurfsvarianten
• verworfene Ansätze
• Screenshots und charakteristische Frames
• Fassaden-Mock-ups

Alle relevanten digitalen Zwischenschritte und Endergebnisse werden ausgedruckt und in die DokuBox aufgenommen.

Das finale Fassaden-Mock-up wird ebenfalls ausgedruckt.

Ergänzt den Link zum finalen p5.js-Sketch.

Die Dokumentation ist Bestandteil jeder Mini-Challenge. Alle relevanten Arbeitsschritte werden kontinuierlich in der Dokumentationsbox gesammelt.

Die DokuBox soll sowohl den Entstehungsprozess als auch die Ergebnisse zeigen. Besonders wichtig sind deshalb Materialien, die während der tatsächlichen Bearbeitung einer Aufgabe entstehen.

Dazu gehören beispielsweise:

• erste Ideen und handschriftliche Aufzeichnungen
• Skizzen und Scribbles
• Form-, Farb-, Bewegungs- und Interaktionsstudien
• Storyboards und Ablaufdiagramme
• Referenzen
• unterschiedliche Varianten
• Tests und Experimente
• Fehler und unerwartete Ergebnisse
• verworfene Ansätze
• Veränderungen nach Besprechungen
• Screenshots und exportierte Bilder
• einzelne Frames aus Animationen
• ausgewählte Zwischenstände
• finale Ergebnisse

Digitale Arbeitsschritte und Ergebnisse müssen in geeigneter Form ausgedruckt und in die DokuBox aufgenommen werden. Bei zeitbasierten oder interaktiven Arbeiten sollen mehrere charakteristische Frames bzw. Zustände ausgewählt werden, sodass die Entwicklung und Funktionsweise auch in der gedruckten Dokumentation nachvollziehbar bleibt.

Bei p5.js-Arbeiten wird zusätzlich der Link zum jeweiligen Sketch dokumentiert.

Insbesondere bei den Mini-Challenges 06–08 soll nachvollziehbar bleiben, wie sich derselbe Entwurf über mehrere Wochen verändert und weiterentwickelt: