Garciat/charge.html

## charge.html
<!DOCTYPE html>
<html>

<head>
<title>hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style>
html, body {
  height: 100%;
  margin: 0;
}
</style>

<script id="shader-fs" type="x-shader/x-fragment">
    precision highp float;

    uniform float u_time;
    uniform vec2  u_resolution;

    void main(void)
    {
        vec2 coord = gl_FragCoord.xy;
        vec2 p = coord / u_resolution;

        vec2 wave1 = vec2(coord.x, u_resolution.y/2.0 + 100.0 * cos(20.0 * p.x * cos(u_time * 0.2)) * sin(3.0 * u_time));
        vec2 wave2 = vec2(coord.x, u_resolution.y/2.0 + 150.0 * cos(20.0 * p.x + 2.0 * u_time) * pow(p.x * 10.0 * sin(u_time), 2.0) / 32.0 - (coord.x - u_resolution.x * 0.75) / 8.0 * cos(u_time * 0.5));
        vec2 wave3 = vec2(coord.x, u_resolution.y/4.0 + 40.0 * cos(10.0 * p.x + u_time));
        vec2 wave4 = vec2(coord.x, u_resolution.y/1.5 + 10.0 * cos(10.0 * p.x + u_time));

        vec3 color = vec3(0.0, 0.0, 0.0);

        float pix = 8.0;
        coord = floor(coord / pix) * pix;

        {
            float d = distance(wave1, coord);
            float c = 50.0 / (d * d);
            color += clamp(vec3(c * cos(u_time), c * sin(u_time), 0.0) * 0.7, 0.0, 1.0);
        }

        {
            float d = distance(wave2, coord);
            float c = clamp(50.0 / (d * d), 0.0, 1.0);
            color += vec3(c, 0.0, c * sin(u_time));
        }

        {
            float d = distance(wave3, coord);
            float c = clamp(100.0 / (d * d) * sin(u_time), 0.0, 1.0);
            color += vec3(c, c, c) * 0.5;
        }

        {
            float d = distance(wave3, coord);
            float c = clamp(u_resolution.y / (d) * sin(u_time * 0.1), 0.0, 1.0);
            color -= vec3(c, c, c) * 0.1;
        }

        float poop = 20.0;
        vec2 meow = floor(coord / poop);
        float sig = clamp((meow.x + meow.y) / poop / poop, 0.0, 1.0);
        vec3 sigv = vec3(sig, sig*sig, cos(sig));

        color += sin(sigv * 1.0 * u_time) / 4.0;

        gl_FragColor = vec4(color, 1.0);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec2 a_position;

    void main(void)
    {
        gl_Position = vec4(a_position, 1.0, 1.0);
    }
</script>

<script>
    'use strict';

    let gl;
    function initGL(canvas) {
        try {
            gl = canvas.getContext("experimental-webgl");
            gl.viewport(0, 0, canvas.width, canvas.height);
        } catch(e) {

        }
        if (!gl) {
            alert("Could not initialise WebGL, sorry :-(");
        }
    }

    function getShader(gl, id) {
        var shaderScript = document.getElementById(id);

        if (!shaderScript) {
            return null;
        }

        var shader;

        if (shaderScript.type === "x-shader/x-fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (shaderScript.type == "x-shader/x-vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, shaderScript.textContent);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }

    let shaderProgram;
    let u_time, u_resolution;

    function initShaders() {
        var fragmentShader = getShader(gl, "shader-fs");
        var vertexShader = getShader(gl, "shader-vs");

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }

        gl.useProgram(shaderProgram);

        u_time       = gl.getUniformLocation(shaderProgram, 'u_time');
        u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution');

        gl.uniform2f(u_resolution, gl.canvas.clientWidth, gl.canvas.clientHeight);
    }

    function initBuffers() {
        let buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        var 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
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        let a_position = gl.getAttribLocation(shaderProgram, 'a_position');
        gl.enableVertexAttribArray(a_position);
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
    }

    let dx = 0.0;

    function drawScene(time) {
        gl.uniform1f(u_time, time / 1000);
        gl.drawArrays(gl.TRIANGLES, 0, 6);
    }

    function webGLStart(canvas) {
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;

        initGL(canvas);

        initShaders();

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

        gl.clearDepth(1.0);

        initBuffers();
    }

    function canvasClicked() {
        toggleFullScreen();
    }

    function windowResized() {
        let canvas = document.getElementById('canvas');
        webGLStart(canvas);
    }

    function loop(time) {
        drawScene(time);

        requestAnimationFrame(loop);
    }

    function main() {
        let canvas = document.getElementById('canvas');
        canvas.addEventListener('click', canvasClicked);

        webGLStart(canvas);

        loop();
    }

    window.addEventListener('load', main);

    window.addEventListener('resize', windowResized);
</script>

<script>
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
</script>

</head>

<body>
  <canvas id="canvas" style="position:absolute;top:0;left:0"></canvas>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>hello</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

	<style>
	html, body {
	height: 100%;
	margin: 0;
	}
	</style>

	<script id="shader-fs" type="x-shader/x-fragment">
	precision highp float;

	uniform float u_time;
	uniform vec2 u_resolution;

	void main(void)
	{
	vec2 coord = gl_FragCoord.xy;
	vec2 p = coord / u_resolution;

	vec2 wave1 = vec2(coord.x, u_resolution.y/2.0 + 100.0 * cos(20.0 * p.x * cos(u_time * 0.2)) * sin(3.0 * u_time));
	vec2 wave2 = vec2(coord.x, u_resolution.y/2.0 + 150.0 * cos(20.0 * p.x + 2.0 * u_time) * pow(p.x * 10.0 * sin(u_time), 2.0) / 32.0 - (coord.x - u_resolution.x * 0.75) / 8.0 * cos(u_time * 0.5));
	vec2 wave3 = vec2(coord.x, u_resolution.y/4.0 + 40.0 * cos(10.0 * p.x + u_time));
	vec2 wave4 = vec2(coord.x, u_resolution.y/1.5 + 10.0 * cos(10.0 * p.x + u_time));

	vec3 color = vec3(0.0, 0.0, 0.0);

	float pix = 8.0;
	coord = floor(coord / pix) * pix;

	{
	float d = distance(wave1, coord);
	float c = 50.0 / (d * d);
	color += clamp(vec3(c * cos(u_time), c * sin(u_time), 0.0) * 0.7, 0.0, 1.0);
	}

	{
	float d = distance(wave2, coord);
	float c = clamp(50.0 / (d * d), 0.0, 1.0);
	color += vec3(c, 0.0, c * sin(u_time));
	}

	{
	float d = distance(wave3, coord);
	float c = clamp(100.0 / (d * d) * sin(u_time), 0.0, 1.0);
	color += vec3(c, c, c) * 0.5;
	}

	{
	float d = distance(wave3, coord);
	float c = clamp(u_resolution.y / (d) * sin(u_time * 0.1), 0.0, 1.0);
	color -= vec3(c, c, c) * 0.1;
	}

	float poop = 20.0;
	vec2 meow = floor(coord / poop);
	float sig = clamp((meow.x + meow.y) / poop / poop, 0.0, 1.0);
	vec3 sigv = vec3(sig, sig*sig, cos(sig));

	color += sin(sigv * 1.0 * u_time) / 4.0;

	gl_FragColor = vec4(color, 1.0);
	}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec2 a_position;

	void main(void)
	{
	gl_Position = vec4(a_position, 1.0, 1.0);
	}
	</script>

	<script>
	'use strict';

	let gl;
	function initGL(canvas) {
	try {
	gl = canvas.getContext("experimental-webgl");
	gl.viewport(0, 0, canvas.width, canvas.height);
	} catch(e) {

	}
	if (!gl) {
	alert("Could not initialise WebGL, sorry :-(");
	}
	}

	function getShader(gl, id) {
	var shaderScript = document.getElementById(id);

	if (!shaderScript) {
	return null;
	}

	var shader;

	if (shaderScript.type === "x-shader/x-fragment") {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (shaderScript.type == "x-shader/x-vertex") {
	shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
	return null;
	}

	gl.shaderSource(shader, shaderScript.textContent);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert(gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}

	let shaderProgram;
	let u_time, u_resolution;

	function initShaders() {
	var fragmentShader = getShader(gl, "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	alert("Could not initialise shaders");
	}

	gl.useProgram(shaderProgram);

	u_time = gl.getUniformLocation(shaderProgram, 'u_time');
	u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution');

	gl.uniform2f(u_resolution, gl.canvas.clientWidth, gl.canvas.clientHeight);
	}

	function initBuffers() {
	let buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	var 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
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

	let a_position = gl.getAttribLocation(shaderProgram, 'a_position');
	gl.enableVertexAttribArray(a_position);
	gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
	}

	let dx = 0.0;

	function drawScene(time) {
	gl.uniform1f(u_time, time / 1000);
	gl.drawArrays(gl.TRIANGLES, 0, 6);
	}

	function webGLStart(canvas) {
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;

	initGL(canvas);

	initShaders();

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

	gl.clearDepth(1.0);

	initBuffers();
	}

	function canvasClicked() {
	toggleFullScreen();
	}

	function windowResized() {
	let canvas = document.getElementById('canvas');
	webGLStart(canvas);
	}

	function loop(time) {
	drawScene(time);

	requestAnimationFrame(loop);
	}

	function main() {
	let canvas = document.getElementById('canvas');
	canvas.addEventListener('click', canvasClicked);

	webGLStart(canvas);

	loop();
	}

	window.addEventListener('load', main);

	window.addEventListener('resize', windowResized);
	</script>

	<script>
	function toggleFullScreen() {
	if (!document.fullscreenElement && // alternative standard method
	!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
	if (document.documentElement.requestFullscreen) {
	document.documentElement.requestFullscreen();
	} else if (document.documentElement.msRequestFullscreen) {
	document.documentElement.msRequestFullscreen();
	} else if (document.documentElement.mozRequestFullScreen) {
	document.documentElement.mozRequestFullScreen();
	} else if (document.documentElement.webkitRequestFullscreen) {
	document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
	}
	} else {
	if (document.exitFullscreen) {
	document.exitFullscreen();
	} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
	}
	}
	}
	</script>

	</head>

	<body>
	<canvas id="canvas" style="position:absolute;top:0;left:0"></canvas>
	</body>

	</html>