rezmason / matrix Goto Github PK

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.

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 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]

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

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)

Do you have the possibility of including the sound which would correspond to the passage of the rain chars ?

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.

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.

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?

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
  The chars are forbidden in filenames in Windows.

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

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.

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.

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?

1. Create a Tweakpane based on the config.
2. Support presets in the pane
3. Populate the pane from the URL
4. Change the URL from the pane with the History API
5. Update the real project from the pane
6. Update the WebGPU project from the pane
7. Find or create Tweakpane plugin for gradient entries and whatever else

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!

Could you add Spout or NDI output so we could use this in VJ software?

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

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

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.

Any recommendations regarding how to make that a Windows Terminal background? 😅
I have attempted to do it manually – just to experiment with its appearance – by adjusting the Terminal background opacity to 0, and it looks awesome IMO:

PS
Plz don't judge me

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

1. Not all rain columns have cursors
2. Not all rain columns always fall vertically- some columns stick and fade in/out
3. Some rain columns have cursors that dont fall the entire lenght of the column, they blink in and out on the way down the screen
4. Some rain columns have cursors that jump to adjacent columns laterally rapidly creating a random wiggle effect

Some of these options are seen at https://www.youtube.com/watch?v=0xbi3U6G7iA

Great job on this!

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

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.

Not trying to spam. Just giving high praise. This project is obsessive fandom to the core.

What the title says. The rain just never initiates, sitting at black screen. All other effects work.

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

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?

Would like a 24 fps mode to give it that cinematic feel

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

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?

I believe the one labeled as "Classic Matrix code" is much closer to the sequels. The rain from the original is quite different:

https://www.youtube.com/watch?v=BMzYUPx5oXo

How can the colours of the glyphs and background be customised?
I've tried changing the backgroundColor value on line 56 of config.js -

Should be looking nice on touchscreens

Like https://www.shadertoy.com/view/ll2GRD but with decay

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

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.

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

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

And also add to chrome and opera!
https://addons.opera.com/en/wallpapers/

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.

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.

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/

Passing RGB color for Background as URL variable would be cool.

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