During a visit to the Tildeverse this week, I ran into a recreation of the raining, green characters from The Matrix films. The color palette used by most Tildeverse sites is monochrome, which I guess is sufficient for a cmdline-based culture.

But we’re millennials. We want multi-colored disco lights and an alphabet of characters that only White Rose and the Dark Army might understand.

Their solution is elegant and terse. They measure the window’s width and height, calculate the number of columns based on font size, and randomize the number of rows to draw for each drop before resetting its position to the top of the canvas (producing a staggering effect after the initial downpour). Animation is created by drawing to the canvas’s 2d context at a specified interval (~30ms).

The code listed below is what’s actually running up above. I didn’t feel like updating this post every time the code was modified, so the displayed source is loaded into the DOM from /assets/matrix/matrix.js via a call to XMLHttpRequest and highlighted for readability using the highlightjs library.

Embedding the <iframe> into this page (so that one can peek at the monochrome green showers of the Tildeverse), is a bit less elegant. Using a proxy deployed to some Cloudflare worker, you can bypass any CORS requirements set by the Tildeverse origin site and convince your browser that it’s OK to be susceptible to clickjacking.