ac15090ca7
Adding GPU particle blurb, and a long explanation of the URL options. Cutting down the remaining "Much later" work.
3.3 KiB
matrix
Click here for the free font (TTF).
"matrix" is a WebGL implementation of the raining green code seen in The Matrix Trilogy. It's currently dependent on Three.js, though this may not be permanent.
customization
You can customize the digital rain by putting a '?' at the end of the link above, and then chaining together words, like this:
https://rezmason.github.io/matrix/?width=100&fallSpeed=-0.1&effect=none
Here's a list of customization options:
- width - the number of columns (and rows) to draw. Default is 80.
- animationSpeed - the overall speed of the animation. Can be any number, even negative! Default is 1.0.
- fallSpeed - the speed of the rain. Can be any number, even negative! Default is 1.0.
- cycleSpeed - the speed that the glyphs change their symbol. Can be any number, even negative! Default is 1.0.
- effect - alternatives to the default post-processing effect. Can be "plain", "pride", "customStripes", "none", or "image".
- colors - if you set the effect to "customStripes", you can specify the colors of vertical stripes as alternating R,G,B numeric values, like so: https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,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
technical details
The glyphs in this project are cleaned up vectors from an old SWF archived in 2007. (Please support the Internet Archive!)
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 inside of a texture, much smaller than the final render. The data sent from the CPU to the GPU every frame is negligible.
The opening titles to The Matrix Reloaded and The Matrix Revolutions are the chief reference for this project; in their most basic depiction, a fixed grid of glowing glyphs adjust their brightness and shape to simulate raindrops falling down a windowpane. While the glyph shapes are random, they cycle through a predetermined shape order before repeating. Whereas other Matrix screensavers focus on reproducing more complicated visual effects, such as representing 3D geometries as collages of code rain, this project focuses on the iconic core concept.