Creative Technologies Lab | dokuWiki

Im Rahmen der ersten Semesterhälfte des Bachelor Kurses Design Basics bearbeiten die Studierenden vier designrelevante Mini-Challenges, die sich an den Dimensionen 2D, 3D und 4D orientieren. Je nach der im Kurs zu Verfügung stehenden Zeit werden die Aufgaben im seminaristischen Unterricht begonnen und von den Studierenden als Hausaufgabe eigenständig fortgesetzt. Die Studierenden haben die Verantwortung die Ergebnisse und Prozesse in Form der Dokumentationsbox zu dokumentieren und in der jeweiligen Folgewoche im Kurs zu präsentieren.

1. Lesen Sie sich diese Übersicht zu den Gestaltgesetzen durch.
2. Ihre Aufgabe ist es nun zwei P5.JS Sketche zu coden, die jeweils eines der Gesetze bestmöglich in Form von einem Bild oder einer animierten Sequenz visualisieren.
   
3. Starten Sie mit der Erstellung des ersten Blattes für Ihre Doku-Box. Wie kann das aussehen? Machen Sie screenshots ihrer Arbeiten. Reicht ein Screenshot, um eine Animation zu zeigen? Was fällt Ihnen als Lösung ein? Fragen Sie jemanden ein Foto von Ihnen bei der Arbeit zu machen (Over-the-shoulder-shot mit dem Computer-Bildschirm im Hintergrund auf dem ihre Arbeit zu sehen ist). Achten Sie auf gute Belichtung und einen passenden Bildausschnitt.
4. Die Ergebnisse werden beim nächsten mal der gesamten Gruppe vorgestellt (inkl Doku-Box) und gemeinsam besprochen. Die fertigen Code-snippets werden per email an Prof. Beck geschickt.

1. Schauen Sie sich die RGB-Arbeiten des Künstler Duos Carnovsky an. Ihre Aufgabe ist es ein DIN A3 Plakat mit einer Multi-Layer-Komposition zu erstellen, in der sich verschiedene Motive überlagern. Sie können die Farben CMY und/oder RGB für einzelnen Farblayer benutzen. Verwenden Sie für die Bearbeitung eine Software Ihrer Wahl – beispielsweise Photoshop, Gimp, Affinity Photo oder auch diesmal wieder p5.js (Beispielcode Carnovsky). Die unteren drei Beispiele sind screenshots von dem verlinkten P5.JS sketch.
   
2. Überlegen Sie sich eine Geschichte zu den drei ausgewählten Bildinhalten. Wie passen diese zusammen? Funktioniert jede Farbe mit jedem Bildinhalt, oder ist ein bestimmter Bildinhalt an eine bestimmte Farbe gekoppelt? (Bspw. ein blauer Ozean, ein gelber Fisch, eine rote Plastikflasche).
3. Arbeiten Sie an Ihrer Bildcollage. Optimieren Sie Position, Größe, Details der einzelnen Bilder, sodass die Aussage Ihrer “Geschichte” deutlicher wird.
4. Dokumentieren Sie Ihren Prozess mit Hilfe von Fotos, Skizzen und Screenshots. Die jeweiligen Ausdrucke wandern in die Dokumentationsbox und werden im nächsten Seminar neben den Ergebnissen des DIN A3 Plakates vorgestellt.

Modellieren Sie Ihren Namen in TinkerCAD in Form einer Namensskulptur. Wählen Sie dafür eine Schrift, die zu Ihnen passt – Sie vielleicht sogar repräsentiert. Gegebenenfalls müssen Sie hier einzelne Buchstaben als *.svg-Dateien importieren und diese extrahieren). Der Name soll dabei von oben nach unten lesbar sein – die Buchstaben also nicht in Leserichtung nebeneinander, sondern untereinander – und in einer Form, dass man die Skulptur um 360° drehen muss, um Ihren Namen komplett lesen zu können. Alle verwendeten Buchstaben sollten natürlich zur gleichen Schrift gehören. Die Versalhöhe sollte etwa 3-5 cm betragen. Die Höhe der Gesamtskulptur soll nicht höher sein als 15 cm. Das ganze soll später 3D-gedruckt werden. Versuchen Sie deswegen die Buchstaben möglichst intelligent aufeinander aufzubauen. Verwenden Sie nur Buchstaben, keine “Brückenelemente”.

3D-Drucken Sie Ihre Namensskulptur im MakerSpace, in einer Höhe von 15 cm. Bringen Sie das Ergebnis beim nächsten Mal mit zum Unterricht. Dokumentieren Sie Ihren Prozess durch Fotos und integrieren Sie Ihre Doku in die Dokubox.

Diese Übung dient als Einstieg in zentrale Konzepte, die später bei der Nutzung von Programmen wie TouchDesigner oder vvvv interaktiv und in Echtzeit weitergedacht werden – etwa Formgenerierung, Bewegungslogik, Transformation im Raum und visuelles Storytelling.

24 Frames of Motion: Sie sollen eine Animation gestalten, die aus 24 Einzelbildern besteht und exakt eine Sekunde lang sein soll. Ob abstrakt oder narrativ, rhythmisch oder chaotisch – Ziel ist es, eine einfache visuelle Idee in eine präzise zeitliche Abfolge zu übersetzen. Im Fokus stehen Grundprinzipien wie Timing, Transformation, Bewegung und Komposition. Die Animation soll ohne erklärenden Text funktionieren – die visuelle Bewegung steht im Zentrum. Lesen Sie sich zur Bearbeitung der Aufgabe die Grundlagen von Animation durch.

Zur Erstellung der Animation können beliebige Tools eingesetzt werden, wie bspw die folgenden frei verfügbaren Online-Tool:

• https://flipanim.com (Frame-by-Frame-Zeichnung)
• https://piskelapp.com (Pixelanimation)

Abgabe:

• Die Animation soll als animiertes-gif oder Video-Datei (max. 5 MB) vor der nächsten Unterrichtseinheit per email an Prof Beck geschickt werden.
• Eine kurze schriftliche Reflexion (100–150 Wörter): Welche gestalterische Idee wurde verfolgt? Welche Entscheidungen waren notwendig?

• Lesen Sie sich die Beschreibung zu den 12 Prinzipien der Animation nach Disney aufmerksam durch.
• Wählen Sie zwei Prinzipien aus, die Sie besonders interessant oder gestalterisch relevant finden. Ihre Aufgabe ist es nun, für jedes der beiden Prinzipien einen eigenen P5.JS Sketch zu coden, der die jeweilige Idee durch Bewegung, Formverhalten oder Interaktion deutlich visualisiert. Orientieren Sie sich an folgendem Beispiel Slow In & Slow Out
  
• Ihre Ergebnisse (Sketche + Doku) werden in der kommenden Sitzung der Gruppe vorgestellt. Senden Sie Ihre P5.JS-Code-Snippets zusätzlich per E-Mail an Prof. Beck.