Algorithmic Art Gallery

Live: https://jasonw22.github.io/algorithmic-art-gallery/

A static site exhibiting interactive algorithmic art demos. Each demo has its own page with a sidebar of live parameter controls; the current parameter state lives in the URL so any view is bookmarkable and shareable. Click any thumbnail in the gallery to open it.

Develop

npm install
npm run dev

Opens the dev server at http://localhost:4321/algorithmic-art-gallery/.

Build

npm run build

Outputs static HTML/JS to dist/. Deployable to any static host (configured for GitHub Pages by default).

The prebuild step syncs technique references from vendor/algorithmic-art-references/ into the Astro content collection so they render at /techniques/<slug>/. To pull from a different location, point ALGORITHMIC_ART_REFS_DIR at it:

ALGORITHMIC_ART_REFS_DIR=/path/to/refs npm run build

Capture thumbnails

The gallery cards play short looping WebM previews; demo pages use 1200×630 OG images for social media. Both are captured by:

npm run capture

Requirements:

• dist/ must exist (run npm run build first)
• For WebGPU demos, the system Chrome with hardware GPU access is launched in a visible window. Other demos use Playwright's bundled headless Chromium under SwiftShader.

Captured files (public/thumbs/* and public/og/*) are committed to the repo so CI doesn't need to re-capture.

Add a demo

npm run new-demo

Prompts for title, slug, family, mode, concept, tags. Scaffolds src/content/demos/<slug>.json and src/sketches/<slug>/sketch.js. Edit the sketch following the pattern in any existing demo (e.g. src/sketches/lorenz/) and the techniques referenced in the meta JSON.

Deploy

The site auto-deploys to GitHub Pages on every push to main. The CI workflow reads references from the vendored copy in the repo, so no external dependencies are needed on the runner. Captures are NOT regenerated by CI — commit them locally with npm run capture when sketches change.

Tech stack

• Astro 5 static site generator with content collections
• Tailwind CSS for the gallery styling
• Vitest for unit tests (URL state, taxonomy)
• Playwright for thumbnail and OG image capture
• Five runtime modes for sketches:
  • p5 — p5.js 2D
  • thing — Canvas 2D with vendored tng (Oklab color, SDFs, PRNG, Perlin noise)
  • scene — Three.js 3D scene with OrbitControls
  • shader — fullscreen GLSL fragment shader (raymarching, fractals, etc.)
  • webgpu — WGSL compute + render pipelines (large particle systems, fluid)