008 - Agents

Agents sind wiederverwendbare Zeichen-Komponenten für den SceneGraph.

Das Konzept

Ein Agent ist ein eigenständiges "Ding, das zeichnet". Er hat eigene Parameter, eigenen State, eigene Tweakpane-UI. Du fügst ihn dem SceneGraph hinzu, und er kümmert sich um den Rest.

Warum Agents statt Funktionen? Eine Funktion drawParticles(ctx, particles) ist zustandslos – du musst die Partikel-Liste selbst verwalten. Ein ParticleManager Agent verwaltet seine Partikel intern, hat Tweakpane-Sliders für Count/Speed/Size, und du rufst nur .draw(props) auf.

Warum SceneGraph? Weil die Reihenfolge zählt. Was zuerst gezeichnet wird, liegt hinten. Ein Agent für den Hintergrund muss vor den Partikeln kommen. Der SceneGraph macht das explizit und erlaubt Umordnen zur Laufzeit.

Das Pattern: Jeder Agent hat eine statische ensureParameterSet() Methode, die Defaults ins ParameterObject schreibt. Das muss VOR dem Tweakpane-Setup passieren – sonst crasht der Exhibition-Mode (der hat keine Tweakpane).

Übersicht

                          ┌─────────────────┐
                          │   SceneGraph    │
                          └─────────────────┘
                                   │
       ┌───────────────────────────┼───────────────────────────┐
       │           │           │   │   │           │           │
       ▼           ▼           ▼   │   ▼           ▼           ▼
┌────────────┐ ┌────────────┐ ┌────┴───┐ ┌────────────┐ ┌────────────┐
│ Background │ │Background- │ │ Brush  │ │ Particle-  │ │ Particle-  │
│            │ │   Shape    │ │        │ │  Manager   │ │   Wind     │
└────────────┘ └────────────┘ └────────┘ └────────────┘ └────────────┘

       ┌───────────────────────────┼───────────────────────────┐
       │           │           │   │   │           │           │
       ▼           ▼           ▼       ▼           ▼           ▼
┌────────────┐ ┌────────────┐ ┌────────┐ ┌────────────┐ ┌────────────┐
│  Entity_   │ │   Grid_    │ │ Image- │ │ ImageLayer │ │ Characters │
│  Manager   │ │  Manager   │ │ Layer  │ │ Dithering  │ │            │
└────────────┘ └────────────┘ └────────┘ └────────────┘ └────────────┘

                          ┌─────────────────────┐
                          │ DitherShapeGenerator│
                          └─────────────────────┘

Agents-Liste

Background

Einfacher farbiger Hintergrund.

Parameter:

BackgroundShape

Ein Shape zentriert im Hintergrund.

Parameter:

Brush

Das universelle Zeichenwerkzeug.

Parameter:

Physics-Optionen:

ParticleManager

Verwaltet Partikel-Systeme.

Parameter:

Particle Sources:

ParticleWind

Wind-Simulation mit Noise.

Parameter:

Entity_Manager

Bouncing/Wrapping Objekte.

Parameter:

Entity Features:

• Position, Velocity, Acceleration
• Bouncing an Canvas-Grenzen
• Wrapping (Pac-Man Style)
• Collision Detection (optional)

Entity Stats Broadcasting

Der Entity_Manager schreibt automatisch Statistiken ins ParameterObject, die von anderen Artworks (z.B. ParameterObserver) empfangen werden können:

// Diese Werte werden automatisch in parameter.entity.stats geschrieben:
{
  centerX: 0.52,      // Normalisiertes Zentrum aller Entities (0-1)
  centerY: 0.48,
  avgSpeed: 0.023,    // Durchschnittsgeschwindigkeit (normalisiert)
  spreadX: 0.31,      // Streuung der Entities
  spreadY: 0.28,
  
  // Positionen der ersten 10 Entities (normalisiert 0-1)
  e0_x: 0.12, e0_y: 0.45,
  e1_x: 0.67, e1_y: 0.23,
  // ... bis e9
}

Anwendung mit ParameterObserver:

// Im Observer-Artwork:
const observer = new ParameterObserver({
  serverUrl: 'http://localhost:4000',
  targetArtwork: 'item-cc-entities',
});

observer.onUpdate((params, artworkId) => {
  const stats = params.entity?.stats;
  if (stats) {
    console.log(`Entities center: (${stats.centerX}, ${stats.centerY})`);
    console.log(`Average speed: ${stats.avgSpeed}`);
  }
});

Mit Smart Filter im ParameterMandala werden genau diese dynamischen Entity-Stats visualisiert, während statische Parameter (Canvas-Size, Animation-Settings) herausgefiltert werden.

Grid_Manager

Dual-View Grid System.

Parameter:

Views:

• PointGrid: Fokus auf Kreuzungspunkte und Linien
• CellGrid: Fokus auf Zellen als Mini-Canvases

ImageLayer

Bild-Darstellung.

Parameter:

ImageLayerDithering

Bild mit Dithering-Effekt.

Parameter:

Dither Modes:

Dither Shapes:

Characters

Text und Einzelzeichen.

Parameter:

DitherShapeGenerator

Generiert Shapes aus Dither-Daten für Plotter.

Methoden:

Agent-Interface

Alle Agents implementieren:

interface Agent {
  draw(props: ArtworkProps): void;
  update?(deltaTime: number): void;
  setParameter?(key: string, value: any): void;
}

Tweakpane Integration

Jeder Agent hat ensureParameterSet() für Defaults:

// In configure()
Background.ensureParameterSet(parameter, colorset);
ColorSet.ensureParameterSet(parameter, ['palette1', 'palette2']);

Wichtig: ensureParameterSet() muss VOR dem Tweakpane-Check aufgerufen werden (sonst crasht Exhibition Mode).