The Vibeary — round-up
Best creative coding frameworks
Creative coding tools optimise for a different loop than product frameworks: fast iteration, deterministic randomness, easy export at print resolution, and getting out of the way while you tune parameters. This shelf covers sketch environments, generative-art toolkits, canvas and 2D rendering libraries, and the utility packages — seeded randomness, geometry, colour maths — that make a generative system reproducible instead of a one-off screenshot.
What earned a place
- Fast feedback loop from edit to visual
- Seeded randomness so outputs are reproducible
- Export at real resolution for print or video
- Small enough to read the source
24 picks from the library
- 01
Blot
Open source pen-plotter drawing machine paired with a browser editor where art is written as code and submitted to a gallery.
Why it made the list: Hardware plus editor plus curriculum, all open; rare complete generative-art pipeline
Creative codingMITHack Clubblot.hackclub.com
- 02
canvas-sketch
Framework and CLI for generative artwork in JavaScript with deterministic seeding, print-resolution export and video recording.
Why it made the list: Handles seeds, print sizing and export: the boring eighty percent of generative tooling.
Creative codingMITMatt DesLauriers (@mattdesl)github.com
- 03
canvas-sketch-util
Utility package of seeded random, geometry, colour, math and shader helpers extracted from the canvas-sketch workflow.
Why it made the list: Usable standalone; the seeded-random module alone justifies pulling in the dependency.
Creative codingMITMatt DesLauriers (@mattdesl)github.com
- 04
compute.toys
Browser playground for WGSL compute shaders: write, run and publish GPU compute experiments with a public gallery of other people's sketches.
Why it made the list: Shadertoy's compute-shader cousin, and far fewer people know it exists.
Creative codingopen-sourcecompute-toyscompute.toys
- 05
Constellation Dice
Unity URP glass die with a nebula and per-face constellations, all raymarched in one pass on the default cube.
Why it made the list: Eight verts, one raymarch pass — glass, volume sheets and constellations without extra geometry.
Creative codingMIT@tantaneitygithub.com
- 06
css-doodle
Web component that generates CSS-only patterns and grids from a compact declarative rule language with built-in randomness.
Why it made the list: Generative art with no canvas or WebGL at all; absurdly small payload.
Creative codingMITYuan Chuan (@yuanchuan23)css-doodle.com
- 07
EZ-Tree
Open-source procedural tree generator with a browser editor and a Three.js runtime library, exporting GLB models.
Why it made the list: Parametric trees you tune visually and export; huge time save for any outdoor scene.
Procedural generationMITDan Greenheck (@dgreenheck)eztree.dev
- 08
Fantasy Map Generator
Browser application generating interactive fantasy world maps with heightmaps, cultures, states, religions and exportable data.
Why it made the list: Generates political, cultural and terrain layers, not just pretty coastlines
Procedural generationMITAzgaar (@Azgaar)github.com
- 09
Fragment
Local web environment for live-coding fragment shaders and sketches with hot reload, GUI controls and video export.
Why it made the list: Local-first shader live coding with recording built in; tiny star count, great craft.
Creative codingMITRaphael Ameaume (@raphaelameaume)github.com
- 10
graph-dungeon-generator
Graph-based procedural dungeon generator in TypeScript that places rooms from a connectivity graph with a readable implementation.
Why it made the list: Small enough to read in an afternoon and adapt to your own room grammar
Procedural generationMIThalftheoppositegithub.com
- 11
Machine Vision
Browser visual instrument that turns local video into procedural points, brackets, labels and tracking overlays, then exports a five-second composite clip.
Why it made the list: Local-only analysis with no server — bring any clip, leave with a treated export.
Creative codingMITAmir Mushichmachine-vision-seven.vercel.app
- 12
MarkovJunior
Probabilistic programming language for generative art and level design based on rewrite rules and constraint propagation.
Why it made the list: 153 worked examples turn generative level design into a readable rule language
Procedural generationMITMaxim Gumin (@ExUtumno)github.com
- 13
morphogenesis-resources
Curated reference of algorithms for growth and form — diffusion-limited aggregation, reaction-diffusion, L-systems, space colonization.
Why it made the list: The single best index of organic-growth algorithms with visual examples per technique
Procedural generationopen-sourceJason Webb (@jasonwebb)github.com
- 14
ndwfc
N-dimensional wave function collapse with an infinite, lazily-expanded canvas rather than a fixed output grid.
Why it made the list: Infinite lazy generation unlocks endless scrolling worlds that classic WFC can't do
Procedural generationMITLingdong Huang (@LingDong_)github.com
- 15
Newton's Orchard
Browser gravity playground with deterministic time scrubbing, fully editable bodies, preset solar systems, unlockable missions and a user-submission gallery.
Why it made the list: Scrub orbits backwards deterministically — a real step past the PhET sims.
Creative codingopen-sourceAndrew Childs (@andrewchilds)newtonsorchard.app
- 16
Particles4All
WebGPU solver that simulates fluid and rigid bodies as one position-based-dynamics system, with screen-space fluid surface reconstruction.
Why it made the list: Research-grade PBF solver with every knob exposed live in the browser.
Creative codingMITmatsuoka-601 (@matsuoka_601)particles4all.netlify.app
- 17
Pts.js
TypeScript library for composing points, vectors, curves and interaction into visualizations rendered to canvas or SVG.
Why it made the list: Geometry-first API that makes spatial thinking natural instead of imperative drawing calls.
Creative codingApache-2.0William Ngan (@williamngan)ptsjs.org
- 18
Pulsar
Micro creative-coding playground where you edit a short expression and switch between classic, hex and triangular tilings to make generative loops.
Why it made the list: Tiny enough to learn in a minute, deep enough to lose an afternoon in
Creative codingfreeStanko Tadić (@stankot)muffinman.io
- 19
py5
Processing reimplemented for Python 3 with direct interoperability with NumPy, Matplotlib, Pillow and Jupyter notebooks.
Why it made the list: Processing's API without leaving the scientific Python stack you already use
Creative codingopen-sourceJim Schmitz (@hx2A)py5coding.org
- 20
rot.js
Roguelike toolkit for JavaScript with map generators, field of view, pathfinding, scheduling, RNG and display abstraction.
Why it made the list: Twenty years of roguelike algorithms — FOV, dungeons, scheduling — in one JS package
Procedural generationopen-sourceOndřej Žára (@0ndras)github.com
- 21
shan-shui-inf
Procedurally generated infinite Chinese landscape painting rendered as scrolling SVG in the browser.
Why it made the list: A masterclass in procedural style: hand-drawn aesthetic from pure algorithm
Procedural generationMITLingdong Huang (@LingDong_)github.com
- 22
simplex-noise.js
Fast simplex noise implementation in TypeScript with seedable PRNGs and 2D, 3D and 4D variants.
Why it made the list: The reliable seeded-noise dependency; everything organic-looking starts here
Procedural generationMITJonas Wagner (@jwagner)github.com
- 23
Sketch.js
Minimal creative coding boilerplate that sets up a canvas, animation loop and input handling in a few lines.
Why it made the list: Timeless three-kilobyte sketch harness; still the fastest way to start a canvas experiment.
Creative codingMITJustin Windle (@soulwire)soulwire.github.io
- 24
Sliderland
Creative coding playground where animations are driven entirely by 64 HTML range sliders and a single mathematical expression.
Why it made the list: Radical constraint design: sliders as the whole programming interface
Creative codingfreeblinry (@blinry)sliderland.blinry.org
Questions
- Canvas or SVG for generative work?
- Canvas for thousands of elements and pixel effects; SVG when you need crisp scaling or want to edit the output in a vector tool afterwards.
- How do I make generative art reproducible?
- Use a seeded random function and store the seed with the piece. Every serious toolkit here supports it.