This is an old revision of the document!
Table of Contents
Grundlagen Digitale Medien
Creative Technologies – Bachelor-Kurs
Prof. Felix Beck, Leonie Winkelmann
WiSe 2026-27
Einordnung in Semesterablauf: https://wiki.ct-lab.info/lib/exe/fetch.php/teaching:ba:create:ct102:overview-ct102.png
Seminaristischer Unterricht
Referate
- Referat 1 (Paul): “Der Mensch als Maß im japanischen Raum” verschoben auf kommende Woche)
- Referat 3 (Yuni): “James Turrell – Atmosphäre” ⇒ Wie gestaltet James Turrell Wahrnehmung mit Licht, Farbe und Raum? Vorstellung ausgewählter Arbeiten und Untersuchung der Frage, wie sich die Wahrnehmung eines Raumes durch Licht und Farbe verändern lässt.
Besprechung der Ergebnisse der Hausaufgaben
Besprechung der Ergebnisse zu Mini-Challenge 2A: DIN-A3-Multi-Layer-Komposition werden als DIN A3 Ausdrucke aufgehangen und getestet. Diese bestehen aus drei inhaltlich verbundenen Bildmotiven, die mithilfe von RGB- und/oder CMY-Farblayern überlagert werden. Durch Varianten werden Position, Größe, Ausschnitt, Überlagerung, Farbzuordnung und visuelles Gewicht optimiert.
Hausaufgaben zur kommenden Woche
In Mini-Challenge 2B wird ein visuelles Wahrnehmungsphänomen oder eine optische Täuschung analysiert und anschließend als eigener p5.js-Sketch im einheitlichen Format von 500 × 500 Pixeln umgesetzt. Abzugeben sind Screenshot, Titel, kurze Beschreibung und Erklärung des Effekts sowie der Sketch-Link; Entwicklungsprozess, Varianten und Zwischenstände werden zusätzlich in der DokuBox dokumentiert.
Praktikum
Color & Perception I: Farbe als Parameter
Inhalt
- Antestat: Vorstellung der entwickelten Systeme
- Farbmodelle RGB (additiv), CMYK (subtraktiv) und HSB (Farbton, Sättigung, Helligkeit); Farbharmonien als Winkel auf dem Farbkreis (komplementär, analog, triadisch, tetradisch)
- Spiel color.method.ac: Farben nach Vorgabe einstellen
- Farbe als Informationsträger (Kategorie, Signal, Richtung, Zugehörigkeit), Barrierefreiheit und WCAG (Farbe nie als einziges Mittel, Kontrast mindestens 4,5:1)
- Übung: Farbregel für das eigene System, siehe Farbregel-Generator
Aufgabe: Farbregel für das System
Ziel: Das eigene System bekommt eine Farbregel. Die Farbe wird nicht ausgesucht, sondern aus Zahlen berechnet, und sie bedeutet etwas. Sie soll auch ohne Farbsehen lesbar bleiben.
Die Farbregel
Eine Farbregel besteht aus vier Teilen:
- Start-Winkel (Basis-Hue): der Farbton der ersten Farbe (0–359°)
- Versatz: Winkel auf dem Farbkreis, der jede weitere Farbe festlegt
- Feste Werte: Sättigung und Helligkeit bleiben konstant, damit allein der Farbton entscheidet
- Bedeutung: wofür die Farbe steht (Kategorie, Signal, Richtung oder Zugehörigkeit)
Versätze der Harmonien:
- komplementär: 0°, 180°
- analog: −30°, 0°, +30°
- triadisch: 0°, 120°, 240°
- tetradisch: 0°, 60°, 180°, 240°
Hilfsmittel: Farbregel-Generator (zeigt Versätze, Hue-, HSB- und Hex-Werte und den Code)
Starter-Sketch
Der Sketch zeigt zwölf Kreise in einer Farbregel. Die Zeilen im draw() mit dem Platzhalter durch das eigene System ersetzen. Taste g schaltet zwischen Farbe und Graustufen um.
let basisHue = 20;
const harmonien = {
komplementaer: [0, 180],
analog: [-30, 0, 30],
triadisch: [0, 120, 240],
tetradisch: [0, 60, 180, 240]
};
let wahl = 'triadisch';
let grau = false;
function setup() {
createCanvas(600, 600);
colorMode(HSB, 360, 100, 100);
noStroke();
}
function farbe(gruppe) {
const v = harmonien[wahl];
const h = (basisHue + v[gruppe % v.length] + 360) % 360;
return color(h, 80, 90);
}
function draw() {
background(0, 0, 100);
// Platzhalter: durch das eigene System ersetzen
for (let i = 0; i < 12; i++) {
fill(farbe(i));
circle(80 + i * 40, height / 2, 30);
}
if (grau) filter(GRAY);
}
function keyPressed() {
if (key === 'g') grau = !grau;
}
Hinweise
- Gleiche Sättigung und Helligkeit bedeuten nicht gleich hell im Graustufenbild: Ein gelbes und ein blaues Hue erscheinen in Grau sehr unterschiedlich hell.
- Hue mit
% 360begrenzen, sonst kippen negative oder große Werte. - Im selben Sketch nicht RGB- und HSB-Werte mischen,
colorModegilt global. - Höchstens drei bis vier Farben verwenden, mehr sind kaum noch zu unterscheiden.
- Der Hintergrund gehört zur Regel, Hue und Kontrast hängen davon ab.
Hausaufgabe
Drei Fassungen derselben Farbregel (zwei Harmonien, eine Okabe-Ito-Palette), jeweils normal, in Graustufen und mit Farbsehschwäche-Simulation. Entscheiden, welche Fassung die Bedeutung am besten trägt, und die Farbregel auf der Systemkarte ergänzen. Antestat in KT-04: Tausch der Karten.
Hausaufgabe
- Das System mit einer Farbregel erweitern (Start-Winkel, Versatz, feste Sättigung und Helligkeit, Bedeutung der Farbe)
- Drei Fassungen: zwei Harmonien und eine Okabe-Ito-Palette, jeweils normal, in Graustufen und mit Farbsehschwäche-Simulation prüfen
- Entscheiden, welche Fassung am besten trägt