teaching:ba:create:ct102:semester-schedule:mini-challenges
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| teaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 13:55] – [Teilaufgabe A – Mondrian: Composition by Code] 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 41: | Line 41: | ||
| ==== 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 59: | Line 59: | ||
| * Geschwindigkeit | * Geschwindigkeit | ||
| - | Verwendet | + | Verwendet |
| - | + | ||
| - | 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 | + | |
| - | + | ||
| - | === Dokumentation in der DokuBox === | + | |
| - | + | ||
| - | Dokumentiert zunächst mit **Skizzen, Scribbles und kurzen Aufzeichnungen**, welche Elemente sich verändern sollen | + | |
| - | + | ||
| - | Haltet | + | |
| Line 80: | Line 72: | ||
| Schaut euch zunächst die [[https:// | Schaut euch zunächst die [[https:// | ||
| - | Eure Aufgabe ist es, ein **DIN-A3-Plakat | + | Eure Aufgabe ist es, einen DIN-A3-Ausdruck |
| - | + | ||
| - | Verwendet für die einzelnen Ebenen die Farben | + | |
| {{: | {{: | ||
| Line 90: | Line 80: | ||
| === Drei Bilder – eine Geschichte === | === Drei Bilder – eine Geschichte === | ||
| - | Überlegt euch zunächst, welche | + | Ü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 100: | 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 |
| - | + | ||
| - | <WRAP center round box 100%> | + | |
| - | **blauer Ozean + gelber Fisch + rote Plastikflasche** | + | |
| - | </ | + | |
| - | + | ||
| - | Hier entsteht durch drei zunächst unabhängige Motive eine gemeinsame Aussage. | + | |
| === Komposition entwickeln === | === Komposition entwickeln === | ||
| Line 120: | 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, |
| - | + | ||
| - | Ziel ist eine Komposition, | + | |
| === 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 |
| - | + | ||
| - | Das Plakat | + | |
| === Dokumentation in der DokuBox === | === Dokumentation in der DokuBox === | ||
| Line 134: | 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 145: | 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 | + | Zur nächsten Besprechung |
| </ | </ | ||
| Line 154: | 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, | + | Visuelle Wahrnehmung bildet die physische Realität nicht einfach neutral ab. Farbe, Helligkeit, Kontrast, Bewegung, Umgebung und räumliche Anordnung können beeinflussen, |
| - | 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:// | + | |
| - | + | ||
| - | 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: | + | |
| - | + | ||
| - | Für alle Arbeiten gilt ein einheitliches | + | |
| - | + | ||
| - | <WRAP center round box 100%> | + | |
| - | **Canvas: | + | |
| - | </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 180: | 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 |
| - | === Dokumentation in der DokuBox === | + | Wie auch bei den vorherigen Aufgaben wandern alle Skizzen, |
| - | + | ||
| - | Dokumentiert zunächst das ausgewählte Wahrnehmungsphänomen mit eigenen **Skizzen, | + | |
| - | + | ||
| - | Zeigt anschließend, | + | |
| - | + | ||
| - | Ergänzt Titel und kurze Erklärung des Phänomens sowie den Link zum p5.js-Sketch. | + | |
| Line 199: | Line 159: | ||
| ==== Teilaufgabe A – Letter as Form ==== | ==== Teilaufgabe A – Letter as Form ==== | ||
| - | Wählt | + | |
| - | + | | |
| - | Entwickelt aus diesem | + | |
| - | + | * Setzen Sie den Buchstaben | |
| - | Arbeitet ausschließlich | + | * 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: | |
| - | Der Buchstabe bleibt grundsätzlich derselbe. Verändert jedoch seine formalen Eigenschaften, | + | * 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, |
| - | + | | |
| - | * 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, | + | |
| - | + | ||
| - | === 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 | + | |
| - | + | ||
| ==== Teilaufgabe B – Easy Interface ==== | ==== Teilaufgabe B – Easy Interface ==== | ||
| - | Übertragt die Buchstabenstudie | + | * Verwenden Sie für diese Aufgabe P5.JS. |
| - | + | * Bauen Sie auf Ihrer Gestaltung | |
| - | Entwickelt ein **einfaches eigenes Interface**, über das Eigenschaften des Buchstabens verändert | + | * Entwickeln Sie für Ihren bisherigen Sketch eine einfache Benutzeroberfläche, mit der Varianten Ihrer Gestaltung erzeugt |
| - | + | * Die im Sketch erzeugten Varianten sollen als Bilder exportiert werden können. | |
| - | Verwendet beispielsweise: | + | |
| - | + | ||
| - | * Button | + | |
| - | * Slider | + | |
| - | * Toggle | + | |
| - | * Mausposition | + | |
| - | * Tastatureingabe | + | |
| - | + | ||
| - | Steuerbar könnten beispielsweise | + | |
| - | + | ||
| - | * Größe | + | |
| - | * Rotation | + | |
| - | * Position | + | |
| - | * Anzahl | + | |
| - | * Abstand | + | |
| - | * Überlagerung | + | |
| - | + | ||
| - | Das Interface | + | |
| - | + | ||
| - | Untersucht dabei die Frage, wie aus einer festen | + | |
| - | + | ||
| - | === Dokumentation in der DokuBox === | + | |
| - | + | ||
| - | Entwickelt das Interface zunächst auf Papier. In die DokuBox gehören | + | |
| - | + | ||
| - | Dokumentiert das digitale Ergebnis mit ausgedruckten Screenshots verschiedener Zustände des Interfaces und ergänzt den Link zum p5.js-Sketch. | + | |
| Line 269: | Line 184: | ||
| ==== Teilaufgabe A – Visual Control & Variations ==== | ==== Teilaufgabe A – Visual Control & Variations ==== | ||
| - | Entwickelt das System | + | * Verwenden Sie für diese Aufgabe P5.JS. |
| - | + | * Entwickeln Sie Ihre Benutzeroberfläche | |
| - | Die visuellen Eigenschaften | + | * Zusätzlich zu Button, Slider und Toggle Switch |
| - | + | * Die Benutzeroberfläche soll weiterhin vollständig selbst in P5.JS gestaltet werden und ausschließlich | |
| - | Mögliche Parameter sind beispielsweise: | + | |
| - | + | * Die erzeugten Varianten sollen als Bilder exportiert und in einer nachvollziehbaren Serie präsentiert werden können. | |
| - | * Anzahl | + | * Für die Dokubox: |
| - | * Größe | + | |
| - | * Position | + | |
| - | * Rotation | + | |
| - | * Abstand | + | |
| - | * Wiederholung | + | |
| - | * Geschwindigkeit | + | |
| - | * Dichte | + | |
| - | + | ||
| - | Entwickelt mit [[extras: | + | |
| - | + | ||
| - | Erstellt mehrere charakteristische Zustände | + | |
| - | + | ||
| - | Ziel ist es, nicht mehr einzelne | + | |
| - | + | ||
| - | === Dokumentation | + | |
| - | + | ||
| - | Haltet | + | |
| - | + | ||
| - | 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. | + | |
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/teaching/ba/create/ct102/semester-schedule/mini-challenges.1789826102.txt.gz · Last modified: by Felix Hardmood Beck