How to adapt a webgl shader using mouse position to have symmetrical behaviour

Question

I'm trying to create a particular kind of effect for the background of my SpriteKit game, and I've found some shaders on shadertoy that are close to what I want, but I'm struggling to adapt them to do exactly what I want..

There are a few shaders that simulate the sun with atmospheric scattering based on its xy position. here are some examples: https://www.shadertoy.com/view/MsVSWt https://www.shadertoy.com/view/MdtXD2

I want something similar to this effect but I want the glow to be symmetrical, so that when the 'sun' reaches close to bottom or top edge the glow effect is at a maximum, and when it is in the centre it is at a minimum. I've been playing with these shaders trying to get this effect but my understanding of webgl is clearly lacking as I'm struggling to achieve this.

What I've tried playing with is replacing variables such as sunPosition.y with abs(sunPosition.y) - my logic being that the y axis ranges from -1 to 1 so I should be able to get symmetry by making everything positive.. but this in fact has no effect.

If someone can nudge me in the right direction would be greatly appreciated as I'm now thoroughly confused by webgl!

Answer 1

Just replace all the Y-axis-dependent variables foo with 1 - abs(2*foo - 1). This includes uv.y and sunVec.y. Here's the second example shadertoy with that modification: https://www.shadertoy.com/view/lsjfzh

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.y;


    float sky = uv.y;
    sky = 1.0 - abs(2.0 * sky - 1.0);

    // animation
    vec2 sunVec;
    if (iMouse.x<20.0)
    {
        sunVec = vec2((0.8+0.5 * sin(iGlobalTime)),( 0.44 + 0.4 * cos( 2.0 * iGlobalTime)));
    }else{
        sunVec = iMouse.xy/iResolution.y;
    }

    float sy = sunVec.y;
    sy = 1.0 - abs(2.0 * sy - 1.0);


    //Mie mask
    float sun = max(1.0 - (1.0 + 10.0 * sy + 1.0 * sky) * length(uv - sunVec),0.0)
        + 0.3 * pow(1.0-sky,12.0) * (1.6-sy);

    //the sauce
    fragColor = vec4(mix(vec3(0.3984,0.5117,0.7305), vec3(0.7031,0.4687,0.1055), sun)
              * ((0.5 + 1.0 * pow(sy,0.4)) * (1.5-sky) + pow(sun, 5.2)
              * sy * (5.0 + 15.0 * sy)),1.0);
}