The Matrix falling letter


Recently I create something kind of falling matrix letter with a render pass and it looks really great, but later when I test the effect i found that it ruined the app. So I decide to find code and found this https://dev.to/gnsp/making-the-matrix-effect-in-javascript-din
I’m not a coder at all so I try to found some help with it. Is anybody has time and can help me to adapt this code for Spark AR ?

It’s going to be difficult to translate that code into spark because it uses html canvas, which has different capabilities. Instead, you can try translating this shader code into patches.

https://www.shadertoy.com/view/ldccW4

float text(vec2 fragCoord)
{
    vec2 uv = mod(fragCoord.xy, 16.)*.0625;
    vec2 block = fragCoord*.0625 - uv;
    uv = uv*.8+.1; // scale the letters up a bit
    uv += floor(texture(iChannel1, block/iChannelResolution[1].xy + iTime*.002).xy * 16.); // randomize letters
    uv *= .0625; // bring back into 0-1 range
    uv.x = -uv.x; // flip letters horizontally
    return texture(iChannel0, uv).r;
}

vec3 rain(vec2 fragCoord)
{
	fragCoord.x -= mod(fragCoord.x, 16.);
    //fragCoord.y -= mod(fragCoord.y, 16.);
    
    float offset=sin(fragCoord.x*15.);
    float speed=cos(fragCoord.x*3.)*.3+.7;
   
    float y = fract(fragCoord.y/iResolution.y + iTime*speed + offset);
    return vec3(.1,1,.35) / (y*20.);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragColor = vec4(text(fragCoord)*rain(fragCoord),1.0);
}

Under the hood, Spark translates the patches into GLSL code, so going from GLSL into patches usually works pretty smoothly :slight_smile:

3 Likes

Thank you @josh_beckwith I will try to understand something :smiley: