006 - Motion System

Das Motion System bietet wiederverwendbare Bewegungsmuster basierend auf deltaTime.

Warum Motion UND Animation?

Auf den ersten Blick scheinen Animation und Motion dasselbe zu sein – beides bewegt Dinge. Aber sie lösen unterschiedliche Probleme:

Animation: "In 3 Sekunden soll die Größe von 80% auf 120% gehen."

• Hat definierte Dauer
• Interpoliert zwischen Start und Ende
• Braucht eine Clock

Motion: "Das Objekt bewegt sich mit 50 Pixeln pro Sekunde nach rechts."

• Läuft endlos (oder bis Grenze)
• Basiert auf Geschwindigkeit, nicht auf Zeit
• Braucht nur deltaTime

Praktisches Beispiel: Eine Kugel animiert ihr Pulsieren (Breathe-Animation). Gleichzeitig bewegt sie sich über den Bildschirm (VelocityMotion). Beides zusammen: Animation für Werte, Motion für Position.

Animation vs. Motion

Komponenten

Motion Basis-Klasse

Interface:

interface MotionContext {
  deltaTime: number;    // Zeit seit letztem Frame
  time: number;         // Gesamtzeit seit Start
  canvasSize?: Size;    // Für Boundary-Berechnungen
}

abstract class Motion<T extends MotionOptions> {
  apply(position: Vector, context: MotionContext): Vector;
  getOffset(context: MotionContext): Vector;
}

LinearMotion

Lineare Bewegung zwischen zwei Punkten.

Optionen:

Modi:

VelocityMotion

Konstante Geschwindigkeit in eine Richtung.

Optionen:

NoiseMotion

Organische, zufällige Bewegung (Perlin Noise).

Optionen:

WaveMotion

Sinus-basierte Oszillation.

Optionen:

Wellenformen:

PathMotion

Bewegung entlang eines definierten Pfads.

Pfad-Typen:

Optionen:

OrbitMotion

Umlaufbahn um einen Mittelpunkt.

Optionen:

Boundary Behaviors

Verhalten an Canvas-Grenzen.

                                         ┌─────────────────────┐
                                    ┌───▶│   BounceStrategy    │
                                    │    └─────────────────────┘
                                    │    ┌─────────────────────┐
                                    ├───▶│   WrapStrategy      │
                                    │    └─────────────────────┘
                                    │    ┌─────────────────────┐
┌──────────┐    ┌─────────┐   Ja    │    │   ClampStrategy     │
│ Position │───▶│ Grenze? │────────▶├───▶└─────────────────────┘
└──────────┘    └─────────┘         │    ┌─────────────────────┐
                    │               ├───▶│   FadeStrategy      │
                    │ Nein          │    └─────────────────────┘
                    ▼               │    ┌─────────────────────┐
              ┌──────────┐         ├───▶│   ShrinkFadeStrategy│
              │  Weiter  │         │    └─────────────────────┘
              └──────────┘         │    ┌─────────────────────┐
                                   ├───▶│   DissolveStrategy  │
                                   │    └─────────────────────┘
                                   │    ┌─────────────────────┐
                                   ├───▶│   SendStrategy      │
                                   │    └─────────────────────┘
                                   │    ┌─────────────────────┐
                                   └───▶│   CompositeStrategy │
                                        └─────────────────────┘

Basis-Strategien

Erweiterte Strategien (NEU)

BoundaryResult

ShrinkFade Beispiel

const boundary = new ShrinkFadeStrategy({ 
  fadeDistance: 100, 
  minScale: 0.1,
  easing: 'easeOut'
});

const result = boundary.apply(position, canvasSize);

// Scale und Alpha anwenden
ctx.globalAlpha = result.distanceToEdge ?? 1;
ctx.scale(result.scale ?? 1, result.scale ?? 1);

// Objekt entfernen wenn zu klein
if (result.remove) {
  entities.delete(entity.id);
}

Dissolve Beispiel

const boundary = new DissolveStrategy({ particleCount: 30 });

const result = boundary.apply(position, canvasSize);

// Partikel-Burst verarbeiten
if (result.particleBurst) {
  particleSystem.emit({
    position: result.particleBurst.position,
    count: result.particleBurst.count,
    velocity: result.particleBurst.velocity,
  });
}

if (result.remove) {
  entities.delete(entity.id);
}

Send/Receive (Multi-Screen)

Die SendStrategy integriert sich mit dem MultiScreenClient für echte Multi-Screen Installationen:

import { 
  SendStrategy, 
  MultiScreenClient, 
  MultiScreenDebugPanel,
  calculateEntryPosition,
  calculateEntryVelocity,
  getOppositeEdge
} from '@carstennichte/cc-toolbox';

// 1. MultiScreenClient aufsetzen
const client = new MultiScreenClient(socket, 
  { artworkId: 'item-001', instanceId: '0' },
  { room: 'exhibition:demo', autoJoin: true }
);

client.configureTopology({
  arrangement: '1x3',  // 3 Screens nebeneinander
  position: 0,         // Linker Screen
  totalScreens: 3,
  wrapAround: true
});

// 2. SendStrategy für Boundary-Handling
const boundary = new SendStrategy({
  onExit: (pos, edge, data) => {
    // Über MultiScreenClient an Nachbar-Screen senden
    client.sendEntity(
      {
        type: 'Entity',
        exitPosition: { x: pos.x / canvasWidth, y: pos.y / canvasHeight },
        velocity: data.velocity,
        appearance: { color: data.color, size: data.size },
      },
      edge,
      'neighbor'  // Automatisch an richtigen Nachbarn
    );
  },
  exitData: () => entity.toData(),
});

// 3. Entities empfangen
client.onEntityReceive((data) => {
  const entryPos = calculateEntryPosition(data.exitEdge, data.entity.exitPosition, { bounds: canvasSize });
  const entryVel = calculateEntryVelocity(data.exitEdge, data.entity.velocity);
  
  const newEntity = createEntity({
    position: entryPos,
    velocity: entryVel,
    color: data.entity.appearance.color,
  });
  entities.add(newEntity);
});

// 4. Debug-Panel (optional)
const debugPanel = new MultiScreenDebugPanel(client);
debugPanel.show();

Send-Modi:

Siehe auch: Multi-Screen Communication

Composite (Kombinierte Effekte)

// Schrumpfen + Senden
const boundary = new CompositeStrategy({
  strategies: [
    new ShrinkFadeStrategy({ fadeDistance: 50 }),
    new SendStrategy({ onExit: sendToOtherScreen }),
  ],
  combineMode: 'merge',
});

Kombinieren von Motion

Motions können kombiniert werden:

// Orbit + Noise
const basePos = orbitMotion.apply(center, ctx);
const finalPos = noiseMotion.apply(basePos, ctx);

Tweakpane Integration

Alle Motions haben Tweakpane-Support.

Registrierung:

Typische Blades: