Differences

This shows you the differences between two versions of the page.

--- teaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 09:19] – created Felix Hardmood Beck
+++ teaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 14:16] (current) – [Teilaufgabe A – Visual Control & Variations] Felix Hardmood Beck
@@ Line 1: / Line 1: @@
 ====== 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, miteinander verglichen und gemeinsam reflektiert. Anschließend wird die jeweils nächste Teilaufgabe gestellt und bis zum folgenden Termin im Selbststudium bearbeitet. Prozess, Varianten und Ergebnisse werden kontinuierlich in der [[teaching:ba:courses:design-basics:aufgaben:dokumentationsbox|Dokumentationsbox]] festgehalten.
+Ü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 [[extras:codikon:p5js:einfuehrung_in_p5js|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 [[teaching:ba:courses:design-basics:aufgaben:dokumentationsbox|Dokumentationsbox]] festgehalten.
+<WRAP center round important 70%>
+**Dokumentation ist Teil jeder Mini-Challenge.**
+Zu jeder Teilaufgabe gehören sowohl der **Entstehungsprozess** als auch die **Endergebnisse** in die Dokumentationsbox. Ideen, Skizzen, Scribbles, handschriftliche Aufzeichnungen, Varianten, Tests und Zwischenstände sollen deshalb während der Bearbeitung gesammelt und nicht nachträglich rekonstruiert werden. Digitale Arbeitsschritte und Ergebnisse werden durch Screenshots, exportierte Bilder, einzelne Frames oder andere geeignete Ausdrucke dokumentiert. Die für die Dokumentationsbox ausgewählten Materialien müssen __ausgedruckt__ und der jeweiligen Teilaufgabe nachvollziehbar zugeordnet werden. Die Dokumentationsbox soll dadurch nicht nur zeigen, was entstanden ist, sondern auch, wie es entstanden ist.
+</WRAP>
+------
 ===== Mini-Challenge 01 – Form & Composition =====
-Wie entsteht aus einfachen Elementen eine visuelle Ausdrucksform?
+Wie lassen sich mit wenigen Formen unterschiedliche Kompositionen erzeugen und durch digitale Parameter verändern?
+==== Teilaufgabe A – Mondrian: Composition by Code ====
+Beschäftigt euch zunächst mit [[https://www.youtube.com/watch?v=4h0wYdrA70c&t=39s|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 [[extras:codikon:p5js:einfuehrung_in_p5js|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.
+==== Teilaufgabe B – Mondrian in Motion ====
-==== Teilaufgabe A – Form & Relation ====
+Verwendet eine der Kompositionen aus Teilaufgabe A und entwickelt daraus ein dynamisches und interaktives System.
-Entwickelt mit einfachen geometrischen Elementen eine Serie unterschiedlicher visueller Kompositionen. Verwendet zunächst nur wenige Elemente und untersucht gezielt das Verhältnis von Größe, Position, Abstand und Gewichtung.
+Die bisher statische Komposition soll nun auf Eingaben reagieren. Verwendet beispielsweise:
-Erstellt mehrere deutlich unterschiedliche Varianten und untersucht, wie bereits kleine Veränderungen die visuelle Wirkung einer Komposition beeinflussen.
+  * Mausposition
+  * Mausklick
+  * Tastatureingaben
-==== Teilaufgabe B – Variation & Transformation ====
+Durch diese Eingaben können Eigenschaften der Komposition verändert werden, beispielsweise:
-Wählt eine der entstandenen Kompositionen aus und entwickelt daraus eine Serie von Variationen. Verändert einzelne Parameter wie Größe, Position, Wiederholung, Rhythmus, Skalierung oder Rotation.
+  * Position
+  * Größe
+  * Farbe
+  * Flächenaufteilung
+  * Sichtbarkeit
+  * Bewegung
+  * Geschwindigkeit
-Die Grundidee soll dabei erkennbar bleiben. Untersucht, wie weit ein visuelles System verändert werden kann und trotzdem als zusammengehörige Serie wahrgenommen wird.
+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.
+------
 ===== Mini-Challenge 02 – Color & Perception =====
-Wie verändert Farbe die Wahrnehmung und Wirkung eines visuellen Systems?
+Wie beeinflussen Farbe und Wahrnehmung, was wir in einem Bild sehen?
-==== Teilaufgabe A – Color & Effect ====
-Verwendet eine bestehende oder neu entwickelte einfache Komposition und erstellt davon unterschiedliche Farbvarianten.
+==== Teilaufgabe A – RGB/CMY Layers ====
-Untersucht, wie Farbton, Sättigung, Helligkeit und unterschiedliche Farbkombinationen die Wirkung verändern. Die formale Struktur bleibt möglichst gleich, sodass die Wirkung der Farbe miteinander verglichen werden kann.
+Schaut euch zunächst die [[https://www.carnovsky.com/RGB.htm|RGB-Arbeiten]] des Künstlerduos [[https://www.carnovsky.com/works.htm|Carnovsky]] an. Untersucht, wie dort mehrere Bildmotive durch unterschiedliche Farblayer auf derselben Fläche miteinander verbunden und überlagert werden.
-==== Teilaufgabe B – Color in Context ====
+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 [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]]. Für p5.js steht außerdem ein [[extras:codikon:p5js:carnovsky|Beispielcode Carnovsky]] zur Verfügung.
-Untersucht die Wirkung von Farbe in unterschiedlichen Zusammenhängen. Verwendet gleiche oder ähnliche Farben in unterschiedlichen visuellen Umgebungen und entwickelt daraus mehrere Varianten.
+{{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_01.png?direct&120|}}
+{{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_02.png?direct&120|}}
+{{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_03.png?direct&120|}}
-Setzt Farbe gezielt ein, um unterschiedliche Wirkungen wie Aufmerksamkeit, Ruhe, Spannung, Nähe, Distanz oder Atmosphäre zu erzeugen.
+=== Drei Bilder – eine Geschichte ===
+Ü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:
-===== Mini-Challenge 03 – Typography =====
+  * 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?
-Wie kann Schrift gleichzeitig Information und visuelles Gestaltungsmittel sein?
+Durch drei zunächst unabhängige Motive soll eine gemeinsame Aussage entstehen.
-==== Teilaufgabe A – Type & Families ====
+=== Komposition entwickeln ===
-Wählt einen kurzen Text, ein Wort oder eine kleine Gruppe von Wörtern und gestaltet damit unterschiedliche typografische Varianten.
+Arbeitet anschließend an eurer Bildcollage. Untersucht unterschiedliche Möglichkeiten der Überlagerung und optimiert insbesondere:
-Experimentiert mit verschiedenen Schriftfamilien, Schriftschnitten, Größen, Laufweiten und Abständen. Der Inhalt bleibt gleich, während sich die typografische Gestaltung verändert.
+  * Position
+  * Größe
+  * Ausschnitt
+  * Überlagerung
+  * Detailgrad
+  * Farbzuordnung
+  * visuelles Gewicht der einzelnen Motive
-Vergleicht, wie stark die Wahl und Behandlung einer Schrift die Wahrnehmung desselben Inhalts beeinflussen kann.
+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.
-==== Teilaufgabe B – Type as Form ====
+=== Ergebnis ===
-Verwendet Schrift nun bewusst als visuelles Material. Experimentiert mit Größe, Gewicht, Wiederholung, Überlagerung, Ausschnitt, Rotation und Transformation.
+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.)
-Entwickelt eine Serie, bei der Schrift nicht ausschließlich gelesen, sondern ebenso als Form und visuelles Ausdrucksmittel wahrgenommen wird.
+=== Dokumentation in der DokuBox ===
+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.
+<WRAP center round important 100%>
+Zur nächsten Besprechung den ausgedruckte DIN-A3-Print sowie die ausgedruckte Prozessdokumentation in der DokuBox mitbringen.
+</WRAP>
+==== Teilaufgabe B – Sehphänomene / Optische Täuschungen ====
+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 [[https://michaelbach.de/ot/index-de.html|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 [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]] eine eigene Umsetzung des ausgewählten Phänomens.
+Für alle Arbeiten gilt dabei ein einheitliches <color /#fff200>Format von 500 × 500 px</color>!
+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.
+------
+===== Mini-Challenge 03 – Typography =====
+Wie kann ein Buchstabe gleichzeitig Information und visuelle Form sein?
+==== Teilaufgabe A – Letter as Form ====
+  * Verwenden Sie für diese Aufgabe [[extras:codikon:p5js:einfuehrung_in_p5js|P5.JS]]
+  * Wählen Sie [[extras:wissikon:typography_and_layout:typography:schriften_uebersicht|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 5x5 Elementen zusammen.
+  * Drucken Sie Ihre Gesamtkomposition auf DIN A3 aus und bringen Sie diese beim nächsten mal mit in den Unterricht. \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose2026:bsp_5x5_01.png?direct&200|}} \\ \\
+  * 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.
+==== Teilaufgabe B – Easy Interface ====
+  * 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: \\ {{:teaching:ba:courses:design-basics:sose26:bsp_interface-sketch.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:bsp_interface-sketch_1.png?direct&200|}} \\ \\
+  * 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.
+------
 ===== Mini-Challenge 04 – Generative Systems =====
-Wie kann Gestaltung durch Regeln statt durch die Platzierung einzelner Elemente entstehen?
+Wie kann Gestaltung durch Regeln und Parameter statt durch die manuelle Platzierung einzelner Elemente entstehen?
-==== Teilaufgabe A – Rules & Parameters ====
-Entwickelt mit [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]] ein einfaches visuelles System, dessen Erscheinungsbild durch wenige Regeln bestimmt wird.
+==== Teilaufgabe A – Visual Control & Variations ====
-Definiert Formen und Parameter und verwendet beispielsweise Wiederholung, Position, Größe oder Rotation. Verändert anschließend einzelne Parameter und beobachtet, wie sich dadurch das Gesamtsystem verändert.
+  * 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: \\ {{:teaching:ba:courses:design-basics:sose26:interface_test_bsp-a.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:interface_test_BSP-B2.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:interface_test_BSP-B1.png?direct&200|}}
+  * 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.
-KI-Tools können für die Erstellung und Veränderung des Codes verwendet werden. Entscheidend ist nicht, den Code vollständig selbst zu schreiben, sondern zu verstehen, welche gestalterischen Parameter das Ergebnis beeinflussen.
-==== Teilaufgabe B – Variation & Emergence ====
+==== Teilaufgabe B – Rules, Randomness & Emergence ====
-Entwickelt das entstandene System weiter. Ergänzt Variation, Zufall oder weitere Regeln und erzeugt daraus eine Serie unterschiedlicher Ergebnisse.
+Erweitert das System aus Teilaufgabe A um **Zufall und automatisierte Variation**.
-Untersucht, wie aus wenigen einfachen Regeln komplexere visuelle Strukturen entstehen können. Wählt mehrere charakteristische Ergebnisse aus und dokumentiert, durch welche Veränderungen diese entstanden sind.
+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?
+=== Dokumentation in der DokuBox ===
+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.
+------
 ===== Mini-Challenge 05 – Motion & Time =====
-Wie verändert Zeit die Wahrnehmung und Wirkung von Gestaltung?
+Wie entsteht aus einzelnen statischen Zuständen die Wahrnehmung von Bewegung?
 ==== Teilaufgabe A – Zoetrope ====
-Entwickelt eine kurze zyklische Bewegungssequenz für ein Zoetrope. Die Bewegung soll aus einer begrenzten Anzahl einzelner Bilder entstehen und sich als kontinuierlicher Loop wiederholen lassen.
+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.
+=== Dokumentation in der DokuBox ===
+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.
-Experimentiert mit der Veränderung von Form, Position, Größe oder Orientierung von Bild zu Bild. Entscheidend ist, wie aus einzelnen statischen Zuständen die Wahrnehmung einer Bewegung entsteht.
 ==== Teilaufgabe B – Principles of Animation ====
-Entwickelt eine kurze digitale Motion Study und wendet darauf ausgewählte klassische Animationsprinzipien an.
+Übertragt die Erfahrungen aus dem Zoetrop auf eine digitale Animation mit [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]].
+Wählt **mindestens zwei** klassische //[[extras:wissikon:design-development:grundlagen_der_animation|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.
+=== Dokumentation in der DokuBox ===
+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.
-Experimentiert beispielsweise mit //Timing//, //Squash & Stretch//, //Anticipation// oder //Follow Through//. Erstellt Varianten derselben grundlegenden Bewegung und untersucht, wie sich deren Charakter und Wirkung durch unterschiedliche zeitliche Gestaltung verändert.
+Ergänzt den Link zum p5.js-Sketch.
+------
 ===== Mini-Challenge 06 – Sound & Experience =====
-Wie verändert Klang die Wahrnehmung und Atmosphäre einer medialen Erfahrung?
+Wie kann Klang zu einem aktiven Bestandteil eines interaktiven digitalen Systems werden?
-==== Teilaufgabe A – Sound as Material ====
+Mit dieser Mini-Challenge beginnt eine zusammenhängende Entwicklung, die in den folgenden Mini-Challenges weitergeführt wird:
-Entwickelt eine kurze akustische Studie aus wenigen Klängen oder Geräuschen.
+<WRAP center round box 100%>
+**Sound Sketch → Game → Interactive System → Playable Facade**
+</WRAP>
+==== Teilaufgabe A – Sound Machine ====
+Entwickelt mit [[extras:codikon:p5js:einfuehrung_in_p5js|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.
+=== Dokumentation in der DokuBox ===
+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:
+<WRAP center round box 100%>
+**Input → Veränderung → Visual + Sound**
+</WRAP>
+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.
+==== Teilaufgabe B – Make it a Game ====
+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:
+<WRAP center round box 100%>
+**Was ist das Ziel? → Was kann der Spieler tun? → Welche Regeln gelten? → Wie reagiert das Spiel?**
+</WRAP>
+=== Dokumentation in der DokuBox ===
+Entwickelt die Spielidee zunächst auf Papier.
+Dokumentiert mit **Skizzen, Scribbles, Ablaufdiagrammen und kurzen Aufzeichnungen**:
-Experimentiert mit Rhythmus, Dauer, Intensität, Wiederholung, Pause und Kontrast. Erstellt unterschiedliche Varianten und untersucht, welche Atmosphäre oder Wirkung allein durch die Anordnung und Veränderung von Klang entstehen kann.
+  * Spielidee
+  * Spielziel
+  * Regeln
+  * mögliche Aktionen
+  * mögliche Reaktionen
+  * audiovisuelle Gestaltung
-==== Teilaufgabe B – Sound & Visuals ====
+Haltet unterschiedliche Entwicklungsstände des Spiels fest.
-Verbindet Klang mit einer visuellen oder zeitbasierten Arbeit. Dabei kann auf Ergebnisse vorheriger Mini-Challenges zurückgegriffen oder eine neue kurze Studie entwickelt werden.
+Druckt Screenshots bzw. charakteristische Frames des finalen Spiels aus und ergänzt eine kurze Beschreibung von Ziel, Steuerung und Regeln.
-Erstellt unterschiedliche Varianten des Zusammenspiels von Bild, Bewegung und Klang. Untersucht insbesondere, wie derselbe visuelle Inhalt durch unterschiedliche Klänge jeweils anders wahrgenommen werden kann.
+Ergänzt den Link zum p5.js-Sketch.
+------
 ===== Mini-Challenge 07 – Interaction & Response =====
-Wie wird aus einem medialen System ein System, das auf Eingaben reagiert?
+Wie kann ein einfaches Spiel durch die systematische Gestaltung von Interaktion und Feedback verbessert werden?
-==== Teilaufgabe A – Input & Interaction ====
+In dieser Mini-Challenge wird **kein neues Spiel entwickelt**. Das in Mini-Challenge 06 entstandene Spiel wird weitergeführt und gezielt untersucht.
-Entwickelt mit [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]] ein einfaches visuelles System, das auf Eingaben reagiert.
-Verwendet beispielsweise Mausposition, Mausklick oder Tastatureingaben, um Eigenschaften wie Position, Größe, Farbe, Bewegung oder Verhalten zu verändern.
+==== Teilaufgabe A – Interaction & Control ====
-Untersucht dabei den grundlegenden Zusammenhang:
+Analysiert zunächst die Interaktion eures Spiels.
+Beschreibt jede wichtige Interaktion mit dem einfachen Modell:
 <WRAP center round box 100%>
@@ Line 126: / Line 449: @@
 </WRAP>
-==== Teilaufgabe B – Reaction & Feedback ====
+Beispiel:
-Entwickelt das System aus Teilaufgabe A weiter und experimentiert mit unterschiedlichen Formen der Reaktion.
+<WRAP center round box 100%>
+**Mausklick → Prüfung, ob Objekt getroffen wurde → Objekt verschwindet + Klang wird abgespielt**
+</WRAP>
-Vergleicht beispielsweise unmittelbare und verzögerte Reaktionen oder unterschiedliche visuelle, bewegungsbasierte und auditive Antworten auf dieselbe Eingabe.
+Entwickelt anschließend mindestens **drei unterschiedliche Varianten der Steuerung bzw. Interaktion**.
-Untersucht, wie die Art der Reaktion beeinflusst, ob und wie das Verhalten des Systems verstanden und wahrgenommen wird.
+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.
+=== Dokumentation in der DokuBox ===
+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.
+==== Teilaufgabe B – Feedback & Game Feel ====
+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**.
+=== Dokumentation in der DokuBox ===
+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.
+------
 ===== Mini-Challenge 08 – Space & Mixed Media =====
-Was passiert, wenn digitale Gestaltung den Bildschirm verlässt und Teil eines physischen Raumes wird?
+Was passiert mit einem digitalen Spiel, wenn es den persönlichen Bildschirm verlässt und zu einer medialen Anwendung im öffentlichen Raum wird?
-==== Teilaufgabe A – From Screen to Space ====
+Ausgangspunkt ist das in Mini-Challenge 06 und 07 entwickelte Spiel.
-Wählt einen digitalen Inhalt und übertragt ihn in eine konkrete räumliche Situation.
+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.
-Untersucht, wie sich seine Wirkung durch Maßstab, Position, Blickwinkel, Projektionsfläche und räumlichen Kontext verändert. Entwickelt mehrere Varianten und dokumentiert diese beispielsweise mit Fotografien, Skizzen oder kurzen Videos.
+Das bisher für einen Computerbildschirm entwickelte Spiel wird nun als **öffentliche, architekturbezogene Anwendung** neu gedacht.
-==== Teilaufgabe B – Digital & Physical ====
-Entwickelt aus digitalen und physischen Elementen eine einfache //Mixed-Media//-Situation.
+==== Teilaufgabe A – From Game to Facade ====
-Kombiniert dafür beispielsweise Projektion, Bild, Typografie, Bewegung, Klang, Objekt oder Raum. Entscheidend ist nicht die technische Komplexität, sondern das bewusste Zusammenspiel der eingesetzten Medien und deren Wirkung im Raum.
+Übertragt die Grundidee eures Spiels auf die Fassade des **FIESP Building**.
-Dokumentiert neben dem finalen Ergebnis auch unterschiedliche Versuche, Veränderungen und verworfene Varianten.
+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 [[extras:codikon:p5js:einfuehrung_in_p5js|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.
+=== Dokumentation in der DokuBox ===
+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.
+==== Teilaufgabe B – Playable Facade ====
+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:
+<WRAP center round box 100%>
+**Person → Eingabe → System → Fassade → Feedback**
+</WRAP>
+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:
+<WRAP center round box 100%>
+**Sound Machine → Game → Interaction → Feedback → Facade → Public Interaction**
+</WRAP>
+=== Dokumentation in der DokuBox ===
+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.
+===== Dokumentation =====
+Die Dokumentation ist Bestandteil jeder Mini-Challenge. Alle relevanten Arbeitsschritte werden kontinuierlich in der [[teaching:ba:courses:design-basics:aufgaben:dokumentationsbox|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.
+<WRAP center round important 100%>
+**Nicht nur das Endergebnis zählt.**
+Die Dokumentationsbox soll zeigen, wie sich eine Arbeit entwickelt hat: von ersten Scribbles und Überlegungen über Experimente, Varianten und Fehlversuche bis zum finalen Ergebnis. Materialien sollten deshalb während des Arbeitsprozesses gesammelt und nicht erst am Ende des Semesters nachträglich erzeugt werden.
+</WRAP>
+Insbesondere bei den Mini-Challenges 06–08 soll nachvollziehbar bleiben, wie sich **derselbe Entwurf über mehrere Wochen verändert und weiterentwickelt**:
+<WRAP center round box 100%>
+**Sound Machine → Game → Interaction → Feedback → Facade → Public Interaction**
+</WRAP>