Matrix web-based green code rain, made with love

_"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>
  <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 opening scene "Trace Program Running" 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).

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.

https://rezmason.github.io/matrix/?version=morpheus

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.

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

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.

And a more traditional green version of it as part of my interactive 404 page: https://corbin.world/404

(you'll see it after you type 'HACK THE WORLD')

I really like the 3d version of this one though, thanks for sharing!

[0]: https://apitman.com/apps/redpill/

[1]: https://github.com/anderspitman/redpill

That would be such an awesome application. :O