Playground
Nine small things I built for fun and left switched on. Play a round, fly through a fractal, fall toward a black hole, pour three hundred balls through a board of pins, stir a basin of water, set your name in motion. Everything runs in your browser, and nothing you enter is stored or sent.
A round of Breakout on the device.
The device from the first page, with a game on its screen. Move the paddle with the mouse, the arrow keys or the bar underneath, and drag the device to turn it.
This one needs WebGL, which this browser does not offer.
Made with three.js, a shader for the dot display, a game loop of about 150 lines
Fly through a room that never ends.
A Menger sponge: a cube with its middle cut out, and the same again in every piece that is left, as deep as you set it. Nothing here is modelled. Every pixel is worked out from one formula, many times a second: the walls, their shading, the ink lines along every edge and the light of the ring that travels down the room. Drag to look around.
This one needs WebGL, which this browser does not offer.
Made with a ray marcher in one fragment shader, about 80 lines of GLSL
Stir ink into water.
A fluid simulation: the equations that describe how water moves, solved on your graphics card sixty times a second. Move across the sheet and the ink follows, curls up and thins out. Where a wash ends the pigment gathers into a darker rim, as it does on paper. Leave it alone and it stirs itself.
This one needs WebGL, which this browser does not offer.
Made with a Navier–Stokes solver in eight small shaders, run on the GPU
Light, bent around a black hole.
For every pixel a ray of light is followed backwards through curved space, some two hundred small steps each. The disk around the hole is flat. What you see above and below the hole is the disk's far side, bent into view. Its colours are those of a body glowing at the gas's temperature; the side that turns toward you is hotter and brighter, the other dimmer and redder. Play the approach, or switch gravity off and see what is left.
1915. Einstein: mass bends space, and light follows the bend.
1916. Karl Schwarzschild solves the equations while serving at the front. His solution contains a radius from which nothing returns.
The disk is flat. The arc above the hole is its far side, bent into view.
2019. The Event Horizon Telescope photographs one, 55 million light years away: a ring of light around a shadow.
This one needs WebGL, which this browser does not offer.
Made with a ray tracer for Schwarzschild geometry in one fragment shader, a thin-disk model, bloom
Three hundred balls, and the curve they always make.
Every ball is let go at the same place and meets ten rows of pins on its way down. Where a single one ends up is chance. Where three hundred end up is not: few at the sides, most in the middle, in the shape of the curve drawn on the board. Abraham de Moivre found that curve in 1733, and in the 1870s Francis Galton built this machine so that people could watch it come about. Pour them, then tilt the board and pour again.
This one needs WebGL, which this browser does not offer.
Made with three.js; every ball a small body that falls and bounces, worked out in about 100 lines of TypeScript
A basin of water, and the light on its floor.
The surface is a grid of 256 by 256 heights. Each one is pulled toward the average of its four neighbours, and from that rule alone waves spread, meet the walls and come back. For every pixel a ray is followed from your eye to the water and bent there by the law of refraction, which Ibn Sahl described in Baghdad in 984 and Willebrord Snell found again in 1621. The bright lines on the floor are the lamp's light, gathered by the waves the way a lens gathers it. Drag through the water, move the ball, or let it drop.
This one needs WebGL, which this browser does not offer.
Made with three.js and GLSL; the method for the water follows Evan Wallace's WebGL Water of 2011
A drawing made for you, just now.
Computer art began on machines like this one. In February 1965 Georg Nees showed drawings in Stuttgart that a plotter had made from his programs; it counts as the first exhibition of computer art. This plotter has four plates: lines that follow a field of noise or the field around electric charges, Nees's Schotter of 1968, and the stacked pulses of the first pulsar as they were plotted in 1970. The number on the sheet is its seed. A new number is a new drawing, and you can keep yours.
Made with three.js for the machine, ink as geometry, evenly spaced streamlines after Jobard and Lefer (1997)
Your name, set in motion.
Type a word. It is cast in letters with a depth, in this page's own typeface, and moved the way a film title is. Underneath lies the timeline that drives it: every letter's move as a block, each a little later than the one before. Choose how the letters arrive and how the move is eased, change the delay between them, stop it and go through it frame by frame. Whether a title feels stiff or alive is decided by these few numbers.
This one needs WebGL, which this browser does not offer.
0.00 s · frame 0 of 0
What you type is neither stored nor sent anywhere. It is worked out in your browser and gone the moment you leave this page.
Made with three.js; letters traced from the typeface in your browser, a keyframe engine written for this page, easing as plain arithmetic
How long would your password hold?
Type a password and see how long guessing it would take, at a login form and against a stolen database. The numbers come from its length and the kinds of characters in it. The scale underneath puts the three times next to things that last as long.
What you type is neither stored nor sent anywhere. It is worked out in your browser and gone the moment you leave this page.
- 0 characters
- a–z
- A–Z
- 0–9
- Symbols
0bits of entropy
- At the login formabout 10 guesses a second
—
- Stolen database, slow hashbcrypt or Argon2: about 10,000 a second
—
- Stolen database, fast hashMD5 or SHA-1: about 10 billion a second
—
Start typing. The times are for guessing every combination, half of them on average.
time = alphabet ^ length ÷ 2 ÷ guesses per second
Made with the arithmetic behind a password policy, done in your browser
Have a projectin mind?
Tell me what you're working on. I read every message and answer it myself.