how this site is drawn

every picture on this site is drawn by a single canvas. it takes six public-domain works, from michelangelo’s creation of adam to the apollo 11 launch, and redraws them as characters, sixty times a second. the text you are reading came out of one of them.

glyphs

the plates are drawn in every printable ascii character and eleven math symbols like ∑ ∂ ∫ √ ≈. when the page loads, it measures the shape of each one: how much ink it puts in each sixth of its cell, two across and three down. a cell of the painting is measured the same way, and gets the glyph whose ink sits where its light does. an edge running up to the right gets a /, a line along the bottom gets a _. where a cell is flat there is no shape to match, so it takes any glyph of the right weight, and each cell has its own taste, which keeps a flat area from repeating one character.

colour

a glyph is not one colour. every pixel of it takes the colour of the point of the painting directly behind that pixel, so the characters work like a screen the painting shows through, and behind them the painting itself is there faintly. that is what makes a few thousand symbols read as botticelli and not as static. the vitruvian man is ink on paper, so on a black page it is flipped: the paper goes dark and the pen lines carry the light.

depth

each plate comes with a depth map, estimated once, offline, by depth anything v2. the canvas uses it four ways. figures get more ink than the ground behind them. light falls from the upper left and models the relief. when your cursor moves, what is near slides further than what is far. and the cursor carries a light of its own: hold it over the background of a plate and the part that had receded comes forward.

generated, not faded in

no plate fades in. the first one starts as noise and resolves from the front, figures first and their ground after. after that, a new plate comes in behind a band of noise. scrolling stirs the same band up where two plates meet, taller the faster you go, and it settles when you stop.

text

the text is written by the painting. every character on the page starts as a glyph somewhere in its plate. it leaves in the plate’s colour, turns over through other characters on the way, and lands as itself in ink. digits turn over through digits, and stop only when they land. the name on the first screen is too big to fly, so it is filled in from the left, cell by cell, with heavy glyphs.

once a block of text has landed, the page’s own text takes its place, so everything can be selected, searched and read by a screen reader. a block is written once, the first time it comes on screen, and stays while you scroll. when you leave the page, its text comes apart and goes back into the plate.

each view gives its plate the space its text leaves free, and the plate is drawn there whole, labelled at its foot like a figure. it has no frame: its edges fray, cell by cell, into bare ground, and it thins out the same way wherever words reach into it.

never still

a slow flow field moves through every plate, so the characters keep shifting at their edges. the camera drifts and breathes. if you leave the first screen alone for a while, it starts cycling through the whole collection.

how it runs

one webgl2 context, three passes and no libraries. the first pass runs once per character cell and picks a glyph. the second runs per pixel and draws that glyph from a texture of pre-rendered characters, coloured by the painting. the third draws the characters that are in the air, one small quad each. it stops when the tab is hidden. if your system asks for reduced motion, the plates hold still and the text is simply there.

the type is ibm plex mono, the same face the plates are drawn in. the page itself is black and white; every other colour comes from the paintings.