matrix (web-based green code rain, made with love)

News Update September 2022: this project was featured in Vice Motherboard, along with insight into the effect from Lilly Wachowski.

Quick Links

• Classic Matrix code
• Starting from a blank screen (skipIntro=false) (which some people really like, but isn't the default mode)
• 3D mode
• Mirror mode, with camera and without. (Click to make ripples.)
• Matrix Resurrections updated code
• Trinity mode
• Operator Matrix code (with ripple effects)
• Megacity Mode, as seen in Revolutions

Variants

• Code of the "Nightmare Matrix"
  • (you know, this stuff).
• Code of the "Paradise Matrix"
  • (AKA this stuff).
• A custom variant I call "Palimpsest"
• A custom variant I call "Twilight"
• Morpheus mode
• Bugs mode
• Pride flag colors
• Trans flag colors
• Custom stripes (effect=stripes&stripeColors=R,G,B,R,G,B,R,G,B, etc)
• Custom palette (palette=R,G,B,%,R,G,B,%,R,G,B,%, etc)
• Custom image (url=www.website.com/picture.jpg)
• Debug view (effect=none) (epilepsy warning: this once had lots of flickering)
• Holographic version (requires a Looking Glass display; see it in action here)

Typography

• The free classic font (TrueType).
• The free Resurrections font (TrueType).
• The unofficial glyph database.

Concept

• (t,i,x,y) => (1-(sin(x*7)-(y/15)+(t+2))%1)/3)
• Educational version in Scratch

Contents

• About
• Goals
• Sidenote: other people's Matrix effects
• Customization
• Troubleshooting
• Future directions
• Friends of the project
• Colophon
• Other details

About

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

Goals

There are four kinds of Matrix effects people call "digital rain":

1. The green symbols that "rain down" operators' screens endlessly
2. Scenes from within the simulation that depict green symbols streaking across everything
3. The films' opening title graphics, which dazzle viewers and then draw them into the world of the franchise
4. The "dialing" visualization at the opening of The Matrix and Resurrections

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:

• Get the right glyphs. Like the actual ones. By now everyone's heard how the Matrix glyphs are some treatment of katakana, but they also include a few characters from Susan Kare's Chicago typeface. The Matrix glyphs in this project come from the source: cleaned up vectors from an old SWF from the promotional site for an official Matrix product, archived back in 2007. That's how deep this rabbit hole goes, friends. (Please support the Internet Archive!)
• Get the new glyphs. When Resurrections hit theaters in December 2021, it debuted an expanded glyph set with a daunting 135 symbols. Virtually all of them were recovered from the movie trailers for this project and uploaded before the film's release! ...But they were of relatively poor quality. Fortunately, in this age of 720p reference material and tie-in marketing, a decent sized sample of new glyphs were eventually reverse-engineered from a sparkly watch ad, and the rest were lovingly synthesized from frames of a behind-the-scenes VFX video.
• Make it look sweet in 2D. The most versatile, recognizable and mesmerizing manifestation of the code rain is when it seems to pour right down your screen like rain on a windowpane. While depth effects are cool, they can obscure the details that make the difference between a goodtrix and a greatrix.
• Make it look sweet in 3D, too. To facilitate future support of stereoscopic and holographic displays, it made sense to nail down a 3D variation, but it looks pretty on any kind of display.
• The 2D glyphs are in a fixed grid and don't move. The "raindrops" we see in the effect are simply waves of illumination of stationary symbols that occupy a column. To get a better look at this, try setting the fallSpeed to a number close to 0.
• Get the glow and color right. Matrix symbols aren't just some shade of phosphorous green; they're first given a bloom effect, and then get tone-mapped to the green color palette.
• Capture the proper rhythm of raindrops falling. Multiple raindrops often occupy a column at the same time, and they may have different speeds, but they can never collide. This project achieves this with a sawtooth wave, modulating the width of the teeth to keep things interesting. The tips of those teeth— the cells in the grid where the sawtooth dips— are where we put the "cursors" (or "tracers") at the bottom of each raindrop.
• Capture the glyph cycling sequence. The symbols in Reloaded and Revolutions' opening titles, which were at one point the highest fidelity versions of the 2D effect, change according to a repeating sequence (see the unofficial glyph database). This is only a technical detail, and no longer drives the glyph cycle in this project, but it can be used to analyze promotional material.
• Whip up some artistic license and imagine the "previous" Matrix versions. The sequels describe a paradisiacal predecessor to the Matrix that was too idyllic, and another earlier, nightmarish Hobbesian version that proved too campy. They depict some programs running older, differently colored code. So, this project dares to speculate how these old Matrix versions looked and acted.
• Support a broad range of customization options, and use them to produce other noncanonical variants. See the list of links above for the full set of available versions, and see the list below to see all the ways you can personalize the effect for yourself.
• Make it free, open source and web based. The MIT License permits distribution and modification of this project. Both are highly encouraged!
• Support as many browsers and devices as possible. For all the flack it receives, the web is the most ubiquitous and accessible platform for sharing graphics, or anything really. This project is built on the web stack so it can reach wherever the web goes.
• Promote a progressive interpretation of the film franchise. The Matrix is an action film you can enjoy without critical analysis, but if you do read into it, you'll be rewarded. And let's be clear: **The Ma