const fragmentShader = `
    precision mediump float;

    uniform vec2 resolution;
    uniform float time;

    const float NUM_LAYERS = 8.0;

    const vec3 blue = vec3(186.0, 204.0, 255.0) / 255.0;
    const vec3 white = vec3(255.0, 249.0, 249.0) / 255.0;
    const vec3 yellow = vec3(255.0, 244.0, 232.0) / 255.0;
    const vec3 orange = vec3(255.0, 198.0, 144.0) / 255.0;

    float random(vec2 p) {
        p = fract(p * vec2(323.34, 156.21));
        p += dot(p, p + 300.32);
        return fract(p.x*p.y);
    }

    vec3 starColor(float r) {
        vec3 color = mix(blue, white, smoothstep(0.0, 0.33, r));
        color = mix(color, yellow, smoothstep(0.33, 0.66, r));
        color = mix(color, orange, smoothstep(0.66, 1.0, r));

        return color;
    }

    float star(vec2 uv) {
        float d = length(uv);
        float m = 0.001 / pow(d, 2.);
        m *= smoothstep(1.0, 0.2, d);
        return m;
    }

    vec3 starLayer(vec2 uv) {
        vec3 color = vec3(0);

        vec2 gridUv = fract(uv) - 0.5;
        vec2 cell = floor(uv);

        // 3x3 of self and adjacent cells
        for (int x = -1; x <= 1; ++x) {
            for (int y = -1; y <= 1; ++y) {
                vec2 cellOffset = vec2(x, y);

                float rand = random(cell + cellOffset);
                vec2 offset = vec2(rand, fract(rand * 4.0)) - 0.5;

                float star = star(gridUv - cellOffset - offset);

                float size = rand + 0.1;
                vec3 col = starColor(rand);

                color += star * size * col;
            }
        }

        return color;
    }

    void main(void)
    {
        vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y;

        vec3 color = vec3(0.0);

        uv *= 0.5;

        for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYERS) {
            float depth = fract(i + time * 0.03);
            float scale = mix(20.0, 0.5, depth);
            float fade = depth * smoothstep(1.0, 0.9, depth);
            color += starLayer(uv * scale + i * 200.0) * fade;
        }

        gl_FragColor = vec4(color, 1.0);
    }
`;

const vertexShader = `
    attribute vec2 position;

    void main() 
    {
        gl_Position = vec4(position, 0.0, 1.0);
    }
`;

function main() {
    const canvas = document.querySelector("canvas");
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;

    const gl = canvas.getContext("webgl");

    if (gl === null) {
        alert("Failed to initialize WebGL");
        return;
    }

    shaderProgram = gl.createProgram();
    for (let i = 0; i < 2; ++i) {
        let source = i === 0 ? vertexShader : fragmentShader;
        let shaderObj = gl.createShader(
            i === 0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER
        );
        gl.shaderSource(shaderObj, source);
        gl.compileShader(shaderObj);
        if (!gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS))
            console.error(gl.getShaderInfoLog(shaderObj));
        gl.attachShader(shaderProgram, shaderObj);
        gl.linkProgram(shaderProgram);
    }
    
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
        console.error(gl.getProgramInfoLog(shaderProgram));

    shaderProgram.position = gl.getAttribLocation(shaderProgram, "position");
    shaderProgram.time = gl.getUniformLocation(shaderProgram, "time");
    shaderProgram.resolution = gl.getUniformLocation(
        shaderProgram,
        "resolution"
    );

    gl.useProgram(shaderProgram);

    var pos = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pos), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(shaderProgram.position);
    gl.vertexAttribPointer(shaderProgram.position, 2, gl.FLOAT, false, 0, 0);

    gl.enable(gl.DEPTH_TEST);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    function render(delta) {
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        gl.uniform1f(shaderProgram.time, delta / 1000.0);
        gl.uniform2f(shaderProgram.resolution, canvas.width, canvas.height);
        gl.drawArrays(
            gl.TRIANGLE_STRIP,
            0,
            4
        );
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
}

main();