Engines

The creative engines follow a simple pattern: rules generate data, visualizations render it.

Sequence Renderer

The Pattern

Rule (math) → Sequence → Visualization (draw) → Canvas

Rules define what numbers to generate. Visualizations define how to draw them. They’re independent — mix any rule with any visualization.

Available Rules

Available Visualizations

Data Structures

Rule interface:

type SequenceRule = {
  name: string;
  id: string;
  description: string;
  maxSteps: number;
  getNext: (params: NextStepParams) => number;
};

Visualization interface:

type Visualization = {
  id: string;
  name: string;
  draw: (canvas, sequence) => void;
};

Shared Patterns

State Management

Engines use Zustand for state:

const { value, setValue } = useStore();

Pluggable Architecture

Add new rules or visualizations by:

1. Defining the data structure
2. Adding to the registry array
3. UI updates automatically

This keeps the engine core stable while experiments evolve freely.

Extending

• Add a rule: See Adding a Sequence Rule
• Add a visualization: See Adding a Visualization