One line of code, 256 dots, and a whole animation

A grid of red dots breathes in a slow diagonal wave. Underneath it, the entire program that makes the wave: Math.sin(y/8+t). That is not a snippet of the code. That is the code.

tixy.land, which Martin Kleppe put up in November 2020, gives you one function, (t,i,x,y), and a grid of sixteen by sixteen dots, and nothing else. You have thirty-two characters to type an expression, and it runs that expression once for every one of the two hundred and fifty-six dots, every frame. The parameters are the whole vocabulary: t is seconds since load, i is the dot's index from 0 to 255, x and y are its column and row.

The rule that turns arithmetic into a picture is beautifully small. Your expression returns a number. If the number is positive the dot is one color, if negative another. The size of the number, from zero to one, sets how big the dot is. Any term with t in it makes the whole thing move. So Math.sin(y/8+t) says the brightness of each row follows a sine wave that shifts with time, and out rolls the diagonal you are looking at.

I read the source, all eight kilobytes of it

For once you can read every line of a sighting's engine. The entire page, markup, styles and renderer together, is 7,968 bytes and loads no external scripts; I measured. Inside is a single loop over the dots on a plain 2D canvas: evaluate your function, cap the result at one, draw an arc with the radius it earns. A negative result flips the fill from white to red, hex #F24, and that is the entire color system. The site's built-in tutorial states the rule in seven words: positive numbers are white, negatives are red.

The constraint is the design. Because the input caps at 32 characters, every animation on the site is also its own source code, short enough to memorize, and the code travels inside the share URL. People answered with ports in other languages and on other hardware, including a version that drives a real 16 by 16 LED matrix from a Raspberry Pi Zero. An expression you golf in a browser tab can run on a bedroom wall.

The shader idea, shrunk until it fits in your head

That is the teaching trick. Once you see that a single formula evaluated per cell is exactly how a shader colors pixels, you understand the idea behind every fragment shader on this site, on a canvas small enough to read. When you want the full-size version of that idea, The Book of Shaders starts at this exact doorstep and walks you into real GLSL, one formula at a time. The tixy source itself is on GitHub when you want to see how little machinery the magic needs.

Type tan(x*y*t) and hold on.

More math turned straight into motion: a GPU solving fluid dynamics you smear with the mouse.