Behind the scenes of a collaborative art project that grows with the internet.
A technical deep-dive into how Lumitree's WebGL shader worlds work — signed distance functions, raymarching algorithms, and how complex 3D scenes with lighting and shadows fit in under 50KB.
A deep dive into the technical architecture behind Lumitree — how we generate unique interactive artworks with Canvas 2D, WebGL shaders, and Web Audio API, all in under 50KB with zero dependencies.
Lumitree is a collaborative art project where visitors plant seeds that grow into unique interactive micro-worlds. No login, no accounts, no ads — just a gift to the internet.
Each Lumitree micro-world uses a different visual technique — particles, shaders, L-systems, cellular automata. Here's what we learned about creative coding under tight constraints.
From 64KB intros to 50KB micro-worlds — how the Demoscene tradition of constrained creative coding lives on in browser-based generative art.
Lumitree blurs the line between human creativity and AI generation. A visitor types a dream, AI builds a world, and the tree grows. So who made the art?
Lumitree visitors type what they want to see, and a world appears. The prompts they choose reveal something beautiful about human imagination — we dream in light, water, and music.
Every micro-world on Lumitree must fit in 50KB with zero dependencies. That sounds limiting — until you realize constraints are the secret engine of all great art.
Some branches on Lumitree don't just move — they sing. A look at how the Web Audio API turns browser tabs into instruments, and why sound is the most underused dimension of web art.
Lumitree is shaped by hundreds of anonymous visitors, each planting a branch from their imagination. What patterns emerge when strangers collectively dream? A reflection on collaborative creation, digital commons, and the surprising tenderness of the internet.
Looking for collaborative art project ideas that work remotely? From living digital trees to shared pixel canvases, here are 10 interactive art activities for classrooms, workshops, and community groups — including how to use Lumitree as a free collaborative art tool.
When someone types 'a bioluminescent forest' into Lumitree, how does the system decide whether to use particle systems, shader fractals, or SVG animation? A look inside the creative decision-making that turns nature prompts into visual art — and why machines dream of nature differently than humans do.
A curated list of the most interesting generative art websites, interactive art experiments, and creative coding projects you can experience right in your browser. From shader playgrounds to collaborative art trees.
A hands-on creative coding tutorial that walks you through building a complete generative artwork in a single HTML file under 50KB. Covers Canvas API, animation loops, color palettes, interactivity, and the art of creative constraints.
Creative coding uses programming as a medium for artistic expression rather than functional software. Learn what creative coding is, how to get started, the tools and languages used, and discover projects that blur the line between art and technology.
Explore interactive art installations you can visit online — from WebGL shader galleries to collaborative digital canvases. No museum ticket required.
Learn how to create interactive art with JavaScript — step-by-step code examples using Canvas API, mouse interaction, generative patterns, and animation. No frameworks needed.
Learn how to create visual art using JavaScript, HTML Canvas, and CSS. From your first line to animated masterpieces — a practical guide to drawing with code for beginners and artists.
A hands-on comparison of the best creative coding tools for beginners and experienced artists. Covers p5.js, Processing, Shadertoy, three.js, Hydra, TouchDesigner, Sonic Pi, Cables.gl, OpenFrameworks, Nannou, and Lumitree — with strengths, weaknesses, and what each tool does best.
A beginner's guide to fractal art — what fractals are, why they're beautiful, and how to generate Mandelbrot sets, Julia sets, recursive trees, and L-systems with simple JavaScript code you can run in your browser.
A hands-on guide to math art — how to turn mathematical formulas into stunning visual art using JavaScript. Covers spirals, tilings, Lissajous curves, rose curves, polar patterns, the golden ratio, and more, with working code examples you can run in your browser.
A practical guide to geometric art with code — how to create mesmerizing geometric patterns using JavaScript and Canvas. Covers sacred geometry, Islamic patterns, Voronoi diagrams, kaleidoscopes, penrose tilings, and optical illusions, with working code examples.
A hands-on guide to Perlin noise and generative art — how to create flow fields, organic textures, terrain, clouds, and animated landscapes using JavaScript and Canvas. 8 working code examples you can run in your browser.
A hands-on guide to making pixel art with JavaScript and Canvas — grid rendering, palette management, dithering, sprite animation, scaling algorithms, and generative pixel art techniques. 8 working code examples you can run in your browser.
A comprehensive guide to generative design — from algorithmic art and parametric architecture to computational product design. Covers L-systems, space-filling curves, reaction-diffusion, Voronoi structures, evolutionary algorithms, and more. 8 working code examples.
A complete guide to procedural generation — the algorithms behind infinite game worlds, generative art, and adaptive content. Covers noise-based terrain, wave function collapse, cellular automata, BSP dungeons, L-systems, Poisson disc sampling, random walks, and marching squares. 8 working code examples.
A complete guide to audio visualization — turning sound into art with the Web Audio API and Canvas. Covers waveforms, frequency spectrums, circular visualizers, particle audio reactors, spectrogram heatmaps, 3D terrain from music, beat detection, and audio-reactive generative art. 8 working code examples.
Learn how cellular automata like Conway's Game of Life, Rule 30, and Langton's Ant create stunning emergent patterns from minimal rules. 8 interactive code examples using HTML Canvas.
Learn how to build gravity simulations with JavaScript and HTML Canvas. 8 interactive examples: orbital mechanics, n-body systems, galaxy formation, particle gravity wells, spring physics, and more.
Learn how to build fluid simulations with JavaScript and HTML Canvas. 8 interactive examples: Navier-Stokes solver, smoke simulation, ink diffusion, SPH particles, vortex dynamics, shallow water waves, and more.
Learn how to build particle systems with JavaScript and HTML Canvas. 8 interactive examples: emitters, forces, trails, flocking, fireworks, galaxy spirals, rain, and interactive attraction fields.
Learn how to create ASCII art programmatically with JavaScript. 8 interactive examples: character rasters, edge detection, image-to-ASCII conversion, animated typography, 3D text rendering, matrix rain, and generative text landscapes.
Learn how to create glitch art programmatically with JavaScript. 8 interactive examples: pixel sorting, RGB channel shifting, data corruption, scan line effects, block displacement, JPEG artifact simulation, VHS distortion, and interactive glitch painting.
Learn color theory through code. 8 interactive examples: color wheels, complementary harmonies, analogous palettes, triadic schemes, HSL manipulation, procedural palette generation, color interpolation, and interactive palette builders.
Learn SVG animation from scratch. 8 interactive examples: path morphing, stroke drawing, motion along paths, staggered animations, generative SVG patterns, animated filters, particle systems in SVG, and an interactive kinetic art piece.
Learn data visualization from scratch with JavaScript and Canvas. 8 interactive examples: bar charts, scatter plots, radial graphs, force-directed networks, treemaps, streamgraphs, animated data transitions, and data-driven generative art.
Learn ray tracing from scratch with JavaScript and Canvas. 8 interactive examples: basic ray caster, sphere shading, shadows, reflections, refraction, soft shadows, ambient occlusion, and a full path tracer.
Learn to create op art with JavaScript and Canvas. 8 interactive examples: moiré patterns, concentric ripples, rotating spirals, checkerboard warp, line interference, vibrating color, bulge distortion, and animated tunnel.
Learn to create kinetic art with JavaScript and Canvas. 8 interactive examples: pendulum waves, Calder-style mobiles, wind sculptures, harmonographs, kinetic typography, magnetic fields, mechanical linkages, and wave machines.
Learn to create tessellation art with JavaScript and Canvas. 8 interactive examples: regular tilings, Escher-style transformations, Penrose tilings, hyperbolic tessellations, Voronoi cells, Islamic star patterns, aperiodic monotiles, and animated morphing tiles.
Learn to generate mazes with JavaScript and Canvas. 8 interactive examples: recursive backtracker, Prim's algorithm, Kruskal's, Eller's row-by-row, recursive division, sidewinder, hunt-and-kill, and animated Wilson's random walk.
Learn to draw and animate Bézier curves with JavaScript and Canvas. 8 interactive examples: linear interpolation, quadratic curves, cubic curves, De Casteljau's algorithm, curve editors, spline paths, text on curves, and generative Bézier art.
Learn to create and animate Lissajous curves with JavaScript and Canvas. 8 interactive examples: basic figures, frequency ratios, phase animation, 3D projections, harmonograph simulation, Lissajous knots, audio-reactive curves, and generative Lissajous art.
Learn to draw spirograph patterns with JavaScript and Canvas. 8 interactive examples: hypotrochoids, epitrochoids, multi-gear spirographs, rose curves, guilloché patterns, animated drawing, spirograph art generator, and interactive parameter explorer.
Learn to create moiré patterns with JavaScript and Canvas. 8 interactive examples: line interference, concentric circles, rotational moiré, wave superposition, dot screen halftone, animated phase shift, interactive mouse moiré, and generative moiré art.
Learn to create optical illusions with JavaScript and Canvas. 8 interactive examples: Checker Shadow illusion, impossible triangle, rotating snakes, Müller-Lyer arrows, Kanizsa triangle, Hermann grid, Café Wall illusion, and generative op art.
Learn to visualize the Lorenz attractor and other strange attractors with JavaScript and Canvas. 8 interactive examples: classic Lorenz butterfly, Rössler attractor, Clifford attractor, De Jong attractor, Aizawa attractor, Lorenz parameter explorer, multi-trajectory phase portrait, and generative chaos art.
Learn to create Fibonacci spirals, golden ratio patterns, and phyllotaxis art with JavaScript and Canvas. 8 interactive examples: golden spiral, Fibonacci sequence visualizer, phyllotaxis sunflower, golden rectangle subdivision, Fibonacci word fractal, spiral galaxy, golden angle tree, and generative Fibonacci art.
Learn to create Voronoi diagrams, Delaunay triangulations, and organic cellular patterns with JavaScript and Canvas. 8 interactive examples: basic Voronoi, distance metrics, weighted Voronoi, Lloyd relaxation, Delaunay triangulation, mosaic filter, crystal growth simulation, and generative Voronoi art.
Learn to generate mazes algorithmically with JavaScript and Canvas. 8 interactive examples: recursive backtracker, Kruskal's algorithm, Prim's algorithm, Eller's row-by-row method, recursive division, growing tree, Wilson's uniform spanning tree, and animated maze solver with A* pathfinding.
Learn to create isometric art with JavaScript and Canvas. 8 interactive examples: isometric grid, cube renderer, voxel terrain, city builder, pixel isometric tiles, character animation, depth sorting, and a full isometric scene generator.
Learn to simulate double pendulums with JavaScript and Canvas. 8 interactive examples: basic simulation, trail painting, energy visualization, phase space portraits, butterfly effect comparison, pendulum array, damped pendulum with springs, and generative chaos art.
Learn to build Conway's Game of Life from scratch with JavaScript and Canvas. 8 interactive examples: classic simulation, pattern library, speed-of-light spaceships, Gosper glider gun, Life-like automata, infinite zoom hashlife, interactive painter, and generative life art.
Learn to build stunning wave simulations from scratch with JavaScript and Canvas. 8 interactive examples: 1D string wave, 2D ripple tank, interference patterns, Doppler effect, diffraction through slits, standing waves, shallow water equations, and generative wave art.
Learn to build stunning fractal trees from scratch with JavaScript and Canvas. 8 interactive examples: basic recursive tree, stochastic trees, L-system trees, wind animation, seasonal colors, 3D projection, interactive growing tree, and generative forest art.
Learn to build stunning sacred geometry patterns from scratch with JavaScript and Canvas. 8 interactive examples: Flower of Life, Metatron's Cube, Sri Yantra, Seed of Life animation, golden spiral mandala, Platonic solids projection, sacred tiling patterns, and generative sacred art.
Learn to create stunning mandala art programmatically with JavaScript and Canvas. 8 interactive examples: basic mandala, dotwork mandala, petal mandala, animated rotating mandala, Islamic geometric mandala, fractal mandala, interactive mouse mandala, and generative mandala art.
Learn to create stunning op art and optical illusions programmatically with JavaScript and Canvas. 8 interactive examples: checkerboard warp, concentric pulse, moiré interference, rotating spiral, Fraser spiral illusion, Bridget Riley stripes, impossible cube, and generative op art composition.
Learn to create stunning stippling art programmatically with JavaScript and Canvas. 8 interactive examples: random stippling, Poisson disc sampling, weighted stippling, Lloyd relaxation, image-to-dots converter, cross-hatching, stipple portrait, and generative stipple art composition.
Learn to create stunning string art programmatically with JavaScript and Canvas. 8 interactive examples: basic cardioid envelope, parabolic curves, circular string pattern, multi-layer design, epicycloid string figure, interactive string sculptor, 3D string surface, and generative string art composition.
Learn to create beautiful low poly art programmatically with JavaScript and Canvas. 8 interactive examples: random triangulation, Delaunay triangulation, image-to-low-poly converter, gradient mesh terrain, animated low poly waves, low poly portrait generator, low poly planet, and generative low poly landscape composition.
Learn to create kinetic typography programmatically with JavaScript and Canvas. 8 interactive examples: typewriter reveal, wave text, spring-physics letters, particle text dissolve, text along a path, gravity-drop letters, morphing text outlines, and generative kinetic poetry composition.
Learn to create digital light painting effects programmatically with JavaScript and Canvas. 8 interactive examples: light trail brush, orbital light painting, light calligraphy, sparkler effect, physiogram spirals, long-exposure traffic, light graffiti, and generative light painting composition.
Learn to generate procedural noise textures programmatically with JavaScript and Canvas. 8 interactive examples: value noise, Perlin gradient noise, Worley cellular noise, simplex noise, FBM terrain, wood grain, marble veins, and seamless tileable noise.
Learn to simulate reaction-diffusion systems with JavaScript and Canvas. 8 interactive examples: Gray-Scott model, Turing spots and stripes, coral growth, fingerprint patterns, mitosis animation, chemical waves, Belousov-Zhabotinsky spirals, and generative reaction-diffusion art.
Learn to build interactive kaleidoscope patterns with JavaScript and Canvas. 8 working examples: basic reflection symmetry, hex kaleidoscope, image-based kaleidoscope, animated rotating kaleidoscope, interactive drawing kaleidoscope, triangular tiling, fractal kaleidoscope, and generative kaleidoscope art.
Learn to build interactive metaball simulations with JavaScript and Canvas. 8 working examples: basic 2D metaballs, marching squares, colorful organic blobs, interactive mouse metaballs, lava lamp, 3D raymarched metaballs, metaball text, and generative metaball art.
Learn to build mesmerizing parallax effects with JavaScript and Canvas. 8 working examples: basic layer parallax, star field, mouse-tracking depth, infinite scrolling landscape, atmospheric fog layers, floating particles, tilt-shift camera, and generative parallax art.
Learn to build mesmerizing circle packing art with JavaScript and Canvas. 8 working examples: basic circle packing, image-based packing, recursive Apollonian gasket, organic growth simulation, text-filled circles, interactive packing, circle packing tree visualization, and generative circle packing art.
Learn to create mesmerizing paint splatter art with JavaScript and Canvas. 8 working examples: basic splatter, drip physics, action painting, watercolor blooms, ink splash, spray paint, Jackson Pollock simulation, and generative splatter composition.
Master terrain generation with JavaScript and Canvas. 8 working examples: basic heightmap, Perlin noise biomes, diamond-square algorithm, hydraulic erosion, thermal erosion, 3D perspective renderer, infinite scrolling terrain, and generative landscape art. A complete guide to procedural terrain algorithms.
Learn to build mesmerizing isometric art with JavaScript and Canvas. 8 working examples: isometric grid, cube renderer, voxel city, terrain heightmap, animated water, character sprites, interactive block editor, and generative isometric landscape.
The most comprehensive guide to generative art on the web. Learn every technique — fractals, noise, particles, shaders, physics simulations, pattern design, data visualization, and more — with working code examples and links to 50+ in-depth tutorials.
Learn how the Fourier series and Fourier transform turn any drawing into a set of rotating circles (epicycles). 8 interactive JavaScript examples: square waves, epicycle drawing, DFT on shapes, sawtooth waves, draw-your-own epicycles, frequency spectrum, and generative Fourier art.
Learn how to create mesmerizing shader art with GLSL and WebGL. 8 interactive code examples: gradient fields, noise plasma, raymarched spheres, fractal shaders, audio-reactive visuals, kaleidoscope effects, post-processing, and generative shader compositions.
Learn how to visualize sorting algorithms with JavaScript and Canvas. 8 interactive code examples: bubble sort, selection sort, insertion sort, merge sort, quicksort, heap sort, radix sort, and a full sorting algorithm comparison race.
Learn how to build interactive pathfinding visualizations with JavaScript and Canvas. 8 code examples: BFS, Dijkstra, A* search, diagonal movement, maze solving, weighted terrain, bidirectional search, and an interactive playground.
Learn how to build interactive collision detection systems with JavaScript and Canvas. 8 code examples: AABB boxes, circle-circle, polygon SAT, spatial hashing, raycasting, swept collision, quadtree broad phase, and a full physics playground.
Learn how to simulate realistic cloth and fabric physics with JavaScript and Canvas. 8 code examples: Verlet integration, spring-mass grids, wind forces, tearing, draping, flags, curtains, and an interactive cloth playground.
Learn how to build genetic algorithms with JavaScript and Canvas. 8 code examples: evolving strings, image approximation with polygons, traveling salesman, color palette breeding, walking creatures, neuroevolution maze navigation, interactive aesthetic selection, and generative art evolution.
Learn how to implement Wave Function Collapse (WFC) with JavaScript and Canvas. 8 code examples: basic tile constraints, simple WFC solver, terrain generation, city blocks, platformer levels, pipe networks, pixel art patterns, and interactive tilemap editor.
Learn how to build pendulum wave simulations with JavaScript and Canvas. 8 code examples: basic pendulum wave, circular pendulum array, rainbow phase gradient, Lissajous pendulums, 3D perspective wave, interactive frequency tuner, coupled pendulums with energy transfer, and generative pendulum art.
Learn how to build boids flocking simulations with JavaScript and Canvas. 8 code examples: basic boids with separation/alignment/cohesion, predator avoidance, multi-species flocking, obstacle navigation, 3D perspective boids, interactive mouse control, motion trails, and generative boid art.