011 - Export System

The Export System enables SVG export, snapshots, video, and exhibition mode.

Why Multiple Export Formats?

Different use cases require different formats:

Vector (SVG): For pen plotters, print, laser cutters. Resolution-independent, precise paths.

Raster (PNG/JPG): For screens, social media. Exactly as displayed.

Video: For animations, social reels, archive.

Exhibition Mode: For galleries. Automated operation, restart on crash, parameter changes.

Components

SVG Export

Canvas-to-SVG conversion for plotters.

How Does It Work?

The SVGExporter doesn't "translate" canvas pixels – instead, it records all draw calls (lines, circles, arcs) and builds an SVG DOM tree. Each canvas layer becomes an SVG group (<g>).

Why is this complex? Because SVG has no gradient fills like Canvas, and vice versa. Some effects must be approximated.

Layer System

┌─────────────────────────────────────────┐
│              SVG Document               │
│  ┌───────────────────────────────────┐  │
│  │           <g id="layer-0">        │◄─── Background Layer
│  │  ┌─────────────────────────────┐  │
│  │  │  <rect fill="..."/>         │  │
│  │  └─────────────────────────────┘  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │           <g id="layer-1">        │◄─── Shapes Layer
│  │  ┌─────────────────────────────┐  │
│  │  │  <circle cx="..."/>         │  │
│  │  │  <path d="..."/>            │  │
│  │  └─────────────────────────────┘  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │           <g id="layer-2">        │◄─── Effects Layer
│  │  ┌─────────────────────────────┐  │
│  │  │  <polyline points="..."/>   │  │
│  │  └─────────────────────────────┘  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

SVGExporter API

Gradients and Patterns

The SVGExporter supports:

Definition:

exporter.defineGradient({
  id: 'myGradient',
  type: 'linear',
  stops: [
    { offset: 0, color: '#FF0000' },
    { offset: 1, color: '#0000FF' },
  ],
});

exporter.setFill('url(#myGradient)');

Pen/Color Management

Plotter Optimization

Snapshots

Screenshots of the canvas.

Snapshot API

Options

Metadata

Snapshots can contain embedded metadata:

{
  "timestamp": "2024-01-15T10:30:00Z",
  "artworkId": "sketch-001",
  "parameters": { "...": "..." },
  "dimensions": { "width": 1920, "height": 1080 }
}

Video Export

Record animations as MP4.

Flow

   Start Recording       Draw Loop        Stop Recording
         │                  │                   │
         ▼                  ▼                   ▼
   ┌──────────┐       ┌──────────┐        ┌──────────┐
   │ Configure│──────>│  Record  │───────>│  Encode  │
   │ Encoder  │       │  Frames  │        │ to MP4   │
   └──────────┘       └──────────┘        └──────────┘

VideoExporter API

Options

Codec Support

SequencePlayer

Plays snapshots as a slideshow.

Concept

A "sequence" is a playlist with snapshots. Each entry has display duration, optional transition, and parameter restore.

SequencePlayer API

Playlist Format

{
  "name": "My Sequence",
  "items": [
    {
      "snapshotPath": "snapshot-001.png",
      "duration": 5000,
      "transition": "fade",
      "parameters": { "...": "..." }
    }
  ],
  "loop": true
}

Transitions

ExhibitionRunner

Automated operation for galleries.

The Problem

In an exhibition, the artwork runs for days without supervision:

• What if it crashes?
• What if someone touches the USB cable?
• How do you change artworks?

The Solution

ExhibitionRunner manages multiple artworks and handles all edge cases:

┌─────────────────────────────────────────────────────────┐
│                   ExhibitionRunner                       │
│  ┌─────────────────────────────────────────────────┐    │
│  │                 Scheduler                        │    │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐           │    │
│  │  │Artwork 1│ │Artwork 2│ │Artwork 3│           │    │
│  │  │ 10 min  │ │ 15 min  │ │ 10 min  │           │    │
│  │  └─────────┘ └─────────┘ └─────────┘           │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │               HealthMonitor                      │    │
│  │  • Heartbeat Check                              │    │
│  │  • Auto-Restart on Crash                        │    │
│  │  • Log Rotation                                 │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

ExhibitionRunner API

Schedule Format

{
  "name": "Main Exhibition",
  "artworks": [
    {
      "path": "./artworks/waves/",
      "duration": 600,
      "parameters": { "speed": 0.5 }
    },
    {
      "path": "./artworks/particles/",
      "duration": 900
    }
  ],
  "options": {
    "loop": true,
    "restartOnCrash": true,
    "healthCheckInterval": 5000
  }
}

Health Monitoring

Fallback Behavior

ExhibitionPackageBuilder

Creates standalone exhibition packages.

Package Structure

exhibition-package/
├── index.html            # Entry Point
├── manifest.json         # Playlist + Settings
├── artworks/
│   ├── artwork-1/
│   │   ├── bundle.js
│   │   └── assets/
│   └── artwork-2/
├── snapshots/
│   └── emergency.png     # Fallback Image
└── launcher/
    ├── launcher.exe      # Windows
    ├── launcher.app      # macOS
    └── launcher.sh       # Linux

Builder API

Build Options