Differences

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

--- teaching:ba:create:ct102:semester-schedule:mini-challenges [2026/09/19 14:01] – [Teilaufgabe A – RGB/CMY Layers] 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 132: / Line 132: @@
 ==== 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.
@@ Line 158: / Line 146: @@
   * 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 ===
+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.
-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.
@@ Line 177: / Line 159: @@
 ==== 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 ====
-Ü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.
@@ Line 247: / Line 184: @@
 ==== 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.