Distributed rendering

This example demonstrates how to structure animations for distributed rendering, where multiple workers render different frame ranges independently and outputs are stitched together.

Overview

The distributed rendering example shows:

Stateless frame rendering
Deterministic composition structure
Frame-independent state calculation
Optimizations for parallel execution

Complete implementation

composition.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Composition</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #111;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="composition-canvas"></canvas>
  <script type="module" src="./src/main.ts"></script>
</body>
</html>

main.ts

import { Helios, HeliosState } from '@helios-project/core';

const canvas = document.getElementById('composition-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

const resizeCanvas = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    console.log(`Canvas resized to ${canvas.width}x${canvas.height}`);
};

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

const duration = 5; // seconds
const fps = 30;

const helios = new Helios({
    duration,
    fps
});

helios.bindToDocumentTimeline();

function draw(currentFrame: number) {
  const time = currentFrame / fps * 1000; // in ms
  const progress = (time % (duration * 1000)) / (duration * 1000);

  const { width, height } = canvas;

  // Clear
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, width, height);

  const x = progress * width;
  const y = height / 2;
  const radius = 50;

  // Draw moving circle
  ctx.fillStyle = 'royalblue';
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fill();

  // Draw rotating square
  const squareSize = 100;
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(progress * Math.PI * 2);
  ctx.fillStyle = 'tomato';
  ctx.fillRect(-squareSize / 2, -squareSize / 2, squareSize, squareSize);
  ctx.restore();
}

helios.subscribe((state: HeliosState) => {
    draw(state.currentFrame);
});

declare global {
  interface Window {
    helios: Helios;
  }
}
window.helios = helios;

Key patterns for distributed rendering

Stateless frame calculation

Each frame must be renderable independently without relying on previous frames:

// Good - stateless, frame-independent
function draw(currentFrame: number) {
    const progress = currentFrame / totalFrames;
    const x = progress * width;
    // All state derived from currentFrame
}

// Bad - stateful, depends on previous frames
let x = 0;
function draw() {
    x += velocity; // Requires previous frame's x value
}

Deterministic calculations

All calculations must be deterministic given only the frame number:

function draw(currentFrame: number) {
    // Frame-based time (deterministic)
    const time = currentFrame / fps;
    
    // Deterministic progress calculation
    const progress = (time % duration) / duration;
    
    // All positions derived from frame number
    const x = progress * width;
    const rotation = progress * Math.PI * 2;
}

Avoid temporal dependencies

Never store state between frames that affects rendering:

// Good - no temporal dependencies
helios.subscribe((state) => {
    const angle = (state.currentFrame / 30) * Math.PI * 2;
    draw(angle);
});

// Bad - state accumulates across frames
let angle = 0;
helios.subscribe(() => {
    angle += 0.1; // Non-deterministic across frame ranges
    draw(angle);
});

Frame-derived randomness

Use deterministic random functions seeded by frame number:

import { random } from '@helios-project/core';

function draw(currentFrame: number) {
    // Same frame always produces same random values
    for (let i = 0; i < 100; i++) {
        const seed = currentFrame * 1000 + i;
        const x = random(seed) * width;
        const y = random(seed + 10000) * height;
        // Draw element at (x, y)
    }
}