9 ms·
Matrix web-based green code rain, made with love
- temp2022account 4y agoThe 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 4y agoYea agree! Would you mind sharing the bookmark?
- DerWOK 4y agoQuote 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 4y agoThis really deserves the "made with love" attribute. That guy is insane!!!
- saghul 4y agoNow that's some commitment!
- rezmason 4y agoEveryone 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_shots_improved_matrix_resurrections/ https://www.reddit.com/r/matrix/comments/wvg7bn/progress_sho...
- passion__desire 4y agoOne could use stable diffusion or another AI to generate new characters.
- photochemsyn 4y agoThe 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 https://github.com/Rezmason/matrix/blob/master/js/config.js
- rezmason 4y agoThank 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 ^_^
- boxed 4y agoZooming the page changes the pixelation of the rain, which is a fun detail.
- fareesh 4y agoUkraine flag colors were missing but thankfully there is a custom rgb feature: https://rezmason.github.io/matrix/?effect=customStripes&colors=0,0.34,0.72,1,0.84,0 https://rezmason.github.io/matrix/?effect=customStripes&colo...
- 29athrowaway 4y agoI hope someone can update the xscreensaver code with this one.
- pluc 4y agoYeah seriously it looks so much better than GLMatrix.
- rezmason 4y agoI'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 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.
- 29athrowaway 4y agoGLMatrix 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.
- deleted 4y ago[deleted]
- jdelman 4y agoReally, 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 4y agoI'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
- Raed667 4y agoThe 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 https://rezmason.github.io/matrix/?version=morpheus
- Imagenuity 4y agoMorpheus backwards is cool too: https://rezmason.github.io/matrix/?version=morpheus&forwardSpeed=-.1 https://rezmason.github.io/matrix/?version=morpheus&forwardS...
- ClassyJacket 4y agoAmazing. 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.
- karteum 4y agoFor 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>
- ralgozino 4y agoAm I the only one that hears "Wake Up" from RATM when opens the page even though no music is playing?
- seydor 4y agoi hear massive attack
- robbiejs 4y agoBrilliant work. Is there a way to have this animated as my android lock or home screen?
- SSLy 4y agoThe author clearly likes the late antiquity esoteric literature and the scripts it used.
- rezmason 4y agoI 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=576 https://www.digitale-sammlungen.de/de/view/bsb11272589?page=...
- spookierookie 4y agowow
- naribe 4y agoThis looks incredibly authentic. Great work!
- the_jesus_villa 4y agoWhen 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 4y agoI 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/marquee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bl...
- tomxor 4y agoShameless plug Matrix opening scene "Trace Program Running" in 194 bytes of javascript https://www.dwitter.net/d/25497 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 4y agoFor 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 https://beta.dwitter.net/d/25497
- rezmason 4y agoThat's incredible! The ingenuity of code golfers and other constrained coding varieties stymies me.
- anderspitman 4y agoI 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/ https://apitman.com/apps/redpill/ [1]: https://github.com/anderspitman/redpill https://github.com/anderspitman/redpill
- drekipus 4y agoCool idea!
- anderspitman 4y agoThanks!
- StuGoss 4y agoHow to make this a live wallpaper on Android?
- blastro 4y agoSuper cool. Would love a screensaver of this.
- nazzacodes 4y agoIt 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
- throwaway6977 4y agoProbably 'Rainmeter' if on Windows desktop
- laserlight 4y agoSee this comment in the same thread (for macOS) [0]. [0] https://news.ycombinator.com/context?id=32952892 https://news.ycombinator.com/context?id=32952892
- tundrax 4y agoNo love for Safari browser? :(
- rezmason 4y agoUh 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 4y agoWorks 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 4y agoIt's also just a black screen on my android chrome browser.
- ugjka 4y agoneeds webgpu which is disabled on some androids
- callumprentice 4y agohttps://github.com/liquidx/webviewscreensaver 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.
- jaimehrubiks 4y agoI love it. Thanks! (And thanks to OP for this amazing implementation of the matrix)
- callumprentice 4y agoSure 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.
- whalesalad 4y agowoah this is a cool thing that I didn't know I could do
- Mobius01 4y agoThanks 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.
- notRobot 4y agoOnline demo: https://rezmason.github.io/matrix/ https://rezmason.github.io/matrix/
- pdntspa 4y agoCan we pleeeeeeeeease drive a stake through the heart of this "made with love" meme?
- laserlight 4y agoI realized that upon seeing the animation, my mind automatically begins playing the soundtrack.
- aidenn0 4y agoThe amount of love and attention to detail in this truly impresses me.
- Bloating 4y agoReminds 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
- digitalnomad91 4y agoNice! I have something like this on my "self-hosted" website: https://subtlefuge.com/ https://subtlefuge.com/ And a more traditional green version of it as part of my interactive 404 page: https://corbin.world/404 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!
- green-salt 4y agoThis is fun, I've been fiddling with it locally.
- milchek 4y agoThis is really well made, great work! Just a heads up that the “mirror mode - without” link doesn’t work.
- agluszak 4y agoWow, I've caught myself thinking it was about matrix.org (the communication protocol) and I couldn't parse the title :D