pendulum wave

gistfile1.js

// Based off code from here - http://www.reddit.com/r/gifs/comments/2on8si/connecting_to_server_so_mesmerizing/cmow0sz

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var numBalls = 32; // numb balls
var timeStep = 0;
var ballYTravel = 32;

var animationPosX = 0;

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawBall(x, y, radius) {
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2 * Math.PI);
	ctx.stroke();
}

function animateBalls() {
	clearCanvas();
  
	for (var i = 0; i < numBalls; i++) {
		drawBall(animationPosX + i, getY(i, timeStep), .5);
	}
  
	timeStep++;
	requestAnimationFrame(animateBalls);
}

function getY(i, timeStep) {
	return 16 + ballYTravel / 2 * (Math.sin(timeStep * (i / 1600 + 0.08)));
}

animateBalls();