Make the effect transparent

[FieryRMS]

fixes #46
I was thinking it would be much better if the effect was transparent and we could overlay the effect over anything we wanted. Say for example on a website where it could be playing over the UI, or perhaps as a wallpaper where the background doesn't have to be so monotonously bland and you had the option to set a background image.

overview of what I did:

• Set alpha of pallettePass, stripePass, imagePass and mirrorPass to 0 (i think 💀) and remove the backgroundColor variables
• I didn't do the same for the "Debug View" effect
• renamed url to glyphURL and bgURL to glyphBGURL
• added a new config option bgURL and config property pageBGURL
• implemented backgroundColor and pageBGURL to set the color or image of the page body

A cool idea would be to use bgURL to show a normal city and glyphURL to show a matrix version of the same city, but I wouldn't know how to make such images tho :')

[Rezmason]

Thanks for this! I promise I'll pore over it soon.

[Rezmason]

Sorry for the delay @FieryRMS !

I did a git checkout of this PR and tested it locally, but in Mac Firefox, Mac Safari or Mac Chrome Canary, all I see is a black window (unless I change the alpha in the final passes' outputs back to 1.0). What browser/OS combo, or other context, are you able to get this PR to work in?

I wonder if this is like ANGLE in Chrome doing something on Windows. I'd love to find out.

Anyway, I certainly get the intent of the change— use CSS to load up a background image, rename the existing URL-accepting parameter to fill in glyphs or something, and make sure the canvas winds up transparent, at least in places.

I'll admit that I've intentionally dodged the issue of alpha in the past, just because it's easier to pretend it doesn't exist. It invites questions about occlusion, like how much light can pass through a glyph. To my knowledge, in the movies, if Matrix code shows up on or in front of a thing, it glows on top of the thing; it's transparent, but it's order-independent. So I've held the rationale that all anyone might want to do with this project would boil down to setting mix-blend-mode on an iframe or something.

This PR is much more intentional. Again, I can't see it in action yet, but presumably it resembles the current mirror effect, except instead of a camera feed it displays a background image (and there's no ripples, but that's unimportant for now). What I don't yet comprehend is how the colors in the output-with-zero-alpha get composited onto that image. I thought I knew this stuff. 😄

I have a hunch that we'll want to channel glyph brightness into opacity by the end of this, with a multiplier param. More on that later.

One other thing to get around to after we figure out how I can get it to work on my machine is, how can this be introduced while still supporting the old config? I have no guide for contributors yet— oops— but one challenge to the design of this project is that I don't break any existing URLs. In other words, we can't get rid of the params that drive the current "background color", we can just expand the config to express a broader range of options.

Sorry for rambling! I look forward to getting it working on my machine 👍

[FieryRMS]

Hey @Rezmason,
I am using Windows 10 Pro N 19044.2251 as my OS and as for my browsers I tested on the following versions,
Google Chrome: 107.0.5304.107 (Official Build) (64-bit) (cohort: Stable)
Google Chrome: 110.0.5443.0 (Official Build) canary (64-bit) (cohort: Clang-64)

As for visual changes I found minimal differences between them.

Screenshots

(no params) Original - Mine

(?renderer=webgpu) Original - Mine

(?backgroundColor=1,1,1&effect=stripes&stripeColors=1,1,1) Original - Mine

for some reason setting everything white doesn't set everything white on the original, it's slightly grey.

Screenshots showcasing changes

bg.jpg is a file I have stored locally.

(?bgURL=bg.jpg&version=megacity&volumetric=true&forwardspeed=0.2&density=2) Link

(?bgURL=bg.jpg&bloomStrength=1&bloomSize=1) Link

The glyphs seems to be slightly transparent and is glowing on top of the image like you said.

As shown above, the original implementation of backgroundColor can be completely replaced by the new implementation, as it really doesn't have much difference. In fact, I think original one introduces some artifacts, where the background has some grainy noise and doesn't show the actual color when set, as shown by the 3rd screenshot above. Perhaps instead of setting the color or image of the body, we can set them on the canvas, hence removing any issues that people who are already using the project might face, preventing break of existing urls. I actually tried this before, but didn't like that it showed the black background for a split second when going full screen on double click. On hindsight, perhaps I was being petty and it really wasn't that big of a deal.

Another thing that might break existing urls is the renaming of the url param, although its a simple fix, thought I should still mention it again. I couldn't think of anything else at that moment that would be a less confusing name for the background url so I opted to change the name the existing param.

Not that I knew any of this before (in fact I am a complete noob), I, too, don't understand how setting alpha to 0 is producing an image 💀💀

On a separate topic, what does glintColor do? I couldn't find any difference when I set this variable, hence couldn't test if it worked after I made the changes.

[Rezmason]

Where's the red text skull image from? It looks fantastic.

To answer your question, glintColor is used when isolateGlint is set to true. For instance, in the Bugs variation, the blue glowing bits are the glint. Glint was added to the matrix code in the Resurrections opening titles; a related but distinctly different glint effect was used in Resurrections' on-screen code.

Anyway, those screenshots look good! It's almost definitely a weird Windows/Chrome/ANGLE thing that's causing it to work at all, but the screenshots alone help specify the desired effect.

I've done some experimenting, and by changing the alpha values back to 1.0 and setting the canvas CSS style's mix-blend-mode: screen;, I can produce the same result, I think, in my browsers:

By using a bright image as background, and a dark-code-over-light-background version of the effect with the mix-blend-mode set to multiply, we can produce a related interesting effect:

I propose we make an examples folder that demonstrates these in independent HTML files. In fact, an examples folder would generally simplify the project by showing visitors how they can leverage it without adding features.

In the meantime, it's worth it for us to just try to drive opacity from glyph intensity, to see what happens. I'll give it a shot in the next couple days, using this PR as a jumping-off point; it probably boils down to expanding color support to include alpha, so paletteRGB and paletteHSL would additionally get paletteRGBA and paletteHSLA, etc etc. A little messy, but still backwards-compatible.

[lexum0]

@FieryRMS do you have a url parameter to set the black background to transparent (alpha 0)? I'm trying to use it as a wallpaper so the idea is to have the rain code on top of the desktop

[Rezmason]

I really dropped the ball on this issue. I'm sorry about that, folks, when I committed to this one I figured I'd have the bandwidth to tackle it in weeks, certainly not years.

For what it's worth, I intend to get this stuff done by the end of this month (February 2024).

[lexum0]

If there's something I can help with even testing let me know