Garciat/burn-webgl.html

## burn-webgl.html
<!DOCTYPE html>
<html>

<head>
<title>WebGL LCD Burn Fixer</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)
    {
        float scene = mod(u_time, 8.0);

        if (scene < 3.0) {
            float z = mod(scene * 2.0, 3.0);

            if (z < 1.0) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            } else if (z < 2.0) {
                gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
            } else if (z < 3.0) {
                gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
            }

        } else {
            float w = float(int(scene - 3.0));

            float r = 1.50 / (1.0 + exp(-1.0 * (w - 2.0))) - 0.7;

            float stripe = u_resolution.x * abs(r);

            float px = gl_FragCoord.x + u_time * max(stripe * 3.0, u_resolution.x);

            float z = mod(px / stripe, 3.0);

            if (z < 1.0) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            } else if (z < 2.0) {
                gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
            } else if (z < 3.0) {
                gl_FragColor = vec4(0.0, 0.0, 1.0, 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>

## burn.html
<style>
    body {
        margin: 0;
    }
</style>
<script>
'use strict';

function main() {
    const SCRW = document.body.clientWidth;
    const SCRH = document.body.clientHeight;

    const canvas = document.createElement('canvas');
    canvas.width  = SCRW;
    canvas.height = SCRH;
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    function fillScreen(color) {
        ctx.save();
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, SCRW, SCRH);
        ctx.restore();
    }

    function sleep(t) {
        return new Promise(resolve => {
            setInterval(resolve, t);
        })
    }

    function frame() {
        return new Promise(resolve => {
            requestAnimationFrame(resolve);
        });
    }

    const colors = ['#F00', '#0F0', '#00F'];

    async(function* loop() {
        for (let c of ['#F00', '#0F0', '#00F', '#0F0', '#F00']) {
            fillScreen(c);
            yield sleep(300);
        }

        for (let wp of [0.8, 0.2, 0.1, 0.2, 0.8]) {
            let w = SCRW * wp;

            for (let x = 0; x > -SCRW; x -= 25) {
                yield frame();
                for (let i = 0; i < 2 * SCRW / w; ++i) {
                    ctx.fillStyle = colors[i % 3];
                    ctx.fillRect(x + w * i, 0, w, SCRH);
                }
            }
        }

        yield* loop();
    })();
}

window.addEventListener('load', main);

function runAsync(gen) {
  return new Promise((resolve, reject) => {
    function accept(result) {
      if (result.done) {
        return resolve(result.value);
      }

      var value = result.value;

      if (isPromise(value)) {
        value.then(function(result) {
          accept(gen.next(result));
        }, function(error) {
          try {
            accept(gen.throw(error));
          } catch (ex) {
            reject(ex);
          }
        });
      }
    }

    accept(gen.next());
  });
}

function isPromise(p) {
  return !!p.then;
}

function async(f) {
  return function() {
    return runAsync(f.apply(this, arguments));
  };
}
</script>
	<!DOCTYPE html>
	<html>

	<head>
	<title>WebGL LCD Burn Fixer</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)
	{
	float scene = mod(u_time, 8.0);

	if (scene < 3.0) {
	float z = mod(scene * 2.0, 3.0);

	if (z < 1.0) {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	} else if (z < 2.0) {
	gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
	} else if (z < 3.0) {
	gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
	}

	} else {
	float w = float(int(scene - 3.0));

	float r = 1.50 / (1.0 + exp(-1.0 * (w - 2.0))) - 0.7;

	float stripe = u_resolution.x * abs(r);

	float px = gl_FragCoord.x + u_time * max(stripe * 3.0, u_resolution.x);

	float z = mod(px / stripe, 3.0);

	if (z < 1.0) {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	} else if (z < 2.0) {
	gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
	} else if (z < 3.0) {
	gl_FragColor = vec4(0.0, 0.0, 1.0, 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>
	<style>
	body {
	margin: 0;
	}
	</style>
	<script>
	'use strict';

	function main() {
	const SCRW = document.body.clientWidth;
	const SCRH = document.body.clientHeight;

	const canvas = document.createElement('canvas');
	canvas.width = SCRW;
	canvas.height = SCRH;
	document.body.appendChild(canvas);

	const ctx = canvas.getContext('2d');

	function fillScreen(color) {
	ctx.save();
	ctx.fillStyle = color;
	ctx.fillRect(0, 0, SCRW, SCRH);
	ctx.restore();
	}

	function sleep(t) {
	return new Promise(resolve => {
	setInterval(resolve, t);
	})
	}

	function frame() {
	return new Promise(resolve => {
	requestAnimationFrame(resolve);
	});
	}

	const colors = ['#F00', '#0F0', '#00F'];

	async(function* loop() {
	for (let c of ['#F00', '#0F0', '#00F', '#0F0', '#F00']) {
	fillScreen(c);
	yield sleep(300);
	}

	for (let wp of [0.8, 0.2, 0.1, 0.2, 0.8]) {
	let w = SCRW * wp;

	for (let x = 0; x > -SCRW; x -= 25) {
	yield frame();
	for (let i = 0; i < 2 * SCRW / w; ++i) {
	ctx.fillStyle = colors[i % 3];
	ctx.fillRect(x + w * i, 0, w, SCRH);
	}
	}
	}

	yield* loop();
	})();
	}

	window.addEventListener('load', main);

	function runAsync(gen) {
	return new Promise((resolve, reject) => {
	function accept(result) {
	if (result.done) {
	return resolve(result.value);
	}

	var value = result.value;

	if (isPromise(value)) {
	value.then(function(result) {
	accept(gen.next(result));
	}, function(error) {
	try {
	accept(gen.throw(error));
	} catch (ex) {
	reject(ex);
	}
	});
	}
	}

	accept(gen.next());
	});
	}

	function isPromise(p) {
	return !!p.then;
	}

	function async(f) {
	return function() {
	return runAsync(f.apply(this, arguments));
	};
	}
	</script>