Engine 01 p5.js

2D canvas. Perlin noise particles. Palette interpolation. Fog vignette. The prototype engine.

2D CanvasPerlin NoiseParticlesLightweight
Engine 02 three.js

WebGL 3D. True camera movement. GPU particle systems. Depth of field. Cinematic ceiling.

WebGL3D CameraGPU ParticlesHigh Fidelity
Engine 03 Raw Canvas 2D

No library. Bare browser canvas API. Maximum control, minimum abstraction. Fastest baseline.

No LibraryCanvas APIMinimalFast
Engine 04 PixiJS

WebGL 2D renderer. Sprite batching. Blur and glow filters. Strong middle ground between p5 and three.

WebGL 2DSprite BatchFiltersPerformance
Engine 05 regl

Functional WebGL. Write GLSL shaders directly. Hundreds of thousands of particles. Low-level power.

GLSL ShadersWebGLFunctionalHigh Volume
Engine 06 SVG + D3

Vector-based. Resolution independent. Smooth D3 transitions. Low particle count, infinite element quality.

VectorD3.jsResolution FreeTransitions

What is this

Forma Composition is a generative visual engine. Each renderer interprets the same underlying composition data — particle counts, palette, motion parameters — through a different graphics primitive. The result is the same piece rendered six ways.

How to use

Pick a composition from the selector above, then click any engine card to launch it full-screen. Inside each engine: press D for the debug HUD. Most engines have their own animation and palette controls in a top bar.

The architecture

Compositions are JSON files that describe visual parameters without caring about the renderer. Engines read the same spec and produce different outputs. This is the same principle as FormaComposition (MIDI) — encode intent, let the system execute.