kevingessner/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Sea Change</title>
        <style>
            body {
                background: #335;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="700" height="500"></canvas>
        <script type="text/javascript">
            (function() {
                'use strict';
                var ctx = document.getElementById('canvas').getContext('2d');
                var t = 0;
                var CANVAS_HEIGHT = ctx.canvas.height;
                var MARGIN = 50;
                var draw = function() {
                    ctx.fillStyle = '#335';
                    ctx.fillRect(0, 0, ctx.canvas.width, CANVAS_HEIGHT);

                    t++;
                    ctx.fillStyle = '#eee';
                    var WIDTH = 150;
                    var CURVE = 120;
                    var SIZE = 3;
                    var MAXY = CANVAS_HEIGHT - MARGIN * 2;
                    for (var i = -1; i < 2; i += 2) {
                        var OFFSET = 100 * i + 350;
                        var SPEED = 100 * i;
                        var START = Math.PI / 2 * (i + 1);
                        for (var y = 0; y < MAXY; y++) {
                            var p = t / SPEED + y / CURVE + START;
                            var x = Math.sin(p) * WIDTH * (y / MAXY) + OFFSET;
                            ctx.beginPath();
                            ctx.arc(x, CANVAS_HEIGHT - MARGIN - y, SIZE, 0, 7);
                            ctx.fill();
                        }
                        for (var y = 0; y < MARGIN; y++) {
                            ctx.beginPath();
                            ctx.arc(OFFSET, CANVAS_HEIGHT - y, SIZE * 2, 0, 7);
                            ctx.fill();
                        }
                    }

                    requestAnimationFrame(draw);
                };
                draw();
            })();
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sea Change</title>
	<style>
	body {
	background: #335;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" width="700" height="500"></canvas>
	<script type="text/javascript">
	(function() {
	'use strict';
	var ctx = document.getElementById('canvas').getContext('2d');
	var t = 0;
	var CANVAS_HEIGHT = ctx.canvas.height;
	var MARGIN = 50;
	var draw = function() {
	ctx.fillStyle = '#335';
	ctx.fillRect(0, 0, ctx.canvas.width, CANVAS_HEIGHT);

	t++;
	ctx.fillStyle = '#eee';
	var WIDTH = 150;
	var CURVE = 120;
	var SIZE = 3;
	var MAXY = CANVAS_HEIGHT - MARGIN * 2;
	for (var i = -1; i < 2; i += 2) {
	var OFFSET = 100 * i + 350;
	var SPEED = 100 * i;
	var START = Math.PI / 2 * (i + 1);
	for (var y = 0; y < MAXY; y++) {
	var p = t / SPEED + y / CURVE + START;
	var x = Math.sin(p) * WIDTH * (y / MAXY) + OFFSET;
	ctx.beginPath();
	ctx.arc(x, CANVAS_HEIGHT - MARGIN - y, SIZE, 0, 7);
	ctx.fill();
	}
	for (var y = 0; y < MARGIN; y++) {
	ctx.beginPath();
	ctx.arc(OFFSET, CANVAS_HEIGHT - y, SIZE * 2, 0, 7);
	ctx.fill();
	}
	}

	requestAnimationFrame(draw);
	};
	draw();
	})();
	</script>
	</body>
	</html>