from Hacker News

Matrix web-based green code rain, made with love

by DerWOK on 9/23/22, 11:27 AM with 67 comments

  • by DerWOK on 9/23/22, 11:27 AM

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

  • by karteum on 9/23/22, 1:04 PM

    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>

  • by tomxor on 9/23/22, 1:44 PM

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

  • by Raed667 on 9/23/22, 1:02 PM

    The quality of the output is great! Kudos!

    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

  • by callumprentice on 9/23/22, 3:04 PM

    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.

  • by temp2022account on 9/23/22, 12:14 PM

    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!

  • by fareesh on 9/23/22, 12:25 PM

    Ukraine flag colors were missing but thankfully there is a custom rgb feature:

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

  • by the_jesus_villa on 9/23/22, 1:38 PM

    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!

  • by ClassyJacket on 9/23/22, 1:03 PM

    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.

  • by ralgozino on 9/23/22, 1:08 PM

    Am I the only one that hears "Wake Up" from RATM when opens the page even though no music is playing?

  • by 29athrowaway on 9/23/22, 12:38 PM

    I hope someone can update the xscreensaver code with this one.

  • by boxed on 9/23/22, 12:07 PM

    Zooming the page changes the pixelation of the rain, which is a fun detail.

  • by jdelman on 9/23/22, 1:01 PM

    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!

  • by digitalnomad91 on 9/23/22, 6:21 PM

    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!

  • by anderspitman on 9/23/22, 2:15 PM

    I made one[0][1] that uses the GitHub API to pull snippets from recent commits to use for the code. But this is much more beautiful and comprehensive on the visual front.

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

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

  • by SSLy on 9/23/22, 1:24 PM

    The author clearly likes the late antiquity esoteric literature and the scripts it used.

  • by nazzacodes on 9/23/22, 2:32 PM

    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

  • by Bloating on 9/23/22, 6:08 PM

    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

  • by notRobot on 9/23/22, 3:04 PM

  • by agluszak on 9/23/22, 11:41 PM

    Wow, I've caught myself thinking it was about matrix.org (the communication protocol) and I couldn't parse the title :D

  • by milchek on 9/23/22, 10:32 PM

    This is really well made, great work! Just a heads up that the “mirror mode - without” link doesn’t work.

  • by laserlight on 9/23/22, 4:32 PM

    I realized that upon seeing the animation, my mind automatically begins playing the soundtrack.

  • by robbiejs on 9/23/22, 1:21 PM

    Brilliant work. Is there a way to have this animated as my android lock or home screen?

  • by aidenn0 on 9/23/22, 5:52 PM

    The amount of love and attention to detail in this truly impresses me.

  • by blastro on 9/23/22, 2:25 PM

    Super cool. Would love a screensaver of this.

  • by naribe on 9/23/22, 1:33 PM

    This looks incredibly authentic. Great work!

  • by green-salt on 9/23/22, 8:17 PM

    This is fun, I've been fiddling with it locally.

  • by StuGoss on 9/23/22, 2:17 PM

    How to make this a live wallpaper on Android?

  • by tundrax on 9/23/22, 2:50 PM

    No love for Safari browser? :(

  • by spookierookie on 9/23/22, 1:30 PM

    wow

  • by pdntspa on 9/23/22, 4:21 PM

    Can we pleeeeeeeeease drive a stake through the heart of this "made with love" meme?