#version 300 es
precision highp float;

uniform float u_time;

uniform float u_canvasWidth;
uniform float u_canvasHeight;


out vec4 fragColor;

// See https://thebookofshaders.com/10/
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

vec4 boxFade(vec4 inputColor, float boxSize, float period) {
    float canvasSize = max(u_canvasWidth, u_canvasHeight);

    vec2 uv = gl_FragCoord.xy/vec2(canvasSize, canvasSize);
    uv.x = floor(uv.x / boxSize) * boxSize;
    uv.y = floor(uv.y / boxSize) * boxSize;

    float rand = random(uv);
    float mask = mod(u_time / period, 2.4);

    return rand < mask ? inputColor : vec4(0.0, 0.0, 0.0, 1.0);
}

vec2 pixellate(vec2 inputVec, float size) {
    return vec2(
        floor(inputVec.x / size) * size,
        floor(inputVec.y / size) * size
    );
}

void pixelatedSinWave() {
    vec2 uv = gl_FragCoord.xy/vec2(u_canvasWidth, u_canvasHeight);

    float amount = 1.0/(u_time * 9.0);

    uv = pixellate(uv, amount);

    //vec4 outputColor = vec4(uv.x, 0., uv.y, 1.0);
    float dist = distance(uv, vec2(0.5, 0.5));
    float curve = sin(dist * 60.0);
    vec4 outputColor = vec4(0.5, 0.1, curve, 1.0);

    float size = 0.01;
    float period = 1.0;

    fragColor = boxFade(outputColor, size, period);
 
}


void main() {

    pixelatedSinWave();

}