/*********
* made by Matthias Hurrle (@atzedent)
*/

/** @type {HTMLCanvasElement} */
const canvas = window.canvas
const gl = canvas.getContext('webgl2')
const dpr = window.devicePixelRatio
const touches = new Set()

const vertexSource = `#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

in vec2 position;

void main(void) {
    gl_Position = vec4(position, 0., 1.);
}
`
const fragmentSource = `#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 fragColor;

uniform vec2 resolution;
uniform float time;

#define T (3.14159+time)
#define V .0
#define S smoothstep
#define hue(a) (.6+.6*cos(6.3*(a)+vec3(0,23,21)))
#define rot(a) mat2(cos(a),sin(a),-sin(a),cos(a))

float rnd(float a) {
    return fract(sin(a*12.233)*78.9898);
}

float curve(float a, float b) {
    a /= b;

    return mix(
        rnd(floor(a)),
        rnd(floor(a)+1.),
        pow(S(.0, 1.,fract(a)),.5)
    );
}

vec2 rnd(vec2 p) {
    vec3 a = fract(
        p.xyx*vec3(123.34, 234.34, 345.65)
    );

    a += dot(a, a*34.45);

    return fract(
        vec2(
            a.x*a.y,
            a.y*a.z
        )+pow(S(.01, 1., V), .8)*.3);
}

void main(void) {
    vec2 uv = (
        gl_FragCoord.xy -.5 * resolution
    ) / min(resolution.x, resolution.y);

    uv *= 6.;

    vec3 col = vec3(0);
    vec2 f = fract(uv)-.5,
    i = floor(uv),
    id = vec2(0);
    float mind = .5;

    for (float y = -1.; y < 1.; y++) {
        for (float x = -1.; x < 1.; x++) {
            vec2 e = vec2(x, y),
            n = rnd(e+i),
            p = e+sin(n*T)*.5+.5;

            float d = length(f-p)*1.25;

            if (d < mind) {
                mind = d;
                id = i+e;
            }
        }
    }

    col += hue(vec3(id, mind));
    col -= pow(S(.0, 1., mind), 4.);

    vec2
    q = uv,
    st = uv;
    q *= rot(sin(curve(T*.2, 1.)*1.5));
    st *= rot(sin(curve(T*.2, 1.)*1.5)*.5-.5);
    float
    sp = 2.9-V,
    mn = min(resolution.x, resolution.y),
    mx = max(resolution.x, resolution.y);
    col *= 1.75*vec3(
        exp(1.-length(uv*.2)),
        mod(
            (mn/mx)*.85*
            (
                1.2*
                sin(
                    T+curve(T*.5,.5)*.125+
                    st.y*(
                        .5*(1.+sin(T+curve(T, 1.)*.1)*.5+.5)
                    )
                )+st.x
            ),
            sp
        )-.5*sp,
        1.2*cos(
            T+curve(T, 1.)*.5+
            sin(T*.5+(3.*q.x)*.25)
        )-q.y*.5
    );

    col = abs(col);

    fragColor = vec4(col, 1);
}
`
let time;
let buffer;
let program;
let resolution;
let vertices = []

function resize() {
	const {
		innerWidth: width,
		innerHeight: height
	} = window

	canvas.width = width * dpr
	canvas.height = height * dpr

	gl.viewport(0, 0, width * dpr, height * dpr)
}

function compile(shader, source) {
	gl.shaderSource(shader, source)
	gl.compileShader(shader)

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		console.error(gl.getShaderInfoLog(shader))
	}
}

function setup() {
	const vs = gl.createShader(gl.VERTEX_SHADER)
	const fs = gl.createShader(gl.FRAGMENT_SHADER)

	program = gl.createProgram()

	compile(vs, vertexSource)
	compile(fs, fragmentSource)

	gl.attachShader(program, vs)
	gl.attachShader(program, fs)
	gl.linkProgram(program)

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		console.error(gl.getProgramInfoLog(program))
	}

	vertices = [
		-1.0,
		-1.0,
		1.0,
		-1.0,
		-1.0,
		1.0,
		-1.0,
		1.0,
		1.0,
		-1.0,
		1.0,
		1.0
	]

	buffer = gl.createBuffer();

	gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)

	const position = gl.getAttribLocation(program, "position")

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

	time = gl.getUniformLocation(program, "time")
	resolution = gl.getUniformLocation(program, 'resolution')
}

function draw(now) {
	gl.clearColor(0, 0, 0, 1.)
	gl.clear(gl.COLOR_BUFFER_BIT)

	gl.useProgram(program)
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

	gl.uniform1f(time, now*.001)
	gl.uniform2f(
		resolution,
		canvas.width,
		canvas.height
	)
	gl.drawArrays(gl.TRIANGLES, 0, vertices.length * .5)
}

function loop(now) {
	draw(now)
	requestAnimationFrame(loop)
}

function init() {
	setup()
	resize()
	loop(0)
}

document.body.onload = init
window.onresize = resize