011 - Export

Export-Funktionen für SVG, Video, Snapshots und Exhibition Packages.

Das Problem

Du hast stundenlang an den Tweakpane-Einstellungen geschraubt und endlich die perfekte Konfiguration gefunden. Jetzt willst du:

  1. Diese Einstellungen speichern – nicht mühsam Zahlen abschreiben
  2. Mehrere Variationen sammeln – "Morgen", "Abend", "Dramatisch"
  3. Automatisch durchspielen – wie eine Playlist
  4. In einer Ausstellung zeigen – ohne technisches Know-how vor Ort

Die Lösung: Snapshots (einzelne Einstellungen), Playlists (Sequenzen von Snapshots), und Exhibition Packages (selbstständige Pakete für Kiosk-Betrieb).

Komponenten

Klasse Datei Funktion
Exporter Exporter.ts SVG-Export
SVGContext SVGContext.ts SVG-Rendering
SnapshotManager SnapshotManager.ts Bild-Snapshots
VideoExporter VideoExporter.ts Video-Aufnahme
SequencePlayer SequencePlayer.ts Snapshot-Sequenzen
ExhibitionRunner ExhibitionRunner.ts Kiosk-Mode

SVG Export

Für Pen-Plotter und Vektor-Grafiken.

Exporter

Methoden:

Methode Beschreibung
toSVG(source, opts) Canvas/Context → SVG String
download(svg, filename) SVG herunterladen

SVGContext

Spezieller Kontext für SVG-Rendering.

Features:

  • Layer-Unterstützung (svgLayerName)
  • Gradient-Support (SVGGradient)
  • Pattern-Support (SVGPattern)

Layer-Konzept:

┌─────────────────────────────────────────────────┐
│                  SVG Document                   │
└─────────────────────────────────────────────────┘
         │              │              │
         ▼              ▼              ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│     Layer:      │ │     Layer:      │ │     Layer:      │
│   background    │ │      main       │ │   foreground    │
└─────────────────┘ └─────────────────┘ └─────────────────┘
         │              │              │
         ▼              ▼              ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│  Elemente...    │ │  Elemente...    │ │  Elemente...    │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Jeder Brush kann svgLayerName setzen → Trennung für Plotter mit verschiedenen Stiften.

SVGGradient

Typ Beschreibung
linear Linearer Gradient
radial Radialer Gradient

SVGPattern

Option Beschreibung
width/height Muster-Größe
patternUnits 'userSpaceOnUse' oder 'objectBoundingBox'

Snapshots

Ein Snapshot ist ein "Foto" deines ParameterObjects zu einem bestimmten Zeitpunkt. Er enthält alle Tweakpane-Einstellungen plus Metadaten (wann, welches Artwork, welche Version).

Wozu Snapshots?

  • Einstellungen sichern – "Das gefällt mir, das speichere ich"
  • Variationen verwalten – "Morgen-Stimmung", "Nacht-Modus", "Chaos"
  • Teilen – JSON-Datei an andere schicken
  • Versionieren – Smart Patching bei Tweakpane-Änderungen

SnapshotManager

Konfiguration:

Option Typ Beschreibung
format 'png' | 'jpeg' | 'webp' Bildformat
quality number JPEG/WebP Qualität (0-1)
maxSnapshots number Max. gespeicherte Snapshots

API:

Methode Beschreibung
capture(canvas) Snapshot erstellen
save(snapshot, path) Snapshot speichern
load(path) Snapshot laden
list() Alle Snapshots
delete(id) Snapshot löschen

Snapshot-Struktur:

interface Snapshot {
  id: string;
  data: string;        // Base64
  meta: SnapshotMeta;
}

interface SnapshotMeta {
  timestamp: number;
  width: number;
  height: number;
  format: string;
  parameters?: any;    // ParameterObject zum Zeitpunkt
}

Video Export

Video-Aufnahme vom Canvas.

VideoExporter

Konfiguration:

Option Typ Beschreibung
format VideoFormat 'webm' oder 'mp4'
frameRate FrameRate 24, 30, 60 fps
quality QualityPreset 'low', 'medium', 'high'
duration number Max. Dauer (Sekunden)

API:

Methode Beschreibung
startRecording() Aufnahme starten
stopRecording() Aufnahme stoppen
pauseRecording() Pausieren
resumeRecording() Fortsetzen
captureFrame() Einzelframe aufnehmen
exportVideo() Video exportieren

Recording State:

State Beschreibung
idle Bereit
recording Nimmt auf
paused Pausiert
processing Video wird erstellt

Frame-Sequenz Export

Für externe Video-Tools:

videoExporter.exportFrameSequence({
  frameCount: 300,
  format: 'png',
  outputDir: './frames/'
});

Sequence Player (Snapshot-Playlist)

Hast du mehrere Snapshots, willst du sie vermutlich automatisch durchspielen lassen – wie eine Musik-Playlist, nur für Artwork-Variationen.

Der SequencePlayer macht genau das:

  • Spielt Snapshots nacheinander ab
  • Unterstützt verschiedene Modi: Sequential, Random, Shuffle
  • Kann sanfte Übergänge (Morph-Transitions)
  • Läuft endlos für Ausstellungen

Das Prinzip:

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│    Snapshot:    │ 30s  │    Snapshot:    │ 30s  │    Snapshot:    │ 30s  │    Snapshot:    │
│     Morgen      │─────▶│     Mittag      │─────▶│     Abend       │─────▶│     Nacht       │
└─────────────────┘      └─────────────────┘      └─────────────────┘      └─────────────────┘
         ▲                                                                          │
         │                                                                          │
         └──────────────────────────────── loop ────────────────────────────────────┘

API:

Methode Beschreibung
loadPlaylist(playlist) Playlist laden
play() Abspielen
pause() Pausieren
stop() Stoppen
seek(index) Zu Snapshot springen
setSpeed(speed) Geschwindigkeit

Playlist erstellen:

Funktion Beschreibung
createPlaylistFromFiles(files, duration) Einfache Playlist aus Dateien
createMorphPlaylist(files, duration, morphTime) Mit sanften Übergängen

Playlist-Modi:

Mode Beschreibung
sequential Der Reihe nach
random Zufällig (mit Wiederholung)
shuffle Zufällig (jeder nur einmal)

Transition-Typen:

Type Beschreibung
cut Harter Schnitt
fade Überblenden (Opacity)
morph Parameter werden interpoliert

Exhibition Runner (Artwork-Playlist)

Während der SequencePlayer Snapshots innerhalb eines Artworks durchspielt, ist der ExhibitionRunner eine Ebene höher: Er spielt verschiedene Artworks nacheinander ab.

Zwei Ebenen:

┌─────────────────────────────────────────────────────────────────────────┐
│               ExhibitionRunner (Artwork-Playlist)                       │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │    Artwork:     │  │    Artwork:     │  │    Artwork:     │          │
│  │   Particles     │  │      Grid       │  │    Flocking     │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘
          │                     │
          │                     │
          ▼                     ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                   SequencePlayer pro Artwork                            │
│         ┌───────────────────┐       ┌───────────────────┐               │
│         │    Snapshot 1     │       │    Snapshot A     │               │
│         └───────────────────┘       └───────────────────┘               │
│         ┌───────────────────┐       ┌───────────────────┐               │
│         │    Snapshot 2     │       │    Snapshot B     │               │
│         └───────────────────┘       └───────────────────┘               │
└─────────────────────────────────────────────────────────────────────────┘

Registration:

registerExhibitionArtwork('artwork-001', {
  sketch: mySketch,
  config: { ... }
});

Konfiguration:

Option Typ Beschreibung
artworks string[] Artwork-IDs
cycleDuration number Wechsel-Interval (ms)
transition string Übergangseffekt
showControls boolean Controls anzeigen?

Exhibition Package Builder

Das Exhibition Package ist das Endprodukt für Ausstellungen: Ein selbstständiges Paket, das auf einen USB-Stick kopiert und auf jedem Rechner mit Browser gestartet werden kann – ohne Installation, ohne Internet, ohne technisches Know-how vor Ort.

Was ist drin?

exhibition-package/
├── index.html          # Kiosk-Oberfläche mit Controls
├── artworks/
│   ├── artwork-001/    # Gebündelte Artworks
│   ├── artwork-002/
│   └── artwork-003/
├── assets/
│   └── cc-toolbox.js   # Die Bibliothek
├── playlist.json       # Welche Artworks in welcher Reihenfolge
└── config.json         # Ausstellungs-Infos (Titel, Ort, Datum)

Kiosk-Features:

Feature Beschreibung
Auto-Hide Cursor Cursor verschwindet nach Inaktivität
Keyboard Shortcuts Space=Play, Pfeile=Prev/Next, F=Fullscreen
Overlays Aus (Schwarzbild), Info, Testmuster für Beamer
Control Bar Erscheint bei Mausbewegung am unteren Rand

Shell Script: exhibition-package-builder.mjs

Erstellt Exhibition Packages interaktiv oder automatisiert.

Verwendung:

# Interaktiv
node shell-scripte/exhibition-package-builder.mjs

# Mit Config
node shell-scripte/exhibition-package-builder.mjs --config config.json

# Schnellmodus
node shell-scripte/exhibition-package-builder.mjs --quick meine-ausstellung 1,2,3

Package-Struktur:

exhibition-package/
├── index.html          # Kiosk-Oberfläche
├── artworks/
│   ├── artwork-001/
│   ├── artwork-002/
│   └── artwork-003/
├── assets/
│   └── cc-toolbox.js
└── config.json

Visitor Snapshot Service

Für interaktive Installationen.

Konzept:

  • Besucher kann Snapshot auslösen
  • Speicherung auf Server
  • QR-Code zum Abrufen

API:

Methode Beschreibung
requestSnapshot(canvas) Snapshot anfordern
getState() Aktueller Status
getDownloadUrl(id) Download-URL