rec.mp4

Substrate | Pixi

This is a React + Astro + PixiJS port of the "Substrate" artistic visualization algorithm.

Original implementation: complexification.net/gallery/machines/substrate/

Gallery

Sub Urban	Monochrome Ink	Summer Pool
substrate_suburban.mp4	substrate_monochromeink.mp4	substrate_summerpool.mp4

Tech Stack

graph TD
    A[Astro] --> B[React]
    B --> C[PixiJS Engine]
    C --> D[WebGL Output]
    B --> E[Nanostores]

Loading

Setup

mise trust
mise install
npm ci

Development and Testing

npm run dev      # Start development server
npm run build    # Build static site
npm run format   # Format code with Prettier
npm run typecheck && npm run lint # Quality checks
npm run test     # Component tests (Storybook + Vitest)

Credits

• Algorithm: Jared Tarbell (Substrate)
• Assets: pollockShimmering.gif is sourced from the processing-js repository.