Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools

Trace:
teaching:ba:create:ct102:semester-schedule:mini-challenges

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
teaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 13:43] – [Mini-Challenges] Felix Hardmood Beckteaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 14:16] (current) – [Teilaufgabe A – Visual Control & Variations] Felix Hardmood Beck
Line 10: Line 10:
 **Dokumentation ist Teil jeder Mini-Challenge.** **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. +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.
- +
-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> </WRAP>
  
 +------
  
 ===== Mini-Challenge 01 – Form & Composition ===== ===== Mini-Challenge 01 – Form & Composition =====
Line 25: Line 22:
 ==== Teilaufgabe A – Mondrian: Composition by Code ==== ==== Teilaufgabe A – Mondrian: Composition by Code ====
  
-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. +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.
- +
-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: Experimentiert insbesondere mit:
Line 39: Line 34:
   * Balance und Spannung   * Balance und Spannung
  
-Erstellt **mindestens zehn deutlich unterschiedliche Varianten**. Verändert dafür gezielt einzelne Parameter und beobachtet, wie bereits kleine Veränderungen die Gesamtwirkung beeinflussen.+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.
  
-Wählt abschließend drei Varianten aus, die sich in ihrer Wirkung besonders deutlich unterscheiden, und dokumentiert kurz, wodurch diese Unterschiede entstehen. +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.
- +
-=== Dokumentation in der DokuBox === +
- +
-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 p5.js-Sketch.+
  
  
 ==== Teilaufgabe B – Mondrian in Motion ==== ==== Teilaufgabe B – Mondrian in Motion ====
  
-Verwendet eine der Kompositionen aus Teilaufgabe A und entwickelt daraus ein **dynamisches und interaktives System**.+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: Die bisher statische Komposition soll nun auf Eingaben reagieren. Verwendet beispielsweise:
Line 70: Line 59:
   * Geschwindigkeit   * Geschwindigkeit
  
-Verwendet **mindestens drei unterschiedliche Formen der Veränderung**. +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.
- +
-Untersucht dabei, wie aus einer statischen Komposition ein System wird, dessen Erscheinungsbild nicht mehr vollständig festgelegt ist. Die grundlegende gestalterische Idee aus Teilaufgabe A soll weiterhin erkennbar bleiben. +
- +
-=== Dokumentation in der DokuBox === +
- +
-Dokumentiert zunächst mit **Skizzen, Scribbles und kurzen Aufzeichnungen**, welche Elemente sich verändern sollen und welche Eingaben diese Veränderungen auslösen. +
- +
-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 ===== ===== Mini-Challenge 02 – Color & Perception =====
  
Line 90: Line 72:
 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. 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.
  
-Eure Aufgabe ist es, ein **DIN-A3-Plakat mit einer Multi-Layer-Komposition** zu entwickeln, in der sich **drei unterschiedliche Bildmotive** überlagern. +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.
- +
-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.+
  
 {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_01.png?direct&120|}} {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_01.png?direct&120|}}
Line 100: Line 80:
 === Drei Bilder – eine Geschichte === === Drei Bilder – eine Geschichte ===
  
-Überlegt euch zunächst, welche **Geschichte oder inhaltliche Beziehung** zwischen euren drei ausgewählten Bildmotiven bestehen könnte. +Ü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:
- +
-Die Motive sollen nicht beliebig ausgewählt werden. Überlegt:+
  
   * Was verbindet die drei Motive?   * Was verbindet die drei Motive?
Line 110: Line 88:
   * Kann die Zuordnung einer bestimmten Farbe die Bedeutung eines Motivs unterstützen?   * Kann die Zuordnung einer bestimmten Farbe die Bedeutung eines Motivs unterstützen?
  
-Ein einfaches Beispiel wäre: +Durch drei zunächst unabhängige Motive soll eine gemeinsame Aussage entstehen.
- +
-<WRAP center round box 100%> +
-**blauer Ozean + gelber Fisch + rote Plastikflasche** +
-</WRAP> +
- +
-Hier entsteht durch drei zunächst unabhängige Motive eine gemeinsame Aussage.+
  
 === Komposition entwickeln === === Komposition entwickeln ===
Line 130: Line 102:
   * visuelles Gewicht der einzelnen Motive   * 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. +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.
- +
-Ziel ist eine Komposition, bei der **Farbe, Bildauswahl und Überlagerung gemeinsam die Aussage eurer Geschichte unterstützen**.+
  
 === Ergebnis === === Ergebnis ===
  
-Das finale Ergebnis ist ein **DIN-A3-Plakat**, das aus mindestens drei unterschiedlichen Bildmotiven bzw. Farbebenen besteht. +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.)
- +
-Das Plakat wird **in DIN A3 ausgedruckt** und im folgenden Seminar gemeinsam vorgestellt und besprochen.+
  
 === Dokumentation in der DokuBox === === Dokumentation in der DokuBox ===
Line 144: Line 112:
 Dokumentiert den gesamten Entwicklungsprozess. In die DokuBox gehören insbesondere: Dokumentiert den gesamten Entwicklungsprozess. In die DokuBox gehören insbesondere:
  
-  * erste Ideen und **Scribbles**+  * erste Ideen und Scribbles
   * Skizzen zur Geschichte bzw. zur Beziehung der drei Motive   * Skizzen zur Geschichte bzw. zur Beziehung der drei Motive
   * Überlegungen und Aufzeichnungen zur Auswahl der Bildinhalte   * Überlegungen und Aufzeichnungen zur Auswahl der Bildinhalte
Line 155: Line 123:
   * das finale Ergebnis   * das finale Ergebnis
  
-Digitale Zwischenschritte werden als **Screenshots oder exportierte Bilder ausgedruckt**. Auch handschriftliche Skizzen, Scribbles und Aufzeichnungen gehören in die Dokumentationsbox.+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%> <WRAP center round important 100%>
-**Zur nächsten Besprechung mitbringen:** das ausgedruckte DIN-A3-Plakat sowie die ausgedruckte Prozessdokumentation in der DokuBox.+Zur nächsten Besprechung den ausgedruckte DIN-A3-Print sowie die ausgedruckte Prozessdokumentation in der DokuBox mitbringen.
 </WRAP> </WRAP>
  
Line 164: Line 132:
 ==== Teilaufgabe B – Sehphänomene / Optische Täuschungen ==== ==== 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.+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.
  
-Schaut euch zunächst die Sammlung visueller Phänomene und optischer Täuschungen von **Michael Bach** an: +Für alle Arbeiten gilt dabei ein einheitliches <color /#fff200>Format von 500 × 500 px</color>!
- +
-[[https://michaelbach.de/ot/index-de.html|Optische Täuschungen und Sehphänomene – Michael Bach]] +
- +
-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 ein einheitliches Format: +
- +
-<WRAP center round box 100%> +
-**Canvas: 500 × 500 px** +
-</WRAP>+
  
 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. 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.
Line 190: Line 146:
   * Link zum p5.js-Sketch   * Link zum p5.js-Sketch
  
-Die Screenshots und Beschreibungen werden gesammelt und anschließend zu einem gemeinsamen Kursplakat über **Sehphänomene und optische Täuschungen** zusammengeführt. +Die Screenshots und Beschreibungen werden gesammelt und anschließend von Leonie zu einem gemeinsamen Kursplakat über Sehphänomene und optische Täuschungen zusammengeführt.
- +
-=== Dokumentation in der DokuBox === +
- +
-Dokumentiert zunächst das ausgewählte Wahrnehmungsphänomen mit eigenen **Skizzen, Diagrammen, Scribbles und kurzen Aufzeichnungen**. +
- +
-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 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 ===== ===== Mini-Challenge 03 – Typography =====
  
Line 208: Line 159:
 ==== Teilaufgabe A – Letter as Form ==== ==== Teilaufgabe A – Letter as Form ====
  
-Wählt **einen Buchstaben** und **eine Schriftart** aus. +  * 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. 
-Entwickelt aus diesem Buchstaben eine Serie von **25 unterschiedlichen Varianten** und ordnet diese in einer **5 × 5 Matrix** an. +  * 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. 
-Arbeitet ausschließlich in **Schwarz und Weiß**. +  * 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|}} \\ \\  
-Der Buchstabe bleibt grundsätzlich derselbe. Verändert jedoch seine formalen Eigenschaften, beispielsweise: +  * 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.
-  * Größe +
-  * Position +
-  * Rotation +
-  * Ausschnitt +
-  * Anschnitt +
-  * Wiederholung +
-  * Überlagerung +
-  * Positiv- und Negativform +
- +
-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. +
- +
-=== Dokumentation in der DokuBox === +
- +
-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 ==== ==== Teilaufgabe B – Easy Interface ====
  
-Übertragt die Buchstabenstudie aus Teilaufgabe A in einen interaktiven [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]]-Sketch. +  * 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. 
-Entwickelt ein **einfaches eigenes Interface**, über das Eigenschaften des Buchstabens verändert werden können. +  * 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|}} \\ \\  
-Verwendet beispielsweise: +  * 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.
- +
-  * Button +
-  * Slider +
-  * Toggle +
-  * Mausposition +
-  * Tastatureingabe +
- +
-Steuerbar könnten beispielsweise sein: +
- +
-  * Größe +
-  * Rotation +
-  * Position +
-  * Anzahl +
-  * Abstand +
-  * Überlagerung +
- +
-Das Interface soll bewusst einfach gestaltet werden und sich visuell auf die schwarz-weiße Formensprache aus Teilaufgabe A beziehen. +
- +
-Untersucht dabei die Frage, wie aus einer festen Gestaltung ein **steuerbares visuelles System** wird. +
- +
-=== Dokumentation in der DokuBox === +
- +
-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 ===== ===== Mini-Challenge 04 – Generative Systems =====
  
Line 277: Line 184:
 ==== Teilaufgabe A – Visual Control & Variations ==== ==== Teilaufgabe A – Visual Control & Variations ====
  
-Entwickelt das System aus Mini-Challenge 03 weiter. +  * 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. 
-Die visuellen Eigenschaften sollen nun nicht mehr ausschließlich einzeln verändert werden. Entwickelt stattdessen Regeln und Parameter, durch deren Veränderung **unterschiedliche visuelle Zustände** entstehen. +  * 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. 
-Mögliche Parameter sind beispielsweise: +  * 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|}} 
-  * Anzahl +  * 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.
-  * Größe +
-  * Position +
-  * Rotation +
-  * Abstand +
-  * Wiederholung +
-  * Geschwindigkeit +
-  * Dichte +
- +
-Entwickelt mit [[extras:codikon:p5js:einfuehrung_in_p5js|p5.js]] ein System, das aus einer gemeinsamen gestalterischen Grundidee deutlich unterschiedliche Varianten erzeugen kann. +
- +
-Erstellt mehrere charakteristische Zustände und dokumentiert, welche Parameter jeweils verändert wurden. +
- +
-Ziel ist es, nicht mehr einzelne Ergebnisse zu gestalten, sondern die **Regeln zu gestalten, durch die Ergebnisse entstehen**. +
- +
-=== Dokumentation in der DokuBox === +
- +
-Haltet zunächst 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.+
  
  
Line 342: Line 228:
  
  
 +------
 ===== Mini-Challenge 05 – Motion & Time ===== ===== Mini-Challenge 05 – Motion & Time =====
  
Line 427: Line 314:
  
  
 +------
 ===== Mini-Challenge 06 – Sound & Experience ===== ===== Mini-Challenge 06 – Sound & Experience =====
  
Line 543: Line 431:
  
  
 +------
 ===== Mini-Challenge 07 – Interaction & Response ===== ===== Mini-Challenge 07 – Interaction & Response =====
  
Line 644: Line 533:
  
  
 +------
 ===== Mini-Challenge 08 – Space & Mixed Media ===== ===== Mini-Challenge 08 – Space & Mixed Media =====
  
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/teaching/ba/create/ct102/semester-schedule/mini-challenges.1789825392.txt.gz · Last modified: by Felix Hardmood Beck