rezmason / matrix

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

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 Matrix is a story about transitioning, directed by two siblings who transitioned. This is undeniable. Its franchise has plenty more themes, and plenty of room for interpretation, but the communities of misogynists and bigots who claim this imagery for their movements cannot be tolerated in any form. This is a chance to open minds, not shut them.

Sidenote: other people's Matrix effects

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.

Customization

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/?width=100&fallSpeed=-0.1&effect=none

Now you know link fu. Here's a list of customization options:

• version - the version of the Matrix to simulate. Default is "classic".
  • "classic" is the Matrix code everyone knows and loves, mostly based on the sequels' opening title graphics.
  • "3d" is the classic code in 3D mode.
  • "megacity" is a variation of the classic code that includes the Megacity as a glyph, as is seen in the opening titles of Revolutions.
  • "operator" is more reminiscent of the matrix code as it appears in the first movie's opening titles, and on operators' screens: flatter, crowded, without a gradient, and with occasional effects (such as a square ripple).
  • "nightmare" is how the Matrix may have appeared in the Merovingian's heyday: flashy, foreboding, relentless.
  • "paradise" is how the Matrix's idyllic predecessor may have appeared: warm, simplistic, encompassing.
  • "resurrections" is the updated Matrix code
  • "palimpsest" is a custom version inspired by the art and sound of Rob Dougan's Furious Angels.
• 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".
• width - the number of columns (and rows) to draw. Default is 80.
• 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".
  • ("none" displays the 'debug view', a behind-the-scenes look at the anatomy of the effect.)
• 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.

Troubleshooting

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.

Future directions

This project is still in active development, but some upcoming features are worth mentioning.

• An audio element. Things make sounds, don't they? Yes, they do, especially in movies. And while silence is precious, there are plans to provide a setting that introduces some kind of pleasant audio treatment to the effect.
• A user interface that isn't a URL. This project supports a lot of configurable options under the hood, and it would be wise to add a fun looking UI that exposes them all to visitors in an intuitive way.

Friends of the project

• Vesuveus was gracious to spend time discussing this project and the effect that inspires it on his long-running podcast, The Matrix Online Revisited with Vesuveus. Fandom is the interwoven story of people interacting with a piece of media, and Vesuveus keeps ours alive and gives them perspective.
• Alexi García's stunning in-depth comparison of the many home video releases of The Matrix is a must-see for any fan of the franchise, and those curious about how a movie can subtly change over time. Alexi's diligence and familiarity with the material are to thank for the high-fidelity references and high-fidelity feedback that have helped shape this project. Visit his main site for more information.
• GitHub user 57r31 produced a proof of concept that led to the interactive mirror effect.

Colophon

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.

Other details

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.

matrix's Issues

Set as Windows Terminal background

Any recommendations regarding how to make that a Windows Terminal background? 😅
I have attempted to do it manually – just to experiment with its appearance – by adjusting the Terminal background opacity to 0, and it looks awesome IMO:

PS
Plz don't judge me

glyphs' filenames have forbidden chars

I can't clone the repo and when I do it manually (ZIP) I can't copy some files:

• ".svg
• *.svg
• >.svg
• <.svg
• |.svg
  The chars are forbidden in filenames in Windows.

CRBug/1173575

Getting this in both Chrome 96 and some other version of Firefox. WebGL itself works fine but whenever I try to run this whether it's in Chrome or VSCode Run and Debug (also w/ Chrome) I get an error of "CRBug/1173575 non-JS module filed deprecated". This sounds pretty self explanatory except that I cannot find any import that's trying to import a non JS file.

Windows screensaver?

Is there a way to make this a screensaver in Windows 10/11?
Btw this is a dream come true! You're an awesome individual

Horizontal black stripe with high density

Hi,

First and foremost, thank you for the awesome project!

I've noticed that increasing the density results in a black stripe in the middle of the screen, which becomes more and more noticeable the higher the density is.

This is the settings I've used.

Do you see the same on your end ?

Cheers,
PY

Feature Request: add an appropriate sound effect for falling digital rain

Do you have the possibility of including the sound which would correspond to the passage of the rain chars ?

Unexpected behavior: intro with negative fallSpeed fills the screen with cursors

The cursors would gradually fill up the screen when using negative fallSpeed and skipIntro=false
example: https://rezmason.github.io/matrix/?effect=none&fallSpeed=-0.1&skipIntro=false

Change default version

hi, i wanna ask how to change the default version (classic) display to another version.
wanna doi it because dont wanna change or access the "version" address on the link.

Thanks.

Change glyphs

Hey!

Love the appearance and the love for detail, great work! Is it possible to change the glyphs? And if so how would one do it?

Best
Markus

gap option

Is it possible to adjust the "gap" intensity?

Right now, each column feels to complete, I think there should be more gaps in between glyphs.

It should be random though, not every column will have the same amount of gaps and for a particular column maybe there are no gaps at all, maybe a gap of some length or even more than one gap at different locations

Touch ripple effect

Should be looking nice on touchscreens

Like https://www.shadertoy.com/view/ll2GRD but with decay

Instructions for running on localhost, or a server on my LAN?

I'd like to run this code on either my localhost, or a server on my LAN, so it will work even when the internet is down or being flaky. Sorry for the stupid newbie question, but I read the entire readme file, and I couldn't find any instructions on how to run this program on my own machine. What am I missing?

Feature Request: render the effect to a transparent canvas

Hello,

first of all: awesome <3

I'm using your project as sources into my OBS (streaming software) (i'll add you into my credits ofc)

I would like to know if there is a possibility to have a transparent background instead of black/colored ? so i can put it in front of existing material in my OBS without hiding everything :)

sorry if it's already feasible i tried with the RGB codes but my knowledge is very limited :(

NB: I'm aware that's not an important/urgent request.

Have a nice day :)

Custom colours?

How can the colours of the glyphs and background be customised?
I've tried changing the backgroundColor value on line 56 of config.js -

matrix/js/config.js

Line 56 in a4a0406

backgroundColor: [0, 0, 0], // The color "behind" the glyphs

- to 9, 9, 9 for a white background, but this changes the font colour to white so I can't see anything!
What else needs to be changed for the glyph colour?

Major Feature: create a backwards-compatible visual preferences panel

1. Create a Tweakpane based on the config.
2. Support presets in the pane
3. Populate the pane from the URL
4. Change the URL from the pane with the History API
5. Update the real project from the pane
6. Update the WebGPU project from the pane
7. Find or create Tweakpane plugin for gradient entries and whatever else

Feature request: Specify color palette in URL

Passing RGB color for Background as URL variable would be cool.

Feature Request: 24 fps mode

Would like a 24 fps mode to give it that cinematic feel

Trans and Pride flag color modes borked

What the title says. The rain just never initiates, sitting at black screen. All other effects work.

Improvement: create a crowdsourced section in the readme with links to Mac, Windows and Linux solutions for screensavers and wallpapers

And also add to chrome and opera!
https://addons.opera.com/en/wallpapers/

Background color with opacity or transparent

I've been experimenting with the customization options to get a transparent or semi-transparent background and have come up short. Is this currently possible?

Not an issue: This is awesome.

I've seen tons of not-quite-right matrix digital rain effects over the years, and I wanted to say bravo and congrats for creating one that is so true to the original!! Have a great day :D

Matrix Resurrections code

Where exactly did you get the assets for these? https://raw.githubusercontent.com/Rezmason/matrix/master/assets/resurrections_msdf.png
Did you generate them yourself from screenshots, or is there a more direct source (like what you claim you found for the original Matrix code from archive)?

Will these be included in the font set?

Improvement: modify the "operator" version to more closely resemble the effect in the original film

A few options to consider for the future from reviewing the original film (see https://www.youtube.com/watch?v=MvEXkd3O2ow starting at 00:25-)

1. Not all rain columns have cursors
2. Not all rain columns always fall vertically- some columns stick and fade in/out
3. Some rain columns have cursors that dont fall the entire lenght of the column, they blink in and out on the way down the screen
4. Some rain columns have cursors that jump to adjacent columns laterally rapidly creating a random wiggle effect

Some of these options are seen at https://www.youtube.com/watch?v=0xbi3U6G7iA

Great job on this!

Bloom effect

I'm running it on an Intel Mac mini but on a high pixel density display its quite heavy, so I'm running it with &resolution=0.7 so performance is decent but most of the time the bloom effect looks like JPEG noise, bad quality instead of the bloom effect. Turning it down to 0 makes the code look different, maybe it's not considering bloomSize=0 for the color, and low values don't look as expected. Maybe the amount of bloom could be lowered, rather than lowering the resolution which I think it does, it could lower the alpha, or the color to make it less noticeable via another variable. As an alternative, the dithered bloom could be blurred but I'm not sure if it would be performant enough.

This url looks more noisy
https://rezmason.github.io/matrix/?version=operator&width=200&resolution=0.7

Here the noise is barely noticeable
https://rezmason.github.io/matrix/?version=updated&resolution=0.7&font=matrixcode

The noise is more noticeable when using an external display rather than a MacBook Built-in Display due to color calibration, but on the same external display the urls from above look different regarding the bloom effect, making the first one look like the second one could greatly improve the look

If I can help let me know

Thanks for the amazing work

PS: Since different displays show color differently, maybe the best option could be to control how bright the bloom color is, since comparing it to another display it may be darker and less noticeable.
The attached images are named accordingly

Having issues during implementation

I have download the code but troubleing in implementation of this project on my holographic screen .
Although it's starting but end in 3 sec .
I have tried buch of things but can't find the answer.

How to use 3D mode?

I am new in front-end so I can't execute it properly. Can you define the steps properly?
I am using django for backend

Colors and intensities of glint and cursor should be separate properties— and colors should stay within their gamuts

Hi,

First of all, thanks for building such a cool project.

Now, I'm having some trouble figuring out what are the ranges for the RGB colors that we can set for backgroundColor, glintColor and cursorColor.

On most examples, the numbers used are decimals in the 0-1 ranges that's used for stripecolors, pallette, etc.

But then on the default config we have (for example) the following: cursorColor: { space: "rgb", values: [1.5, 2, 0.9] }

So, we have a 1.5 and a 2 value there. What exactly do these represent?

So what are the RGB color ranges for those parameters? Are these 0-1 range? 0-10 range? 0-255 range?

Cheers

Feature Request: Animate between a "start" width and a "final" width

It would be like: startwidth=X , finalwidth=Y and animationspeed=Z.
It would give some cool effect and I think it would be easy to implant.

The url would look like: https://rezmason.github.io/matrix/?startwidth=100&finalwidth=20&animationspeed=5.

The animation speed could be in second or in milliseconds.

skipOutro

I really really want to make this into a perfectly looping video but "loops" as is pointed out in the documentation is a work in progress (WIP).

To this effect, could you please please implement skipOutro function that has the rain die down in intensity before stopping completely.

I can then finally have my perfectly looping video which I plan to use as a background on a lot of my devices.

Kindest regards,
Vsevolod Mineev

Custom fonts and symbols

Is it possible to add a guide step by step in markdown, or a tool to add custom fonts and symbols locally?

Even if it's not possible to put characters directly as a string associated with a font (for example: localFont="Futura", unicodeGlyphs="AaBb...?+&_$#@"), it could be interesting to select a set of glyphs, and make the necessary files (svg and png images) with clear instructions to add that set as a font option.

Request: add GTARG glyph sets

https://gtarg.gitbook.io/master-tracker/glyph-alphabet-guides

An ARG run by MatPat of The Game Theorists used these two glyph sets to encode ciphers. It would be neat if they were available as MSDF fonts.

Integrate current time

First of all, thank you very much for your work. This is by far the best code rain I've ever seen.

Would it be possible to integrate the current time? That would make it a perfect clock. I'm not a programmer, but I fiddled around and made something work to better demonstrate what I have in mind.
http://jsfiddle.net/7fhdt2za/

Missing "6" character in custom font

I use your awesome custom Matrix font with my minimalistic matrix rain effect (a demo with a custom font).

And I'm not sure if you're aware but the font is missing the character "6". I'm not sure if this is intentional but I just decided to create an issue so you're aware of it.

Request: Set a custom image via JavaScript as a base64 string

Adding a function to set a custom image via JavaScript with a base64 image string would make it very easy to customize with a local image by just calling a function like setBase64Image(string) with the image formatted as "data:image/jpeg;base64," + data.base64EncodedString() which is set in image.src

I'm currently using this method to customize jQuery WebGL Ripples in a macOS app (Backgrounds) to use it as a wallpaper. With this function it's very easy to use the user's wallpaper or any local file

Feature Request: support Spout or NDI output

Could you add Spout or NDI output so we could use this in VJ software?

Not an issue, congrats for this project

Good night, I want to say to you that this work is very impressive. Really amazing. It’s not strange that Vice Motherboard has paid attention to your code.
Thanks, I am enjoying a lot all the variants. Very very nice.

Extra Classic version

It feels perfect as Matrix Reloaded code.

How about adding another version, "Classic", reminiscent of the original ones (less 3D) from The Matrix besides "Reloaded" (the one that's named 1999).

Request : ability to change every setting

this thing is great, works great, and is very customisable, but i feel like it's sad to not have access to settings like ripples / ripples type in the customisations.
This matrix rain has so much potential, and is the ONLY accurate one i've found (and i have looked for quite a long time) but yeah it could become a lot better if one were to be able to access every setting like the current customisations
(maybe i'm just stupid and can't figure out how to do it, but i've tried changing the default parameters in the web view, putting stuff like rippleName=circle in the link, like the rest of the parameters with no success)

Reimplement MSDF logic based on chlumsky's examples to avoid issue seen in SwiftShader

This is amazing work! At first I thought it wasn't working on my M1 Pro Macbook, but I realized it was due to Google Chrome. It looks great in Firefox and Safari, but for some reason the gradient streams do not appear within the glyphs themselves and instead appear as solid columns of green. I checked the docs and the issues to see if there was a known issue with Google Chrome but couldn't find any, so I'm posting this issue. I've attached a screenshot of what I see with Google Chrome (stable and beta versions), which occurs on several Macs.

I would love to see a version from the original 1999 film

I believe the one labeled as "Classic Matrix code" is much closer to the sequels. The rain from the original is quite different:

https://www.youtube.com/watch?v=BMzYUPx5oXo

Request: Custom Strings

I have been tinkering with something similar but wondered if instead of all random glyphs it could pull strings from an array? That way we could incorporate live (or static) information into the falling code to make it a useful information display.

My issue is there is no issue in rating this the best github repo ever - so there.

Not trying to spam. Just giving high praise. This project is obsessive fandom to the core.

Broken on Mac Safari

macOS Monterey 12.5.1 (21G83)

Safari Version 15.6.1 (17613.3.9.1.16)

In the console:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'navigator.gpu.getPreferredCanvasFormat')

(main.js:58)

Nothing displays. Black, blank screen.

option to start with a blank (black) screen

First of all, this is fantastic! great job!!! and thanks for sharing it and the detail explanations you give on every issue.

Maybe I have missed some configuration option, but if there isn't it would be great for the code to start raining from the top like the opening titles. Right now when the code starts is already all over the screen.

Adjust column length

Hi, I was thinking about adjusting the column length via url also. The only thing I find missing is the columns feel to short, all the same length. And maybe make the length a bit random. Would that be possible?

Major Feature: dynamic parameters

Hi, I am trying to implement a LivelyWallpaper version of this project but I cant seem to figure out how to change animation properties mid animation. I dont have a good grasp on shaders, so some pointers would really be appreciated!

Image displays upside-down with effect=image

I'm experimenting with a screensaver for my work machine which displays the effect over my company logo. Everything is working great, except that the image displays upside-down for some reason! I checked the demo image (Eagle rock) and discovered that this is true there, too.

To reproduce: effect=image&url=[someUrl]