strangerintheq/index.html

## index.html
<!doctype html>
<html>
<body>
<style>
    body {
        margin: 0; overflow: hidden
    }
    canvas {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>
<script>

    var gl = glx();

    var vertices1 = gl.buffer([
        -1,  3,
        -1, -1,
         3, -1,
    ]);

    var vertCode =
        `attribute vec2 coordinates;
         void main(void) {
           gl_Position = vec4(coordinates.xy, 0.0, 1.0);
         }`;

    var fragCode =
        `precision highp float;
         uniform vec4 mr;
         void main(void) {
           vec2 p = gl_FragCoord.xy;
           vec2 q = 5.*(p + p - mr.ba) / mr.b;

           for(int i = 0; i < 7; i++){
                vec2 c = mr.xy / mr.b;
                q = abs(q)/dot(q,q) -  mr.xy/mr.zw;
           }
           gl_FragColor = vec4(q, q.x/q.y, 1.0);
         }`;

    var shaderProgram = gl.program(vertCode, fragCode);
    var coords = shaderProgram.attribute("coordinates", 2);
    var mr = shaderProgram.uniform('4f', 'mr');
    shaderProgram.use();

    updateMouse();
    mainLoop();

    window.addEventListener('mousemove', listener);
    window.addEventListener('touchmove', listener);

    function listener(e) {
        updateMouse(e.touches ? e.touches[0] : e);
        gl.draw(3);
    }

    function updateMouse(e) {
        var h = gl.gl.drawingBufferHeight;
        var w = gl.gl.drawingBufferWidth;
        mr.set(e ? e.clientX : 0, e ? h - e.clientY: 0, w, h);
    }

    function mainLoop() {
        if (gl.ensureSizes()) {
            coords.bind(vertices1);
            gl.draw(3);
        }
        requestAnimationFrame(mainLoop)
    }

    function glx() {
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

        return {
            gl: gl,
            draw: draw,
            buffer: buffer,
            program: program,
            ensureSizes: ensureSizes
        };

        function draw(count) {
            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
            gl.clearColor(0, 0, 0, 1);
            gl.drawArrays(gl.TRIANGLES, 0, count);
        }

        function program(vs, fs) {
            var pid = gl.createProgram(); // program id
            shader(vs, gl.VERTEX_SHADER);
            shader(fs, gl.FRAGMENT_SHADER);
            gl.linkProgram(pid);

            return {uniform: uniform, attribute: attribute, use: use};

            function use() {
                gl.useProgram(pid);
            }

            function attribute(name, count) {
                var al = gl.getAttribLocation(pid, name);
                return {bind: bind};

                function bind(buffer) {
                    buffer.bind();
                    gl.vertexAttribPointer(al, count, gl.FLOAT, false, 0, 0);
                    gl.enableVertexAttribArray(al);
                }
            }

            function uniform(type, name) {
                var ul = gl.getUniformLocation(pid, name);
                return {set: set};

                function set(v1, v2, v3, v4) {
                    gl['uniform' + type](ul, v1, v2, v3, v4);
                }
            }

            function shader(src, type) {
                var sid = gl.createShader(type);
                gl.shaderSource(sid, src);
                gl.compileShader(sid);
                gl.attachShader(pid, sid);
            }
        }

        function buffer(data) {
            var array = new Float32Array(data);
            var buffer = gl.createBuffer();
            var type = gl.ARRAY_BUFFER;
            gl.bindBuffer(type, buffer);
            gl.bufferData(type, array, gl.STATIC_DRAW);
            gl.bindBuffer(type, null);
            return {bind: bind};

            function bind() {
                gl.bindBuffer(type, buffer);
            }
        }

        function ensureSizes() {
            if (canvas.clientWidth !== canvas.width ||
                canvas.clientHeight !== canvas.height) {

                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;

                return true;
            }
        }
    }
</script>
</body>
</html>
	<!doctype html>
	<html>
	<body>
	<style>
	body {
	margin: 0; overflow: hidden
	}
	canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	<script>

	var gl = glx();

	var vertices1 = gl.buffer([
	-1, 3,
	-1, -1,
	3, -1,
	]);

	var vertCode =
	`attribute vec2 coordinates;
	void main(void) {
	gl_Position = vec4(coordinates.xy, 0.0, 1.0);
	}`;

	var fragCode =
	`precision highp float;
	uniform vec4 mr;
	void main(void) {
	vec2 p = gl_FragCoord.xy;
	vec2 q = 5.*(p + p - mr.ba) / mr.b;

	for(int i = 0; i < 7; i++){
	vec2 c = mr.xy / mr.b;
	q = abs(q)/dot(q,q) - mr.xy/mr.zw;
	}
	gl_FragColor = vec4(q, q.x/q.y, 1.0);
	}`;

	var shaderProgram = gl.program(vertCode, fragCode);
	var coords = shaderProgram.attribute("coordinates", 2);
	var mr = shaderProgram.uniform('4f', 'mr');
	shaderProgram.use();

	updateMouse();
	mainLoop();

	window.addEventListener('mousemove', listener);
	window.addEventListener('touchmove', listener);

	function listener(e) {
	updateMouse(e.touches ? e.touches[0] : e);
	gl.draw(3);
	}

	function updateMouse(e) {
	var h = gl.gl.drawingBufferHeight;
	var w = gl.gl.drawingBufferWidth;
	mr.set(e ? e.clientX : 0, e ? h - e.clientY: 0, w, h);
	}

	function mainLoop() {
	if (gl.ensureSizes()) {
	coords.bind(vertices1);
	gl.draw(3);
	}
	requestAnimationFrame(mainLoop)
	}

	function glx() {
	var canvas = document.createElement('canvas');
	document.body.appendChild(canvas);
	var gl = canvas.getContext('webgl') \|\| canvas.getContext('experimental-webgl');

	return {
	gl: gl,
	draw: draw,
	buffer: buffer,
	program: program,
	ensureSizes: ensureSizes
	};

	function draw(count) {
	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
	gl.clearColor(0, 0, 0, 1);
	gl.drawArrays(gl.TRIANGLES, 0, count);
	}

	function program(vs, fs) {
	var pid = gl.createProgram(); // program id
	shader(vs, gl.VERTEX_SHADER);
	shader(fs, gl.FRAGMENT_SHADER);
	gl.linkProgram(pid);

	return {uniform: uniform, attribute: attribute, use: use};

	function use() {
	gl.useProgram(pid);
	}

	function attribute(name, count) {
	var al = gl.getAttribLocation(pid, name);
	return {bind: bind};

	function bind(buffer) {
	buffer.bind();
	gl.vertexAttribPointer(al, count, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(al);
	}
	}

	function uniform(type, name) {
	var ul = gl.getUniformLocation(pid, name);
	return {set: set};

	function set(v1, v2, v3, v4) {
	gl['uniform' + type](ul, v1, v2, v3, v4);
	}
	}

	function shader(src, type) {
	var sid = gl.createShader(type);
	gl.shaderSource(sid, src);
	gl.compileShader(sid);
	gl.attachShader(pid, sid);
	}
	}

	function buffer(data) {
	var array = new Float32Array(data);
	var buffer = gl.createBuffer();
	var type = gl.ARRAY_BUFFER;
	gl.bindBuffer(type, buffer);
	gl.bufferData(type, array, gl.STATIC_DRAW);
	gl.bindBuffer(type, null);
	return {bind: bind};

	function bind() {
	gl.bindBuffer(type, buffer);
	}
	}

	function ensureSizes() {
	if (canvas.clientWidth !== canvas.width \|\|
	canvas.clientHeight !== canvas.height) {

	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;

	return true;
	}
	}
	}
	</script>
	</body>
	</html>