smt · May 29, 2017 11:49
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 = 200;
            var timeStep = 0;
            var radius = 4;
            var color = '#0f0';
            var c, ctx;

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

            function animateBalls() {
                ctx.clearRect(0, 0, c.width, c.height);
                for (var i = 0; i < NUM_BALL; i++) {
                    ctx.beginPath();
                    ctx.arc(8+16*i, getY(i, timeStep), radius, 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((timeStep * (i/500 + 0.02)) % 2*Math.PI));
            }

            window.addEventListener('load', draw);
        </script>
    </head>
    <body>
        <canvas id="screen" width="960" height="500"></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 = 200;
	var timeStep = 0;
	var radius = 4;
	var color = '#0f0';
	var c, ctx;

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

	function animateBalls() {
	ctx.clearRect(0, 0, c.width, c.height);
	for (var i = 0; i < NUM_BALL; i++) {
	ctx.beginPath();
	ctx.arc(8+16i, getY(i, timeStep), radius, 0, Math.PI2, true);
	ctx.fillStyle = color;
	ctx.fill();
	}
	timeStep++;
	requestAnimFrame(animateBalls);
	}

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

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