009 - Colors

The Color System provides color palettes and utilities.

Why a Color System?

Colors are essential in generative art – but also tricky:

Harmonies are hard – Which colors go together?
Switching should be easy – "Now a different palette"
Consistency – All agents should use the same palette

The Solution: ColorSet

The ColorSet is a palette manager. You define multiple color palettes, and the system:

Manages the current palette
Enables cycling (next palette) via keypress or timer
Fires events when the palette changes
Provides Tweakpane UI for switching

Why Events? Because agents shouldn't constantly poll "Has the color changed?". They subscribe to colorset:changed and get notified.

Why Auto-Cycling? For exhibitions: Different colors every 30 seconds, completely without interaction. The artwork "lives."

Components

Class	File	Function
`ColorSet`	`ColorSet.ts`	Color Palette Manager
`ColorUtils`	`ColorUtils.ts`	Color Utilities

ColorSet

Manages color palettes with cycling and events.

Concept:

                                      ┌────────────────┐
                                 ┌───▶│   Palette 1    │
                                 │    └────────────────┘
                                 │    ┌────────────────┐
                    ┌────────────┼───▶│   Palette 2    │
                    │            │    └────────────────┘
    ┌───────────┐   │            │    ┌────────────────┐
    │  ColorSet │───┤            └───▶│   Palette 3    │
    └───────────┘   │                 └────────────────┘
                    │
                    │ getCurrent()    ┌──────────────────┐
                    ├────────────────▶│ Current Palette  │
                    │                 └──────────────────┘
                    │ cycle()         ┌──────────────────┐
                    ├────────────────▶│ Next Palette     │
                    │                 └──────────────────┘
                    │ event           ┌──────────────────┐
                    └────────────────▶│ colorset:changed │
                                      └──────────────────┘

Initialization:

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

API:

Method	Description
`getCurrent()`	Current Palette
`getIndex()`	Current Index
`setIndex(i)`	Select Palette
`cycle()`	Next Palette
`getColor(i)`	Color from Palette
`getRandomColor()`	Random Color
`fill(ctx, i)`	Set Canvas Fill
`stroke(ctx, i)`	Set Canvas Stroke

Return Types:

Type	Description
`CS_Result`	`{ color, index, colorIndex }`
`CS_Result_String`	Just the color string
`CS_ResultColorInfo`	With RGB components

Events:

Event	Payload	Trigger
`colorset:changed`	`{ colors, id, index }`	Palette changes

Auto-Cycling

ColorSet can automatically switch palettes.

Parameters:

Parameter	Type	Description
`animation`	`boolean`	Auto-Cycle active?
`animationInterval`	`number`	Interval (ms)
`animationMode`	`'cycle' \| 'random'`	Switch Mode

Tweakpane Integration

Blade	Function
Palette Dropdown	Select Palette
Animation Toggle	Auto-Cycle on/off
Interval Slider	Switch Speed
Preview	Color Preview

ColorUtils

Static utility functions.

Conversion:

Function	Description
`hexToRgb(hex)`	Hex → RGB
`rgbToHex(r, g, b)`	RGB → Hex
`hexToHsl(hex)`	Hex → HSL
`hslToHex(h, s, l)`	HSL → Hex
`hexToRgba(hex)`	Hex → RGBA (with alpha)

Manipulation:

Function	Description
`lighten(color, amount)`	Lighten
`darken(color, amount)`	Darken
`saturate(color, amount)`	Increase Saturation
`desaturate(color, amount)`	Reduce Saturation
`invert(color)`	Invert
`complement(color)`	Complementary Color

Mixing:

Function	Description
`mix(color1, color2, amount)`	Mix Colors
`blend(colors, t)`	Gradient Interpolation

Analysis:

Function	Description
`luminance(color)`	Brightness (0-1)
`contrast(color1, color2)`	Contrast Ratio
`isLight(color)`	Light Color?
`isDark(color)`	Dark Color?

Generation:

Function	Description
`randomColor()`	Random Color
`randomPastel()`	Random Pastel Color
`analogous(color, n)`	Analogous Colors
`triadic(color)`	Triadic Colors
`tetradic(color)`	Tetradic Colors

Dithering

Dithering algorithms for image effects.

DitherAlgorithms:

Algorithm	Description
`threshold(data, level)`	Simple Threshold
`random(data, level)`	Random Dithering
`floydSteinberg(data)`	Error Diffusion
`atkinson(data)`	Atkinson Algorithm
`ordered(data, matrix)`	Matrix-based
`halftone(data, angle)`	Halftone Raster

DitherEffect:

Wrapper for easy application on ImageData.

Method	Description
`apply(imageData, mode)`	Apply Dithering
`preview(imageData, mode)`	Generate Preview

Usage with Brush

const colorset = ColorSet.getInstance(parameter);

// Color for Brush
const color = colorset.getColor(0);
brush.fillColor = color.color;

// Or with index cycling
const randomColor = colorset.getRandomColor();

Best Practices

Initialize ColorSet in configure():

ColorSet.ensureParameterSet(parameter, palettes);

Use events for reactive updates:

ioManager.subscribe('colorset:changed', (payload) => {
  // Update brush colors
});

Auto-cycling for generative works:

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