rezmason / matrix Goto Github PK
View Code? Open in Web Editor NEWmatrix (web-based green code rain, made with love)
Home Page: https://rezmason.github.io/matrix
License: MIT License
matrix (web-based green code rain, made with love)
Home Page: https://rezmason.github.io/matrix
License: MIT License
I believe the one labeled as "Classic Matrix code" is much closer to the sequels. The rain from the original is quite different:
I'm experimenting with a screensaver for my work machine which displays the effect over my company logo. Everything is working great, except that the image displays upside-down for some reason! I checked the demo image (Eagle rock) and discovered that this is true there, too.
To reproduce: effect=image&url=[someUrl]
I use your awesome custom Matrix font with my minimalistic matrix rain effect (a demo with a custom font).
And I'm not sure if you're aware but the font is missing the character "6". I'm not sure if this is intentional but I just decided to create an issue so you're aware of it.
I'd like to run this code on either my localhost, or a server on my LAN, so it will work even when the internet is down or being flaky. Sorry for the stupid newbie question, but I read the entire readme file, and I couldn't find any instructions on how to run this program on my own machine. What am I missing?
It feels perfect as Matrix Reloaded code.
How about adding another version, "Classic", reminiscent of the original ones (less 3D) from The Matrix besides "Reloaded" (the one that's named 1999).
Hi,
First and foremost, thank you for the awesome project!
I've noticed that increasing the density results in a black stripe in the middle of the screen, which becomes more and more noticeable the higher the density is.
This is the settings I've used.
Do you see the same on your end ?
Cheers,
PY
Hello,
first of all: awesome <3
I'm using your project as sources into my OBS (streaming software) (i'll add you into my credits ofc)
I would like to know if there is a possibility to have a transparent background instead of black/colored ? so i can put it in front of existing material in my OBS without hiding everything :)
sorry if it's already feasible i tried with the RGB codes but my knowledge is very limited :(
NB: I'm aware that's not an important/urgent request.
Have a nice day :)
Hi there! I was wondering can I somehow download these animations in video format? I'm unable to figure out how to:/
Passing RGB color for Background as URL variable would be cool.
I've been experimenting with the customization options to get a transparent or semi-transparent background and have come up short. Is this currently possible?
Getting this in both Chrome 96 and some other version of Firefox. WebGL itself works fine but whenever I try to run this whether it's in Chrome or VSCode Run and Debug (also w/ Chrome) I get an error of "CRBug/1173575 non-JS module filed deprecated". This sounds pretty self explanatory except that I cannot find any import that's trying to import a non JS file.
The cursors would gradually fill up the screen when using negative fallSpeed and skipIntro=false
example: https://rezmason.github.io/matrix/?effect=none&fallSpeed=-0.1&skipIntro=false
macOS Monterey 12.5.1 (21G83)
Safari Version 15.6.1 (17613.3.9.1.16)
In the console:
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'navigator.gpu.getPreferredCanvasFormat')
(main.js:58)
Nothing displays. Black, blank screen.
I am new in front-end so I can't execute it properly. Can you define the steps properly?
I am using django for backend
I'm running it on an Intel Mac mini but on a high pixel density display its quite heavy, so I'm running it with &resolution=0.7 so performance is decent but most of the time the bloom effect looks like JPEG noise, bad quality instead of the bloom effect. Turning it down to 0 makes the code look different, maybe it's not considering bloomSize=0 for the color, and low values don't look as expected. Maybe the amount of bloom could be lowered, rather than lowering the resolution which I think it does, it could lower the alpha, or the color to make it less noticeable via another variable. As an alternative, the dithered bloom could be blurred but I'm not sure if it would be performant enough.
This url looks more noisy
https://rezmason.github.io/matrix/?version=operator&width=200&resolution=0.7
Here the noise is barely noticeable
https://rezmason.github.io/matrix/?version=updated&resolution=0.7&font=matrixcode
The noise is more noticeable when using an external display rather than a MacBook Built-in Display due to color calibration, but on the same external display the urls from above look different regarding the bloom effect, making the first one look like the second one could greatly improve the look
If I can help let me know
Thanks for the amazing work
PS: Since different displays show color differently, maybe the best option could be to control how bright the bloom color is, since comparing it to another display it may be darker and less noticeable.
The attached images are named accordingly
Is it possible to add a guide step by step in markdown, or a tool to add custom fonts and symbols locally?
Even if it's not possible to put characters directly as a string associated with a font (for example: localFont="Futura", unicodeGlyphs="AaBb...?+&_$#@"), it could be interesting to select a set of glyphs, and make the necessary files (svg and png images) with clear instructions to add that set as a font option.
It would be like: startwidth=X , finalwidth=Y and animationspeed=Z.
It would give some cool effect and I think it would be easy to implant.
The url would look like: https://rezmason.github.io/matrix/?startwidth=100&finalwidth=20&animationspeed=5.
The animation speed could be in second or in milliseconds.
Is there a way to make this a screensaver in Windows 10/11?
Btw this is a dream come true! You're an awesome individual
Do you have the possibility of including the sound which would correspond to the passage of the rain chars ?
A few options to consider for the future from reviewing the original film (see https://www.youtube.com/watch?v=MvEXkd3O2ow starting at 00:25-)
Some of these options are seen at https://www.youtube.com/watch?v=0xbi3U6G7iA
Great job on this!
I have download the code but troubleing in implementation of this project on my holographic screen .
Although it's starting but end in 3 sec .
I have tried buch of things but can't find the answer.
This is amazing work! At first I thought it wasn't working on my M1 Pro Macbook, but I realized it was due to Google Chrome. It looks great in Firefox and Safari, but for some reason the gradient streams do not appear within the glyphs themselves and instead appear as solid columns of green. I checked the docs and the issues to see if there was a known issue with Google Chrome but couldn't find any, so I'm posting this issue. I've attached a screenshot of what I see with Google Chrome (stable and beta versions), which occurs on several Macs.
I can't clone the repo and when I do it manually (ZIP) I can't copy some files:
".svg
*.svg
>.svg
<.svg
|.svg
And also add to chrome and opera!
https://addons.opera.com/en/wallpapers/
Would like a 24 fps mode to give it that cinematic feel
Is it possible to adjust the "gap" intensity?
Right now, each column feels to complete, I think there should be more gaps in between glyphs.
It should be random though, not every column will have the same amount of gaps and for a particular column maybe there are no gaps at all, maybe a gap of some length or even more than one gap at different locations
Hi,
First of all, thanks for building such a cool project.
Now, I'm having some trouble figuring out what are the ranges for the RGB colors that we can set for backgroundColor, glintColor and cursorColor.
On most examples, the numbers used are decimals in the 0-1 ranges that's used for stripecolors, pallette, etc.
But then on the default config we have (for example) the following: cursorColor: { space: "rgb", values: [1.5, 2, 0.9] }
So, we have a 1.5 and a 2 value there. What exactly do these represent?
So what are the RGB color ranges for those parameters? Are these 0-1 range? 0-10 range? 0-255 range?
Cheers
I really really want to make this into a perfectly looping video but "loops" as is pointed out in the documentation is a work in progress (WIP).
To this effect, could you please please implement skipOutro function that has the rain die down in intensity before stopping completely.
I can then finally have my perfectly looping video which I plan to use as a background on a lot of my devices.
Kindest regards,
Vsevolod Mineev
Hi, I am trying to implement a LivelyWallpaper version of this project but I cant seem to figure out how to change animation properties mid animation. I dont have a good grasp on shaders, so some pointers would really be appreciated!
this thing is great, works great, and is very customisable, but i feel like it's sad to not have access to settings like ripples / ripples type in the customisations.
This matrix rain has so much potential, and is the ONLY accurate one i've found (and i have looked for quite a long time) but yeah it could become a lot better if one were to be able to access every setting like the current customisations
(maybe i'm just stupid and can't figure out how to do it, but i've tried changing the default parameters in the web view, putting stuff like rippleName=circle in the link, like the rest of the parameters with no success)
How can the colours of the glyphs and background be customised?
I've tried changing the backgroundColor value on line 56 of config.js -
Line 56 in a4a0406
Could you add Spout or NDI output so we could use this in VJ software?
I have been tinkering with something similar but wondered if instead of all random glyphs it could pull strings from an array? That way we could incorporate live (or static) information into the falling code to make it a useful information display.
Adding a function to set a custom image via JavaScript with a base64 image string would make it very easy to customize with a local image by just calling a function like setBase64Image(string)
with the image formatted as "data:image/jpeg;base64," + data.base64EncodedString()
which is set in image.src
I'm currently using this method to customize jQuery WebGL Ripples in a macOS app (Backgrounds) to use it as a wallpaper. With this function it's very easy to use the user's wallpaper or any local file
Where exactly did you get the assets for these? https://raw.githubusercontent.com/Rezmason/matrix/master/assets/resurrections_msdf.png
Did you generate them yourself from screenshots, or is there a more direct source (like what you claim you found for the original Matrix code from archive)?
Will these be included in the font set?
What the title says. The rain just never initiates, sitting at black screen. All other effects work.
hi, i wanna ask how to change the default version (classic) display to another version.
wanna doi it because dont wanna change or access the "version" address on the link.
Thanks.
First of all, thank you very much for your work. This is by far the best code rain I've ever seen.
Would it be possible to integrate the current time? That would make it a perfect clock. I'm not a programmer, but I fiddled around and made something work to better demonstrate what I have in mind.
http://jsfiddle.net/7fhdt2za/
Hey!
Love the appearance and the love for detail, great work! Is it possible to change the glyphs? And if so how would one do it?
Best
Markus
Not trying to spam. Just giving high praise. This project is obsessive fandom to the core.
First of all, this is fantastic! great job!!! and thanks for sharing it and the detail explanations you give on every issue.
Maybe I have missed some configuration option, but if there isn't it would be great for the code to start raining from the top like the opening titles. Right now when the code starts is already all over the screen.
Hi, I was thinking about adjusting the column length via url also. The only thing I find missing is the columns feel to short, all the same length. And maybe make the length a bit random. Would that be possible?
Good night, I want to say to you that this work is very impressive. Really amazing. It’s not strange that Vice Motherboard has paid attention to your code.
Thanks, I am enjoying a lot all the variants. Very very nice.
I've seen tons of not-quite-right matrix digital rain effects over the years, and I wanted to say bravo and congrats for creating one that is so true to the original!! Have a great day :D
https://gtarg.gitbook.io/master-tracker/glyph-alphabet-guides
An ARG run by MatPat of The Game Theorists used these two glyph sets to encode ciphers. It would be neat if they were available as MSDF fonts.
Should be looking nice on touchscreens
Like https://www.shadertoy.com/view/ll2GRD but with decay
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.