Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools


teaching:ba:create:ct102:semester-schedule:20-10-26

This is an old revision of the document!


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

  1. Referat 1 (Paul): “Der Mensch als Maß im japanischen Raum” verschoben auf kommende Woche)
  2. 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:

  1. Start-Winkel (Basis-Hue): der Farbton der ersten Farbe (0–359°)
  2. Versatz: Winkel auf dem Farbkreis, der jede weitere Farbe festlegt
  3. Feste Werte: Sättigung und Helligkeit bleiben konstant, damit allein der Farbton entscheidet
  4. 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 % 360 begrenzen, sonst kippen negative oder große Werte.
  • Im selben Sketch nicht RGB- und HSB-Werte mischen, colorMode gilt 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
This website uses cookies. By using our website, you agree with storing cookies on your computer. Also you acknowledge that you have read and understand our Privacy Policy. If you do not agree leave the website. Privacy Policy
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/teaching/ba/create/ct102/semester-schedule/20-10-26.1792477045.txt.gz · Last modified: by Leonie Winkelmann