Demos
Generative art
Each run comes out different. Most of them paint a new one on click.
gen-882025
Based on Oskar Stålberg's Townscaper quad algorithm. Mostly a geometric exercise: the quite pleasant colors come from categorizing the shapes. The green areas are shapes of four quads each, while the greys form rings of quad shapes.
gen-1002024
Regular n-gons placed with collision avoidance, glowing spectral.js gradients and sparkle.
gen-1012024
Relaxed Voronoi cells turned into an interlocking woven pattern with soft shadows.
gen-1032024
Projected 3D cubes whose faces are recursively split and decorated with palette rectangles, like a glowing city of blocks.
gen-1042024
Noise-distorted blend of a gradient and a stripy copy of its colors, for soft, painterly edges.
gen-1062024
Generative compositions of shapes that combine either as XOR fill or as clipping areas, rendered in palette-based gradients with a special rough, noisy texture.
gen-1092024
Color interpolation experiment: a Voronoi diagram whose Delaunay triangles are subdivided with spectral.js in-between colors, then repainted as a second, finer Voronoi.
gen-892024
Animated cyber snowflake: simple line drawing repeated with rotational and mirror symmetry through transformed canvas operations.
gen-932024
Shapes between random points from a fixed set of screen positions, filled even-odd with spectral.js gradients and screentone.
gen-992024
Recursive polygon intersection: the screen is cut again and again into smaller rectangles and triangles, filled from a palette, one step outlined fat.
gen-652023
Boids walk straight lines until they hit another line, then branch off at right angles or fan out into hatching.
gen-702023
Three hexagonal dot grids in red, green and blue, layered with "lighten" and drifting through noise space in rotation and zoom.
gen-712023
Connected arcs traverse noise space and steer a Jackson-Pollock-like drip painting.
gen-722023
A rotating square, fractally subdivided by simplex noise into a wobbling loop, drawn as stacked rainbow arcs with "lighten" compositing. Animated.
gen-742023
Early work in grainy gradients. Nice flowy shapes, the gradients are meh.
Reverse Coloring 012023
Weird experiment in backwards-projecting a page from a reverse coloring book, where the colors are already there and you fill in the lines.
gen-332022
Abstract shapes with overlapping, brushed edges, reusing the packing algorithm from Genuary 2022 day 12.
gen-342022
Glitchy blurred gradient shapes. A happy accident.
gen-352022
Layered gradient circles clipped by other circles, dotted with small accents.
gen-392022
Layered compounds of rounded squares with drop shadows, like camouflage.
gen-452022
Truchet-like squiggles on an irregular Townscaper-style quad grid.
gen-502022
Random colored shapes behind a masked blur that comes and goes across the image, like bokeh.
gen-512022
The masked blur of gen-50 on layered polygons with randomly rounded corners.
gen-522022
Masked blur again, with a curl-noise distortion pass that tears the shapes into wisps. Renders at double resolution, so it is slow.
gen-532022
Curl distortion the other way round, blended with the original shapes for extra smooth, folded forms.
gen-542022
Circle layers with cut-outs and stripy gradients on black.
gen-552022
Voronoi cells painted either as polygons or as the circumcircle of their three outermost vertices.
gen-582022
Generative flowers growing on an irregular quad grid, with Truchet-tile stems.
gen-592022
Gradient shapes smeared by a Voronoi-based flow distortion, with a glitch effect.
gen-612022
gen-59 with a simplex-noise flow distortion.
gen-622022
Speckled edges on a Voronoi diagram, reminiscent of a hive-mind colony growing along strands.
Genuary 2022.122022
Genuary day 12, "packing": a crowd of little block heads packed into a quad grid, drawn with a hand-rolled software renderer.
Genuary 2022.22022
Genuary day 2, "dithering": dithered 3D sphere blobs smeared into a painterly mess.
Genuary 2022.32022
Genuary day 3, "space": a planet with a moon in front of swirling star trails. Starry, starry space.
Genuary 2022.42022
Genuary day 4, "the next next Fidenza": my connected-arc curves given thickness, with many parameters for very different outcomes.
Genuary 2022.52022
Genuary day 5, "destroy a square": a gradient square cracked by fractal lines.
Genuary 2022.72022
Genuary day 7, "Sol LeWitt wall drawing": random polygons drawn as thin pastel lines.
Genuary 2022.82022
Genuary day 8, "single curve only": one long curve of connected, smoothed arcs, curling over the lettering.
Genuary 2022.92022
Genuary day 9, "architecture": classicist building facades with windows, fake shadows and dappled sky light.
Abstract (Animated)2021
Animated version of an abstract digital painting of mine: shapes drift over a grainy noise background.
Curved Mask2021
3D simplex noise where one axis is the distance from the centre and the other two trace a circle by angle, giving a swirling black-and-white grain.
gen-012021
Iterative generation from two operations: drawing circle blobs and randomly shredding them.
gen-072021
Fixed-palette blocks arranged in polar coordinates around an empty centre; an R-tree keeps collisions down.
gen-082021
Radial shard explosion: random hole-y dot grids on a polar matrix, wrapped in convex hulls.
gen-092021
Truchet tiling generator with multi-line arcs in shifting colors.
gen-112021
Boid painting experiment: flocks smear short colored strokes. ("meh", says the README.)
gen-122021
Fine swirling lines traced from random color dots through a simplex-noise flow field.
gen-162021
Simulated canvas brush strokes hatching the cells of a Voronoi diagram.
gen-172021
Overlapping alpha-transparent circles with gradient fills.
gen-182021
Arcs connected to arcs connected to arcs: colored meandering chains.
gen-202021
Dashes patterned along a wavy flow, colored from several intervals on the color wheel.
gen-242021
Stripy random shapes, circles and squares over diagonal bands.
gen-252021
Snowy Voronoi: grainy, softly masked cells fading from blue to pink.
gen-262021
Colorful shifting bezier curves sweeping across the screen in dense bundles.
gen-272021
Weighted-random brush methods (strokes, dashes, splats) painted along paths from a double pendulum simulation.
gen-292021
Overlaid circles and squares, their overlap counts mapped noisily onto a pretty palette.
Happy New Year 20222021
New Year's card: hexagon-packed circles and confetti spelling "Happy New Year 2022".
Lines2021
Simplex-noise distorted quadratic curves in pretty gradients.
Rectgen2021
Shape packing exercise that renders something vaguely reminiscent of a very colorful Mondrian.
Color Pong2020
Generative art experiment: a hundred balls burst from the centre, steered by simplex noise, leaving colored trails that weave into a net.
Funky Quads2020
Organic quad grid: a hexagon of triangles, random edges removed, the rest subdivided into quads and relaxed into a smooth irregular mesh.
Grow2020
Geometric point growth: a chain of points keeps inserting new ones and pushing apart, folding into a coral-like ring.
Landscaper2019
Painterly landscape generator: sky gradient with a low sun, clouds built from soft noise brushes, layered mountains.
Realtime & shaders
GLSL shaders, raymarching and 3D: closer to the old demoscene than to generative art.
Burning Chrome 20212021
Raymarched liquid-chrome blob reflecting an environment map, in the spirit of one of my old demos.
Curl2021
Curl noise test: a GLSL curl-noise surface shaded like flowing liquid metal.
Curl Particles2021
Curl noise particles: two thousand instanced WebGL particles drifting through 3D curl noise.
Disinfo2021
Raymarching experiment #9: a hypnotic spiral in garish colors. Add ?sym=N to the URL for rotational symmetry.
rm-072021
Raymarching experiment #7: a mandala of distance-field contours in blue, purple and red with five-fold symmetry.
rm-082021
Raymarched scene with environment mapping that becomes a mandala: set the number of symmetry axes lower right (0 turns mirroring off), drag to move the camera.
Shards2021
3D port of gen-08: glassy shards exploding towards the camera, with depth of field (three.js).
Caves2020
Raymarched flight through endless simplex-noise caves.
develop.me FX2020
Background effects I wrote for the develop.me announcement site for Daimler: a spring-simulated wobbly ring around the "o" over a noise-driven terrain of dots.
Hexagonia2020
Kaleidoscopic union of cube shapes, raymarched.
Mandala2020
Rainbow mandala shader with rotational mirror symmetry and pulsing hue variations.
Pattern 022020
Pattern shader after a tutorial, with more sines, more movement and colors from a palette: interlocking red, white and navy petals.
Raymarching Lab2020
Raymarching playground: spheres, box and torus with soft shadows and noisy rainbow textures.
rm-022020
Raymarched hexagonal pillars on a blue floor with soft shadows.
rm-032020
Hexagonal pillars with iridescent shading on pink.
rm-04: Tritorus2020
Raymarched three-loop ribbon torus over a bright gradient.
rm-052020
Raymarched rounded cube floating over a soft pastel gradient.
Schalke 042020
Raymarched logo of my favorite football club, flying through a coal mine.
Spooky2020
Halloween shader: ghost, spider in its web and a jack-o'-lantern.
Voronoi Sea2020
Raymarched cube floating on a wavy sea of Voronoi-shaped swells under a hazy sky.
Tree Anim2019
Canvas tree animation through the seasons. The tree and the particles live on one canvas; a second background canvas from the horizon down is never cleared, so grass, fallen leaves and snow splotches build up on it over time.
Sketch Materials2018
Custom three.js sketch shader based on barycentric coordinates and 3D noise: renders a scene as pen-and-ink hatching that follows light and shadow.
Q-Effect2017
Question mark effect for the Team17 video, where it was used as a mask: wobbling contour bands around points taken from an SVG file of shapes, adaptively linearized.
Snowy2014
Canvas snowfall with randomly generated snowflakes.
Somewhere Beyond the Sea2013
Another demo built on canvas blobs and controlled fading: rows of glowing blue blobs bobbing in waves.
Color Tunnel2012
Old recreation of an even older Amiga blitter zoom effect: a feedback zoom with randomly placed rectangles. The colors come from bezier curves through color space, meant to look really cool.
Pendula2012
A row of ten pendula of increasing length, seen from the longest one.
Time-Shift Zoom-Rotator2012
Canvas remake of the end-credits effect from the Haujobb demo "Jammin'": a zoom-rotator with per-line time shift and blur. Mouse controls it.
Games
Playable prototypes.
Tower Defense2025
Again based on Oskar Stålberg's Townscaper algorithm: the idea was a tower defense game on that kind of grid. The coloring shows a generated medieval ring fortress with defensive and recreational greens and plots for different kinds of buildings.
Tunruss2019
3D tunnel game, work in progress: fly a glTF ship with a shield down a striped noise tube (three.js, uses pointer lock).
Racer2018
three.js racing prototype with cannon.js physics: drive a hover-racer around a checkered track. With sound.
Tetrominos2012
Falling-blocks puzzle game on canvas.
Thrust 20102012
HTML5/canvas game inspired by the C64 classic Thrust, redone for mouse control. Six levels of agility and shooting.
Experiments & tools
Algorithm tests, library examples and small helpers.
Automaton Domain2021
Client-side domain editor for Automaton: entity types as nodes with their fields and relations. React and MobX.
Islands2021
Exploratory 3D work with my organic-quads library: an island on an organic quad grid over a sky-lit sea, with an editor for placing and bending tiles (undo, saved in localStorage).
Box/Circle Intersection2020
Red box and blue circle you can adjust interactively; compares the calculated intersection area with the number of purplish pixels read back.
Sphrites2020
three.js experiment: transparent spheres implemented as sprites, in rotating concentric rings.
Pixgame2019
Exploratory world simulation on a pixi-tilemap: generated terrain with rivers, forests, rocks and houses.
Graph Layout2016
Layout for directed acyclic graphs, shown on a random graph with adjustable node count and thresholds.
Mind Map2014
Simple SVG mind map tool in React that saves to localStorage (2014).
Ship Anim2014
Rendered ship following the mouse. Note how holding the mouse button animates it in and out of a stealth mode
Hilbert2013
A Hilbert curve drawn pixel by pixel on canvas.
Many Eyes2013
Hundreds of eyes all looking at the mouse. I started with SVG <use>, but it performed better on plain canvas.
Earclipping Tesselator2012
Interactive ear-clipping tesselator: Cmd/Ctrl-click to start a polygon, click to add points, Cmd/Ctrl-click again to close it and watch it split into triangles (Raphaël SVG).
Tree Layout2012
TreeLayout helper: lays out hierarchical trees both space-saving and pretty. JavaScript port of "Node-Positioning for General Trees" by John Q. Walker II.
Triangles2012
Drag the corners of a triangle and watch how the inner triangle formed is always an isosceles triangle