004 - Shapes

Das Shape System bietet eine modulare, erweiterbare Architektur für geometrische Formen mit Physics-Unterstützung.

Das Problem

Geometrische Formen sind das Grundvokabular generativer Kunst: Kreise, Rechtecke, Polygone, Sterne. Aber:

• Jede Form hat eigene Parameter – Kreis hat Radius, Rechteck hat Breite/Höhe, Stern hat Zacken
• Manche Formen können deformiert werden – Soft Shapes mit Jelly-Effekt
• Physik passt nicht zu allen – Ein Kreis kann abprallen, aber eine Linie?

Die Lösung

Das Shape System nutzt ein Registry-Pattern mit Decorator-basierter Auto-Registration. Jedes Shape registriert sich selbst mit seinen Metadaten – Name, Kategorie, Physics-Fähigkeiten. Die ShapeRegistry ist dann die zentrale Factory: "Gib mir ein Shape namens 'Circle'" → fertig.

Warum Decorator? Weil die Information direkt am Code steht, wo sie hingehört. Kein zentrales Config-File, das aus dem Sync gerät. Neue Shape-Klasse schreiben, @registerShape drauf, fertig.

Warum Physics-Capabilities? Nicht jedes Shape kann alles. Ein harter Kreis kann als Rigid Body abprallen. Ein Soft Circle kann sich verformen. Eine Linie hat keine sinnvolle Physik. Das System weiß das und verhindert unsinnige Kombinationen.

Architektur

┌──────────────────────────────────────────────────────────────────────┐
│  Registration                                                        │
│  ┌────────────────────────────────────────────────────────────────┐  │
│  │              @registerShape Decorator                          │  │
│  └────────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌──────────────────────────────────────────────────────────────────────┐
│  Registry                                                            │
│  ┌────────────────────────────────────────────────────────────────┐  │
│  │                      ShapeRegistry                             │  │
│  └────────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌──────────────────────────────────────────────────────────────────────┐
│  Base                                                                │
│  ┌───────────────────────┐    ┌───────────────────────┐              │
│  │      ShapeBase        │───▶│   IShape Interface    │              │
│  └───────────────────────┘    └───────────────────────┘              │
└──────────────────────────────────────────────────────────────────────┘
                                    ▲
          ┌─────────────────────────┼─────────────────────────┐
          │                         │                         │
┌─────────┴──────────┐   ┌──────────┴─────────┐   ┌──────────┴─────────┐
│   Basic Shapes     │   │    Soft Shapes     │   │      Custom        │
├────────────────────┤   ├────────────────────┤   ├────────────────────┤
│ Circle, Rect       │   │ SoftCircle         │   │ Character          │
│ Ellipse, Polygon   │   │ SoftRect           │   │ CustomSVG          │
│ Star, Line         │   │ Blob               │   │                    │
│ Rhombus, Trapez    │   │                    │   │                    │
│ Triangle           │   │                    │   │                    │
└────────────────────┘   └────────────────────┘   └────────────────────┘

Komponenten

ShapeRegistry

Zentrale Factory für alle Shapes.

API:

Kategorien:

Basic Shapes

Geometrische Grundformen mit Rigid-Body Physics.

Circle

Rect

Ellipse

Polygon

Star

Line

Rhombus, Trapez, Triangle

Spezialisierte Polygone mit entsprechenden Eigenschaften.

Soft Shapes

Deformierbare Formen mit interner Verlet-Simulation.

Zwei Ansätze für Soft Bodies:

SoftCircle

SoftRect

Blob

ShapeStateManager - Universal Soft Bodies

Das Motto: "Meine Welt, meine Regeln!" - JEDES Shape kann soft werden.

Mit dem ShapeStateManager kannst du normale Shapes (Rect, Circle, Star, Polygon...) in Soft Bodies verwandeln.

Grundlegende Verwendung

import { ShapeStateManager } from '@carstennichte/cc-toolbox';

// 1. StateManager erstellen
const stateManager = new ShapeStateManager();

// 2. Shape-Geometrie initialisieren
stateManager.initializeFromGeometry({
  type: 'rect',
  center: new Vector(200, 200),
  width: 100,
  height: 80,
});

// 3. Preset anwenden
stateManager.applyPreset('jelly');

// 4. In der Animations-Schleife
function animate(deltaTime: number) {
  stateManager.update(deltaTime);
  const vertices = stateManager.getOutlineVertices();
  renderer.drawPolygon(vertices, brush);
}

Verfügbare Presets

Interaktion

// Kräfte anwenden
stateManager.applyForce(new Vector(0, 0.5));  // Gravitation
stateManager.applyExplosion(mousePos, 5, 200); // Explosion
stateManager.repelFrom(mousePos, 0.5, 100);   // Abstoßung

// Vertex ziehen (Drag & Drop)
stateManager.dragVertex(targetVertex, mousePos);

// Zurücksetzen
stateManager.resetPositions();

Pin-Modi

Fixiere bestimmte Punkte:

Kollisionserkennung

Soft Bodies können miteinander kollidieren:

// Mehrere Shapes erstellen
const shapes: ShapeStateManager[] = [];
for (let i = 0; i < 5; i++) {
  const sm = new ShapeStateManager();
  sm.initializeFromGeometry({ type: 'circle', center: ..., radius: 50 });
  sm.applyPreset('jelly');
  shapes.push(sm);
}

// Kollision aktivieren - jeder kennt alle anderen
const allDecorators = shapes.map(s => s.getDecorator());
for (const shape of shapes) {
  shape.setCollisionBodies(allDecorators);
}

// Update - Kollisionen werden automatisch geprüft
function animate(dt: number) {
  for (const shape of shapes) {
    shape.update(dt);
  }
}

Kollisions-Algorithmus:

1. Broad-Phase (AABB) - Schneller Bounding-Box Check
2. Narrow-Phase (SAT) - Präzise Polygon-Überlappung
3. Response - Shapes werden separiert + elastischer Bounce

Custom Shapes

Character

Rendert Einzelzeichen in verschiedenen Fonts.

CustomSVG

Rendert SVG-Pfade.

Physics Capabilities

Jedes Shape deklariert seine Physics-Fähigkeiten.

graph LR
    subgraph "Capability Flags"
        RB[supportsRigidBody]
        SB[hasSoftBody]
        CP[supportsCenterParticle]
    end
    
    subgraph "Presets"
        NO[NO_PHYSICS]
        RIGID[RIGID_BODY_PHYSICS]
        SOFT[SOFT_BODY_PHYSICS]
    end

Presets:

Shape-Zuordnung:

ShapePhysicsAdapter

Verbindet Shapes mit PhysicsWorld.

Funktionen:

Verhalten:

• Rigid Body Shapes: Ein Particle repräsentiert das Shape
• Soft Body Shapes: Optional ein Center-Particle für globale Kräfte
• No Physics Shapes: Adapter nicht anwendbar

Eigene Shapes erstellen

import { ShapeBase, registerShape, RIGID_BODY_PHYSICS } from '@carstennichte/cc-toolbox';

@registerShape({
  name: 'hexagon',
  category: 'basic',
  description: 'Regular hexagon',
  physics: RIGID_BODY_PHYSICS
})
export class Hexagon extends ShapeBase {
  getPath(): Path2D {
    // ... Pfad generieren
  }
  
  getBounds(): { x, y, width, height } {
    // ... Bounds berechnen
  }
}