009 - Colors

Das Color System bietet Farbpaletten und Utilities.

Warum ein Farbsystem?

Farben sind in generativer Kunst essenziell – aber auch tückisch:

Harmonien sind schwer – Welche Farben passen zusammen?
Wechsel soll einfach sein – "Jetzt mal andere Palette"
Konsistenz – Alle Agenten sollen dieselbe Palette nutzen

Die Lösung: ColorSet

Das ColorSet ist ein Paletten-Manager. Du definierst mehrere Farbpaletten, und das System:

Verwaltet die aktuelle Palette
Ermöglicht Cycling (nächste Palette) per Tastendruck oder Timer
Feuert Events, wenn sich die Palette ändert
Bietet Tweakpane-UI zum Wechseln

Warum Events? Weil Agenten nicht ständig pollen sollen "Hat sich die Farbe geändert?". Sie subscriben colorset:changed und werden benachrichtigt.

Warum Auto-Cycling? Für Ausstellungen: Alle 30 Sekunden andere Farben, ganz ohne Interaktion. Das Artwork "lebt".

Komponenten

Klasse	Datei	Funktion
`ColorSet`	`ColorSet.ts`	Farbpaletten-Manager
`ColorUtils`	`ColorUtils.ts`	Farb-Utilities

ColorSet

Verwaltet Farbpaletten mit Cycling und Events.

Konzept:

                                      ┌────────────────┐
                                 ┌───▶│   Palette 1    │
                                 │    └────────────────┘
                                 │    ┌────────────────┐
                    ┌────────────┼───▶│   Palette 2    │
                    │            │    └────────────────┘
    ┌───────────┐   │            │    ┌────────────────┐
    │  ColorSet │───┤            └───▶│   Palette 3    │
    └───────────┘   │                 └────────────────┘
                    │
                    │ getCurrent()    ┌──────────────────┐
                    ├────────────────▶│ Aktuelle Palette │
                    │                 └──────────────────┘
                    │ cycle()         ┌──────────────────┐
                    ├────────────────▶│ Nächste Palette  │
                    │                 └──────────────────┘
                    │ event           ┌──────────────────┐
                    └────────────────▶│ colorset:changed │
                                      └──────────────────┘

Initialisierung:

ColorSet.ensureParameterSet(parameter, [
  ['#FF0000', '#00FF00', '#0000FF'],  // Palette 1
  ['#FFFF00', '#FF00FF', '#00FFFF'],  // Palette 2
]);

API:

Methode	Beschreibung
`getCurrent()`	Aktuelle Palette
`getIndex()`	Aktueller Index
`setIndex(i)`	Palette wählen
`cycle()`	Nächste Palette
`getColor(i)`	Farbe aus Palette
`getRandomColor()`	Zufällige Farbe
`fill(ctx, i)`	Canvas-Fill setzen
`stroke(ctx, i)`	Canvas-Stroke setzen

Rückgabe-Typen:

Typ	Beschreibung
`CS_Result`	`{ color, index, colorIndex }`
`CS_Result_String`	Nur der Farbstring
`CS_ResultColorInfo`	Mit RGB-Komponenten

Events:

Event	Payload	Auslöser
`colorset:changed`	`{ colors, id, index }`	Palette wechselt

Auto-Cycling

ColorSet kann automatisch Paletten wechseln.

Parameter:

Parameter	Typ	Beschreibung
`animation`	`boolean`	Auto-Cycle aktiv?
`animationInterval`	`number`	Interval (ms)
`animationMode`	`'cycle' \| 'random'`	Wechsel-Modus

Tweakpane Integration

Blade	Funktion
Palette-Dropdown	Palette wählen
Animation Toggle	Auto-Cycle an/aus
Interval Slider	Wechsel-Geschwindigkeit
Preview	Farb-Vorschau

ColorUtils

Statische Utility-Funktionen.

Konvertierung:

Funktion	Beschreibung
`hexToRgb(hex)`	Hex → RGB
`rgbToHex(r, g, b)`	RGB → Hex
`hexToHsl(hex)`	Hex → HSL
`hslToHex(h, s, l)`	HSL → Hex
`hexToRgba(hex)`	Hex → RGBA (mit Alpha)

Manipulation:

Funktion	Beschreibung
`lighten(color, amount)`	Aufhellen
`darken(color, amount)`	Abdunkeln
`saturate(color, amount)`	Sättigung erhöhen
`desaturate(color, amount)`	Sättigung reduzieren
`invert(color)`	Invertieren
`complement(color)`	Komplementärfarbe

Mischung:

Funktion	Beschreibung
`mix(color1, color2, amount)`	Farben mischen
`blend(colors, t)`	Gradient-Interpolation

Analyse:

Funktion	Beschreibung
`luminance(color)`	Helligkeit (0-1)
`contrast(color1, color2)`	Kontrast-Ratio
`isLight(color)`	Helle Farbe?
`isDark(color)`	Dunkle Farbe?

Generierung:

Funktion	Beschreibung
`randomColor()`	Zufällige Farbe
`randomPastel()`	Zufällige Pastellfarbe
`analogous(color, n)`	Analoge Farben
`triadic(color)`	Triadische Farben
`tetradic(color)`	Tetradische Farben

Dithering

Dithering-Algorithmen für Bildeffekte.

DitherAlgorithms:

Algorithmus	Beschreibung
`threshold(data, level)`	Einfacher Schwellwert
`random(data, level)`	Zufälliges Dithering
`floydSteinberg(data)`	Error-Diffusion
`atkinson(data)`	Atkinson-Algorithmus
`ordered(data, matrix)`	Matrix-basiert
`halftone(data, angle)`	Halbton-Raster

DitherEffect:

Wrapper für einfache Anwendung auf ImageData.

Methode	Beschreibung
`apply(imageData, mode)`	Dithering anwenden
`preview(imageData, mode)`	Vorschau generieren

Verwendung mit Brush

const colorset = ColorSet.getInstance(parameter);

// Farbe für Brush
const color = colorset.getColor(0);
brush.fillColor = color.color;

// Oder mit Index-Cycling
const randomColor = colorset.getRandomColor();

Best Practices

ColorSet initialisieren in configure():

ColorSet.ensureParameterSet(parameter, palettes);

Events nutzen für reaktive Updates:

ioManager.subscribe('colorset:changed', (payload) => {
  // Brush-Farben aktualisieren
});

Auto-Cycling für generative Werke:

parameter.colorset.animation = true;
parameter.colorset.animationInterval = 5000;