Untitled

<!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>