matrix (web-based green code rain, made with love)
MIT License
News Update September 2022: this project was featured in Vice Motherboard, along with insight into the effect from Lilly Wachowski.
skipIntro=false
) (which some people really like, but isn't the default mode)Variants
effect=stripes&stripeColors=R,G,B,R,G,B,R,G,B, etc
)palette=R,G,B,%,R,G,B,%,R,G,B,%, etc
)url=www.website.com/picture.jpg
)effect=none
) (epilepsy warning: this once had lots of flickering)Typography
Concept
This project is a web implementation of the raining green code seen in the Matrix franchise. It's built right on top of the functional WebGL wrapper, REGL, with beta support for the upcoming graphics API WebGPU; its previous Three.js version is maintained in a separate branch.
This project runs right in the web browser; you can serve it with any HTTP/HTTPS server, with no additional setup. For example, on a Mac you can point a Terminal shell at a local copy of the project and run a simple HTTP server with Python: cd /path/to/the/project ; python3 -m http.server
There are four kinds of Matrix effects people call "digital rain":
A motivated fan can attempt to portray any of these. However, this project focuses specifically on #1 and #3— an endless effect, visually stunning and mystifying, that feels right at home on any screen.
The following criteria guided the development process:
fallSpeed
to a number close to 0.The number of implementations out there of this effect is a testament to the size of the film's impact on popular culture. For decades, I've enjoyed searching for and comparing them from time to time. That's probably how you arrived here— it's fun to see what kinds of solutions different people come up with to a problem, when the process is purely recreational and its success is subjective. I myself tried and failed to make the effect many times over.
Some of the earliest, roughest versions were made after the film hit theaters in March, but before it was released on home media in October— people were recreating the effect purely from memory. Others probably used the official screensaver as a reference, which was made by the time-strappped developers of the (excellent, defunct) official site from the images and multimedia tools they had available.
You can customize the digital rain quite a bit by stapling "URL variables" to its URL— by putting a '?' at the end of the link above, and then chaining together words, like this:
https://rezmason.github.io/matrix/?numColumns=100&fallSpeed=-0.1&slant=200&glyphRotation=180
Now you know link fu. Here's a list of customization options:
version
- the version of the Matrix to simulate. Default is "classic".
skipIntro
- whether or not to start from a blank screen. Can be "true" or "false", default is true.font
- the set of glyphs to draw. Current options are "matrixcode", "resurrections", "gothic", "coptic", "huberfishA", and "huberfishD".numColumns
- the number of columns (and rows) to draw. Default is 80.glyphFlip
- when set to "true", this flips the glyphs. Default is "false".glyphRotation
- the angle to rotate the glyphs in-place, in degrees. Default is 0. I suggest angles that are multiples of 90°.volumetric
- when set to "true", this renders the glyphs with depth, slowly approaching the eye. Default is "false".density
- the number of 3D raindrops to draw, proportional to the default. Default is 1.0.forwardSpeed
- the rate that the 3D raindrops approach. Default is 1.0.slant
- the angle that the 2D raindrops fall, in degrees. Default is 0.bloomSize
- the glow quality, from 0 to 1. Default is 0.4. Lowering this value may help the digital rain run smoother on your device.bloomStrength
- the glow intensity, from 0 to 1. Default is 0.7.ditherMagnitude
- the amount to randomly darken pixels, to conceal banding. Default is 0.05.resolution
- the image size, relative to the window size. Default is 1. Lowering this value may improve your performance, especially on high pixel density displays.raindropLength
- the vertical scale of "raindrops" in the columns. Can be any number.animationSpeed
- the overall speed of the animation. Can be any number.fallSpeed
- the speed of the rain's descent. Can be any number.cycleSpeed
- the speed that the glyphs change their symbol. Can be any number.effect
- alternatives to the default post-processing effect. Can be "plain", "pride", "stripes", "none", "image" or "mirror".
camera
- some effects, ie. the mirror effect, optionally support webcam input. Can be "true" or "false". Default is false.stripeColors
- if you set the effect to "stripes", you can specify the colors of vertical stripes as alternating R,G,B numeric values, like so: https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0
palette
— with the normal "palette" effect, you can specify the colors and placement of the colors along the color grade as alternating R,G,B,% numeric values, like so: https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1
backgroundColor
, cursorColor
, glintColor
— other R,G,B values that apply to the corresponding parts of the effect.paletteHSL
, stripeHSL
, backgroundHSL
, cursorHSL
, and glintHSL
— the same as the above, except they use H,S,L (hue, saturation, lightness) instead of R,G,B.cursorIntensity
, — the brightness of cursors' glow. Can be any number greater than zero. Default is 2.0.glintIntensity
— the brightness of glint glow, if there is any glint. Can be any number greater than zero. Default is 1.0.url
- if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg
loops
- (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video.fps
— the framerate of the effect. Can be any number between 0 and 60. Default is 60.suppressWarnings
- if set to "true", this suppresses any warnings that would otherwise appear— when viewing the project on a device with no GPU, for example.There haven't been many reported issues yet that weren't quick fixes, but one has stood out: many visitors have previously disabled hardware acceleration in their Chrome browsers, at the advice of well-meaning Internet websites.
What this does is cause Chrome to fall back to SwiftShader, a software renderer that runs projects like this one at a much slower rate. Because of this, if you are seeing serious performance issues on Chrome, it's recommended that you ensure hardware acceleration is enabled in your browser settings.
This project is still in active development, but some upcoming features are worth mentioning.
The Coptic glyphs in the "Paradise Matrix" version are derived from George Douros's font "Symbola", due to their similarity to the script in CG II of Nag Hammadi. If a 4th century Gnostic scribe trolled Athanasius over IRC, it might look like this.
The Gothic glyphs in the "Nightmare Matrix" version are derived from Dr. jur. Robert Pfeffer's font "Silubur", which are inspired by the uncial script found in the Codex Argenteus. If a werewolf emailed a vampire in the 6th century, it might look like this.
The glyphs used in the "Palimpsest" and "Twilight" versions are derived from Teague Chrystie's font "Huberfish", a fictitious alphabet that comes in several styles. If a spacedock technician bought a soda from a vending machine in an cool utopian future that will never happen, it might look like this.
The glyphs are formatted as a multi-channel distance field (or MSDF) via Victor Chlumsky's msdfgen. This format preserves the crisp edges and corners of vector graphics when rendered as textures. Chlumsky's thesis paper, which is in English and is also easy to read, is available to download here.
The raindrops themselves are particles computed on the GPU and stored in textures, much smaller than the final render. The data sent from the CPU to the GPU every frame is negligible.