practices

An ongoing archive of generative art — drawn with code.

67 standalone sketches in p5.js & three.js: geometric studies, flow fields, recursive fractals, image mosaics, op-art recreations, and volumetric 3D glass. Every piece is a single self-contained script — open it, run it, remix it.

---

Gallery

_{Ordered as made, from the first studies to the latest pieces. Click any sketch to read its source.}

Shadow Square p0 · geometric	Bisected Square p1 · geometric	Diagonal in a Box p2 · geometric
Random Diagonals p3 · interactive	Diagonal Tiles p4 · tiling	Tiling Lines p5 · tiling
Displaced Lines p6 · geometric	Jittered Dots p7 · geometric	Displaced Rows p8 · generative
De Casteljau p9 · bezier	Tiling Curves p10 · tiling	Noise Curves p11 · perlin-noise
Joy Division Logo p12 · generative	Drifting Splines p13 · generative	Noise Curtain p14 · flow-field
Random Tiles p15 · tiling	Rotated Grid p16 · geometric	Drifting Curves p17 · generative
Tile Drift p18 · recursion	Triangle Fractal p19 · recursion	Eye of Sauron p20 · recursion
Chromatic Tiles p21 · tiling	Twisted Pipes p22 · generative	Braided Pipes p23 · generative
Silky Drift p24 · generative	Fractal Circles p25 · fractal	Flow Field p26 · flow-field
Mona Lisa Circles p27 · halftone	Mona Lisa Rings p28 · image-sampling	Mona Lisa Lego p29 · pixel-art
Audio Spectrum p30 · audio	Maze Escape Path p31 · geometric	Parametric Flower p32 · webgl
Camellia Cloud p33 · webgl	Calico Logo p35 · logo	Pavilion on Fire p36 · halftone
Dystrophin Poster p37 · image	Folded Grids p38 · after John Walker, 2008	Folding Grid p39 · geometric
Vanish p40 · after Sol LeWitt, 1994	Ring & Cross p41 · after Sol LeWitt	Wall Drawing #821 p42 · after Sol LeWitt, 1997
Painting, Blue p43 · after Ad Reinhardt, 1953	Painting, Black p44 · after Ad Reinhardt, 1960s	Shape Library p45 · grid
Seven Colors p46 · grid	Accent Block Grid p47 · grid	Shape Browser p48 · svg
2×2 Block Grid p49 · grid	Color Accent Grid p50 · grid	Shape Mosaic p51 · geometric
18 Compositions p52 · grid	Six Compositions p53 · grid	Shape Collage p54 · grid
Density Gradient p55 · grid	Scale & Overlap p56 · collage	Order to Chaos p57 · grid
Shape Packing p58 · packing	Mondrian Split p59 · recursion	Radial Ripples p60 · concentric
Converging Grid p61 · after Pixel Symphony, 2025	DAC Badges p62 · generative	Cathedral Glass p63 · three.js
God-Ray Falloff p64 · three.js	Leaded Glass Dome p66 · three.js	3 Carrés Noirs p67 · after Vera Molnár, 1950
Central Gravity p68 · after Milan Dobeš, 1965

---

Recreations & references

Several pieces are faithful recreations of existing works, studied by rebuilding them in code:

• Folded Grids — after John Walker, 2008  p38
• Vanish — after Sol LeWitt, 1994  p40
• Ring & Cross — after Sol LeWitt  p41
• Wall Drawing #821 — after Sol LeWitt, 1997  p42
• Painting, Blue — after Ad Reinhardt, 1953  p43
• Painting, Black — after Ad Reinhardt, 1960s  p44
• Converging Grid — after Pixel Symphony, 2025  p61
• 3 Carrés Noirs — after Vera Molnár, 1950  p67
• Central Gravity — after Milan Dobeš, 1965  p68

The early line-and-grid studies (p0–p8) follow exercises from Tim Holman's Speedrunning through p5.js talk.

Run it locally

npm install
npm run dev          # http://localhost:3000

A React + Vite gallery loads each sketch in an isolated iframe (p5.js from CDN). Use the arrow keys or the control panel to move between pieces; press S to save the current frame as a PNG.

How it's built

• Sketches live in artworks/ as vanilla p5.js / three.js scripts (p0.js … p68.js).
• A small Vite plugin scans that folder and auto-generates the gallery manifest — adding a file is all it takes.
• The thumbnails above are rendered headlessly straight from the live sketches (see scripts/capture_gallery.py).

_{67 sketches · 62 p5.js · 5 WebGL/three.js · MIT licensed}