WingNews logo WingNews GitHub [2]
top | item 32950408

Matrix web-based green code rain, made with love

389 points| DerWOK | 3 years ago |github.com | reply

67 comments

order
[+] DerWOK|3 years ago|reply
Quote from the Github repo:

_"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!)"_

[+] DerWOK|3 years ago|reply
This really deserves the "made with love" attribute. That guy is insane!!!
[+] saghul|3 years ago|reply
Now that's some commitment!
[+] passion__desire|3 years ago|reply
One could use stable diffusion or another AI to generate new characters.
[+] karteum|3 years ago|reply
For simple matrix-like effects, I use

  <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>
[+] neovive|3 years ago|reply
Very nice! Thanks for sharing.
[+] tomxor|3 years ago|reply
Shameless plug

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).

[+] rezmason|3 years ago|reply
That's incredible!

The ingenuity of code golfers and other constrained coding varieties stymies me.

[+] callumprentice|3 years ago|reply
https://github.com/liquidx/webviewscreensaver

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.

[+] Mobius01|3 years ago|reply
Thanks for this, it looks absolutely brilliant.

To the author - this is beautiful. If I could, it would be awesome to have a version that simulates the title of the film: the code forms up a name or a simple sentence.

[+] jaimehrubiks|3 years ago|reply
I love it. Thanks! (And thanks to OP for this amazing implementation of the matrix)
[+] whalesalad|3 years ago|reply
woah this is a cool thing that I didn't know I could do
[+] temp2022account|3 years ago|reply
The level of detail put into this project was an unexpected surprise, I've got a new bookmark after tuning it to a nice 3d blue color gradient!
[+] DerWOK|3 years ago|reply
Yea agree! Would you mind sharing the bookmark?
[+] the_jesus_villa|3 years ago|reply
When I was a teen I made a way shittier version of this using a bunch of vertical <marquee> tags and exotic looking Unicode characters. I literally just copy and pasted them since I didn't know any JS. It looked great as long as you didn't inspect the code!
[+] ClassyJacket|3 years ago|reply
Amazing.

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.

[+] ralgozino|3 years ago|reply
Am I the only one that hears "Wake Up" from RATM when opens the page even though no music is playing?
[+] seydor|3 years ago|reply
i hear massive attack
[+] 29athrowaway|3 years ago|reply
I hope someone can update the xscreensaver code with this one.
[+] pluc|3 years ago|reply
Yeah seriously it looks so much better than GLMatrix.
[+] boxed|3 years ago|reply
Zooming the page changes the pixelation of the rain, which is a fun detail.
[+] jdelman|3 years ago|reply
Really, really well done. 3D mode was especially cool. I remember having the official Matrix screensaver (remember www.whatisthematrix.com?) and being a little disappointed that the glyphs and animation didn't seem right. This is spot on - fantastic!
[+] rezmason|3 years ago|reply
I'm glad you like it!

The original one was made by the team who produced the fancy website in '99, using the tools for making fancy websites in '99 (Macromedia Director). A noble effort!

If it had looked any better, we might have never seen the fan-made screensavers that rushed to usurp it. :D

[+] digitalnomad91|3 years ago|reply
Nice! I have something like this on my "self-hosted" website: https://subtlefuge.com/

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!

[+] SSLy|3 years ago|reply
The author clearly likes the late antiquity esoteric literature and the scripts it used.
[+] rezmason|3 years ago|reply
I sure do! The more esoteric a script is, the fewer people are around to tell you you're using it wrong.

If you're tired of the standard fare and want fresh weird alphabet, might I recommend the scripts Johannes Trithemius pulled out of thin air in his book posthumously published Polygraphiae before he died in shame in 1516? I like this chunky one:

https://www.digitale-sammlungen.de/de/view/bsb11272589?page=...

[+] nazzacodes|3 years ago|reply
It has been asked a couple times in the comments with no response so far. Would anyone have any idea on how this could be made into a desktop/phone wallpaper or screensaver?

That would be such an awesome application. :O

[+] Bloating|3 years ago|reply
Reminds me of the old DOS app that would cause text to start dropping off the screen... used as a gag if you could sneak it into autoexec.bat while your roommate wasn't looking