amwmedia
12/9/2014 - 2:16 PM

index.html

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <!--
        Based on: http://www.reddit.com/r/gifs/comments/2on8si/connecting_to_server_so_mesmerizing/
        See also: http://codepen.io/anon/pen/OPMvOb
                  http://jsbin.com/xecosiyomo/1/edit?js,output
        -->
    <head>
        <title>Mesmerizing</title>
        <style>
            canvas { background-color: #000; }
        </style>
        <script>
            window.requestAnimFrame = (function(callback) {
                return window.requestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.oRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       function(callback) {
                           window.setTimeout(callback, 1000 / 60);
                       };
            })();

            var NUM_BALL = 60;
            var BALL_HEIGHT = 100;
            var timeStep = 0;
            var radius = 3;
            var color = '#0f0';
            var lastY = [];
            var c, ctx;

            function draw() {
                c = document.getElementById('screen');
                if (c.getContext) {
                    ctx = c.getContext('2d');
                    requestAnimFrame(animateBalls);
                }
            }

            function animateBalls() {
                var y, lY, m;
                ctx.clearRect(0, 0, c.width, c.height);
                for (var i = 0; i < NUM_BALL; i++) {
                    y = getY(i, timeStep);
                    lY = lastY[i] || 0;
                    m = (lY < y) ? 1 : -1;
                    lastY[i] = y;
                    ctx.beginPath();
                    ctx.arc(8+16*i, y, radius + m, 0, Math.PI*2, true);
                    ctx.fillStyle = color;
                    ctx.fill();
                }
                timeStep++;
                requestAnimFrame(animateBalls);
            }

            function getY(i, t) {
                return 150 + BALL_HEIGHT/2 * (1 + Math.sin((t * (i/500 + 0.02)) % 2*Math.PI));
            }

            window.addEventListener('load', draw);
        </script>
    </head>
    <body>
        <canvas id="screen" width="480" height="360"></canvas>
    </body>
</html>