Ordered as made, from the first studies to the latest pieces.
 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 |  Camellia Tetrahedron p34 · 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 |  Double Progression p69 · after Julio Le Parc, 1959 |
 Brix p70 · after Horacio García Rossi, 1959 |  Equal & Unequal p71 · after Anton Stankowski, 1951 |  Pleated Checkerboard p72 · after Sarilotto, 1978 |
 Symphonie Inachevée p73 · after Victor Vasarely, 1966 |  Multiple Painting p74 · after Germaine Derbecq, 1969 |  34 p75 · after Marcello Morandini, 1968 |
 LAKH 22 VARZ p76 · after Elena Asins, 1991 |  Squares & Tabs p77 · after Kishio Suga, 1975 |  Diagonal Cascade p78 · after Theo van Doesburg, c. 1920s |
 Ascension p79 · after Vera Molnár, 1984 |
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 - Double Progression — after Julio Le Parc, 1959
p69 - Brix — after Horacio García Rossi, 1959
p70 - Equal & Unequal — after Anton Stankowski, 1951
p71 - Pleated Checkerboard — after Sarilotto, 1978
p72 - Symphonie Inachevée — after Victor Vasarely, 1966
p73 - Multiple Painting — after Germaine Derbecq, 1969
p74 - 34 — after Marcello Morandini, 1968
p75 - LAKH 22 VARZ — after Elena Asins, 1991
p76 - Squares & Tabs — after Kishio Suga, 1975
p77 - Diagonal Cascade — after Theo van Doesburg, c. 1920s
p78 - Ascension — after Vera Molnár, 1984
p79
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:3000A 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…p79.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).