Every demo on this page is a short, self-contained piece of JavaScript in the spirit of the JS1k competition: no libraries, no assets, a few hundred bytes of code each. Open one to run it full screen, then open the code panel to read or rewrite it. Edits run immediately and are kept in this browser until you revert them.
A demo is the body of a function. It receives the canvas and returns the function that draws one frame:
// arguments: a, b, w, h, M, U
var i = 0;
return function (t, dt) {
b.fillStyle = 'hsl(' + (t * 60) + ',90%,60%)';
b.fillRect(w / 2 - 20, h / 2 - 20, 40, 40);
};
| a | the canvas element |
| b | its 2D context, already scaled so you can draw in CSS pixels (null for WebGL demos) |
| w, h | drawing area in CSS pixels |
| M | pointer: M.x, M.y, M.down — mouse, pen and touch alike |
| U | the shared helpers below |
| t, dt | seconds since the demo started, and seconds since the previous frame |
| U.buf(w,h) | off-screen pixel buffer: .u is a Uint32 view, .flush(b,w,h) scales it onto the canvas |
| U.rgb(r,g,b) | packs a colour for that Uint32 view (values are clamped) |
| U.hsl(h,s,l,a) | builds an hsl() / hsla() string |
| U.noise2(x,y) | smooth value noise, 0…1 |
| U.fbm(x,y,n) | n octaves of that noise |
| U.GL(a,frag,M) | compiles a fragment shader over a full-screen triangle and returns the draw function. Uniforms: u_t, u_r, u_m |
| U.rnd, U.lerp, U.clamp, U.TAU | the usual |
Search matches the name and the tags under it. The chips narrow the gallery to one kind of demo, and the sort menu reorders it: by name, by how many bytes the code takes, or grouped by type. Sorting by size is the quickest way to see how little a moving picture actually costs. Previous and next inside a demo follow whatever order and filter the gallery is in.
← → previous and next demo, Esc back to the gallery,
Space pause, c code panel, f full screen,
r a random demo, / jump to search, h hide the controls so
the picture fills the screen.
The gallery only animates the previews near the viewport, a few at a time, at a reduced frame rate; everything else holds a still frame. Turn off Animate previews for a completely static gallery. Inside a demo, drop the resolution to Half if a phone starts to struggle — the pixel-buffer and WebGL demos are the expensive ones.
Some demos make sound — search for sound to list them, or look for (with sound) on the card. Tick Sound on to hear them; it starts off, since browsers only allow audio after you have interacted with the page. Every note is derived from whatever the demo is already computing: the mode frequency of a drumhead, the Doppler shift of a passing siren, the impact speed of two billiard balls.
These demos are original code written for this page, modelled on the classic size-coding effects — plasma, tunnel, metaballs, fire, attractors, raymarching. Nothing here is copied from a JS1k entry; use js1k.com to see the real thing.