Matrix web-based green code rain, made with love(github.com) |
Matrix web-based green code rain, made with love(github.com) |
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.
Works in Safari on iPadOS 16.1 (20B5050f) on iPad, and iOS 16.1 (same build) on iPhone.
_"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!)"_
I'm glad the URL variable idea paid off, it makes it very easy to bookmark and share custom versions with other people ^_^
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...
<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&forwardS...
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.
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.
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.
https://rezmason.github.io/matrix/?effect=customStripes&colo...
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bl...
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.
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.
This one looks great and it would be great to see an updated version.
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
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!
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=...
That would be such an awesome application. :O