[HN Gopher] Matrix web-based green code rain, made with love
___________________________________________________________________
Matrix web-based green code rain, made with love
Author : DerWOK
Score : 351 points
Date : 2022-09-23 11:27 UTC (11 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| robbiejs wrote:
| Brilliant work. Is there a way to have this animated as my
| android lock or home screen?
| boxed wrote:
| Zooming the page changes the pixelation of the rain, which is a
| fun detail.
| [deleted]
| jdelman wrote:
| 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 wrote:
| 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
| 29athrowaway wrote:
| I hope someone can update the xscreensaver code with this one.
| pluc wrote:
| Yeah seriously it looks so much better than GLMatrix.
| 29athrowaway wrote:
| GLMatrix aged gracefully. It has been around for a while and
| I still use it.
|
| This one looks great and it would be great to see an updated
| version.
| rezmason wrote:
| I'm open to contributing it. It'd save me the trouble of
| making and maintaining screensavers myself, which is a very
| common request. The struggle to support a Mac screensaver for
| more than a few years at a time has already swallowed a great
| Matrix project before, mathew's RedPill (
| https://github.com/lpar/RedPill ).
|
| One important matter I haven't investigated yet is what
| constraints there are on GL in xscreensaver as a whole. My
| project is basically a shader sandwich, but there are
| alternative approaches a port can take if that's untenable.
|
| I also sincerely like jwz's cheeky competitiveness with other
| screensaver authors-- when xscreensaver 4.11 was released, he
| captioned it, "Watch as GLMatrix makes RedPill scream for
| mercy." If I port to xscreensaver I'll make sure to continue
| the tradition.
| Raed667 wrote:
| 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
| ClassyJacket wrote:
| 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.
| blastro wrote:
| Super cool. Would love a screensaver of this.
| SSLy wrote:
| The author clearly likes the late antiquity esoteric literature
| and the scripts it used.
| rezmason wrote:
| 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=...
| callumprentice wrote:
| 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.
| whalesalad wrote:
| woah this is a cool thing that I didn't know I could do
| jaimehrubiks wrote:
| I love it. Thanks! (And thanks to OP for this amazing
| implementation of the matrix)
| callumprentice wrote:
| Sure thing - it's amazing isn't it?
|
| I'm considering writing a version for Windows myself if noone
| one points me at an existing one.. I think it could be quite
| fun - especially as there are quite a few neat WebL/WebGPU
| pages out there that would make a good screen saver.
| notRobot wrote:
| Online demo: https://rezmason.github.io/matrix/
| karteum wrote:
| 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 wrote:
| Very nice! Thanks for sharing.
| bhdzllr wrote:
| JSFiddle Preview of the code: https://jsfiddle.net/yLn41po0/
| tomxor wrote:
| 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).
| zingplex wrote:
| For those interested, the beta version of dwitter.net has an
| option to show the uncompressed copy of the code
|
| https://beta.dwitter.net/d/25497
| rezmason wrote:
| That's incredible!
|
| The ingenuity of code golfers and other constrained coding
| varieties stymies me.
| temp2022account wrote:
| 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 wrote:
| Yea agree! Would you mind sharing the bookmark?
| pdntspa wrote:
| Can we pleeeeeeeeease drive a stake through the heart of this
| "made with love" meme?
| Bloating wrote:
| 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
| ralgozino wrote:
| Am I the only one that hears "Wake Up" from RATM when opens the
| page even though no music is playing?
| seydor wrote:
| i hear massive attack
| tundrax wrote:
| No love for Safari browser? :(
| rezmason wrote:
| Uh oh, is it broken in Safari again?
|
| Seems to work in Safari 15.6.1, may I ask what version of
| Safari you've got? I'd love it if you filed an issue.
| Terretta wrote:
| Works in Safari version 16.1 (18614.2.6.1.1) on Ventura 13.0.
|
| Works in Safari on iPadOS 16.1 (20B5050f) on iPad, and iOS
| 16.1 (same build) on iPhone.
| jacksonkmarley wrote:
| It's also just a black screen on my android chrome browser.
| spookierookie wrote:
| wow
| green-salt wrote:
| This is fun, I've been fiddling with it locally.
| nazzacodes wrote:
| 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
| laserlight wrote:
| See this comment in the same thread (for macOS) [0].
|
| [0] https://news.ycombinator.com/context?id=32952892
| throwaway6977 wrote:
| Probably 'Rainmeter' if on Windows desktop
| DerWOK wrote:
| 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 wrote:
| This really deserves the "made with love" attribute. That guy
| is insane!!!
| saghul wrote:
| Now that's some commitment!
| rezmason wrote:
| Everyone needs a hobby! :D
|
| A year ago, when the fourth movie's trailers premiered, I
| wrote a script to slice the glyphs out of the video, and then
| identified the new ones and redrew them as best as I could.
|
| I missed a couple "punctuation marks" but the Resurrections
| version of the effect was live _ten days before_ the fourth
| film came out!
|
| Lately some behind-the-scenes footage hit the web, and I was
| able to improve those glyphs them substantially, release a
| font, etc.
|
| https://www.reddit.com/r/matrix/comments/wvg7bn/progress_sho.
| ..
| passion__desire wrote:
| One could use stable diffusion or another AI to generate new
| characters.
| teddyh wrote:
| One could use GPT-3 to generate new HN comments.
| rezmason wrote:
| Not sure why you're downvoted, the Matrix is canonically AI-
| generated. Any personal objection I'd have to this just
| cements the idea further to the fiction, you know?
| photochemsyn wrote:
| The config file describing the glyphs is worth looking at. Also
| all the variable settings with comments. Pretty awesome work:
|
| https://github.com/Rezmason/matrix/blob/master/js/config.js
| rezmason wrote:
| Thank you! A lot of what's possible via the configs is really
| tricky to specify via a URL, sadly, so I'm thinking of making
| a GUI to expose the rest of the knobs and switches. That's a
| ways down the road, though.
|
| I'm glad the URL variable idea paid off, it makes it very
| easy to bookmark and share custom versions with other people
| ^_^
| fareesh wrote:
| Ukraine flag colors were missing but thankfully there is a custom
| rgb feature:
|
| https://rezmason.github.io/matrix/?effect=customStripes&colo...
| naribe wrote:
| This looks incredibly authentic. Great work!
| milchek wrote:
| This is really well made, great work! Just a heads up that the
| "mirror mode - without" link doesn't work.
| anderspitman wrote:
| 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
| drekipus wrote:
| Cool idea!
| StuGoss wrote:
| How to make this a live wallpaper on Android?
| ugjka wrote:
| I tried this, but no dice
| https://play.google.com/store/apps/details?id=com.nuko.livew...
| sp6677 wrote:
| This app worked for me just fine. Thanks
| aidenn0 wrote:
| The amount of love and attention to detail in this truly
| impresses me.
| laserlight wrote:
| I realized that upon seeing the animation, my mind automatically
| begins playing the soundtrack.
| the_jesus_villa wrote:
| 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!
| andirk wrote:
| I like how marquee is long deprecated yet the MDN compatibility
| guide[1] shows that no one has dared drop it. Unlike its friend
| blink who got dropped the moment everyone hated it[2].
|
| [1] https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/ma... [2]
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bl...
| digitalnomad91 wrote:
| 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!
___________________________________________________________________
(page generated 2022-09-23 23:02 UTC)