# Comments

_"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 for an official Matrix product, archived back in 2007. That's how deep this rabbit hole goes, friends. (Please support the Internet Archive!)"_

<canvas id="matrix" style="display:block; position: fixed; top: 0; left: 0; z-index: -100;"></canvas> <!-- position: absolute -->
<script type="text/javascript">
var matrix = document.getElementById("matrix");
var matrix_ctx = matrix.getContext("2d");
var mletters = "01"
var font_size = 10;
matrix_ctx.font = font_size + "px arial";
matrix.height = window.innerHeight;
matrix.width = window.innerWidth;
var columns = Math.floor(matrix.width/font_size);
var lines = matrix.height/font_size;
var drops_reinit_threshold = 0.975; // lower value means more frequent reinit and therefore more drops
var drops_y = Array(columns).fill(1);
function draw()
{
matrix_ctx.fillStyle = "rgba(10, 10, 10, 0.04)"; matrix_ctx.fillRect(0, 0, matrix.width, matrix.height); // fade out text from previous iterations
matrix_ctx.fillStyle = "#050"; // green text
for(var i = 0; i<columns; i++) // i < drops_y.length
{
var letter = mletters[Math.floor(Math.random()*mletters.length)];
if (drops_y[i]*font_size <= matrix.height)
matrix_ctx.fillText(letter, i*font_size, drops_y[i]*font_size);
else if(Math.random() > drops_reinit_threshold)
drops_y[i] = 0;
drops_y[i]++;
}
}
for(var x = 0; x < 2*lines; x++) draw();
setInterval(draw, 35);
</script>

https://rezmason.github.io/matrix/?effect=customStripes&colo...

My favorite so far is Morpheus mode, something about moving "into" the glyphs as they fall makes me think of digital city under the rain.

```
<canvas id="matrix" style="display:block; position: fixed; top: 0; left: 0; z-index: -100;"></canvas>
<script type="text/javascript">
var matrix = document.getElementById("matrix");
var matrix_ctx = matrix.getContext("2d");
var mletters = "01"
var font_size = 10;
matrix_ctx.font = font_size + "px arial";
matrix.height = window.innerHeight;
matrix.width = window.innerWidth;
var columns = Math.floor(matrix.width/font_size);
var lines = matrix.height/font_size;
var drops_reinit_threshold = 0.975; // lower value means more frequent reinit and therefore more drops
var drops_y = Array(columns).fill(1);
function draw()
{
matrix_ctx.fillStyle = "rgba(10, 10, 10, 0.04)"
matrix_ctx.fillRect(0, 0, matrix.width, matrix.height);
matrix_ctx.fillStyle = "#050"; // green text
for(var i = 0; i<columns; i++)
{
var letter = mletters[Math.floor(Math.random()*mletters.length)];
if (drops_y[i]*font_size <= matrix.height)
matrix_ctx.fillText(letter, i*font_size, drops_y[i]*font_size);
else if(Math.random() > drops_reinit_threshold)
drops_y[i] = 0;
drops_y[i]++;
}
}
for(var x = 0; x < 2*lines; x++) draw();
setInterval(draw, 35);
</script>
```

Matrix "Trace Program Running" scene in 194 bytes of javascript

https://www.dwitter.net/d/25497

Close to authentic but not 100% due to fonts, non-linear easing of the zoom, and of course the end transition diving into the CGI 0 which is a bit beyond this size bracket of code golfing (although you kind get a modicum of the effect via aliasing).

That would be such an awesome application. :O

I tried it with this "web page as a screensaver" app and it worked perfectly.

macOS only though - I couldn't find a Windows one.

I, to this day, use a Digital Rain screensaver for Mac, and live wallpaper for Android ('Source Wall' on Google Play). Very happy to see this specific fandom still alive. Even after that godawful fourth movie.