amwmedia · August 29, 2015 14:11
diff --git a/index.html b/index.html
 <!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>
	<!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+16i, y, radius + m, 0, Math.PI2, 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>