Compositor

The compositor is the rendering engine for design mode. It takes the algorithm's canvas output and overlays the design layer stack on top, producing the final composite image.

Rendering Pipeline

1. Algorithm render — The sketch algorithm draws to the base canvas
2. Layer iteration — Layers are processed bottom-to-top (index 0 first)
3. Visibility check — Hidden layers are skipped
4. Plugin render — Each layer's plugin renders it to an offscreen canvas
5. Transform apply — Position, scale, rotation, and anchor are applied
6. Blend composite — The layer is composited onto the output using its blend mode and opacity
7. Final output — The composited result is the visible sketch

Implementation

The compositor runs inside the sketch iframe. It uses the Canvas 2D globalCompositeOperation for blend modes and standard 2D transforms for positioning.

Algorithm Canvas → [Layer 0] → [Layer 1] → ... → [Layer N] → Final Output
                     ↑            ↑                  ↑
                  Plugin       Plugin              Plugin
                  Render       Render              Render

Performance

• Only visible layers are rendered
• Layers use offscreen canvases to avoid re-rendering unchanged layers
• The compositor is triggered by layer changes, not on every frame
• For animated sketches, the compositor runs after each algorithm frame

Accessing Layer Data

Algorithms can read (but not write) layer data via __genart_design:

// Inside a sketch algorithm
const layers = window.__genart_design?.layers;
if (layers) {
  // React to layer positions, colors, etc.
}

This enables algorithms to respond to design layer changes dynamically.