Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        canvas {
            width: 99%;
        }

        .canvas {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
        }

        form {
            width: 260px;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: 1;
        }

        fieldset {
            padding: 1mm;
        }

        label {
            display: block;
            margin: 1mm;
        }

        input {
            display: block;
            float: right;
            margin-left: 1mm;
        }
    </style>
</head>
<body>
<form>
    <label>Time speed<input id="speed" value="0.1" /></label>
    <fieldset>
        <legend>Spiral</legend>
        <label>Segments<input id="segments" value="300" /></label>
        <label>Speed<input id="spiral_speed" value="0.001" /></label>
        <label>Gravity<input id="gravity" value="0.01" /></label>
    </fieldset>
</form>
<canvas id="canvas"></canvas>
<script>
    var width;
    var height;
    var time = 0;
    var play = true;
    var g = canvas.getContext('2d');
    var mouseX = 0;
    var mouseY = 0;
    var move = false;
    var last = Date.now();

    canvas.onmousedown = function(e) {
        move = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
    };

    canvas.onmouseup = function() {
        move = false;
        vx = vy = 0;
    };

    canvas.onmousemove = function(e) {
        if (move) {
            mouseX = e.clientX;
            mouseY = e.clientY;
        }
    };

    function resize() {
        canvas.setAttribute('class', 'canvas');
        var style = getComputedStyle(canvas);
        width = parseFloat(style.width);
        height = parseFloat(style.height);
        canvas.width = width;
        canvas.height = height;
        var g = canvas.getContext('2d');
        //g.translate(width/2, height/2);
        //g.scale(0.2, 0.2);
        play = true;
        centerX = width/2;
        centerY = height/2;
        if (play)
            requestAnimationFrame(draw);
    }

    var centerX;
    var centerY;
    var vx = 0;
    var vy = 0;

    function spiral() {
        var segments_number = parseFloat(segments.value);
        var speed = parseFloat(spiral_speed.value);
        for(var i = 0; i < segments_number; i++) {
            var p = [i, i];
            p[1] *= time * speed;
            g.lineTo(centerX + p[0] * Math.sin(p[1]), centerY - p[0] * Math.cos(p[1]));
        }

        if (move) {
            var gravity_value = parseFloat(gravity.value);
            vx += (mouseX - centerX) * gravity_value;
            vy += (mouseY - centerY) * gravity_value;
            centerX += vx;
            centerY += vy;
        }
    }

    function draw() {
        var now = Date.now();
        time += (now - last) * speed.value;
        last = now;
        g.imageSmoothingEnabled= false;
        g.clearRect(0, 0, width, height);
        g.beginPath();
        spiral();
        g.stroke();
        if (play)
            requestAnimationFrame(draw);
    }

    onresize = resize;

    onload = function() {
        resize();
        draw();
            //setInterval(draw, 20);
    };

    onkeypress = function(e) {
        if (32 == e.keyCode || 32 == e.charCode) {
            play = !play;
            if (play)
                requestAnimationFrame(draw);
            return false;
        }
    }
</script>
</body>
</html>