Skip to content

Instantly share code, notes, and snippets.

@jasoncoon
Created December 8, 2014 21:29
Show Gist options
  • Save jasoncoon/115e5d624af7207b3c81 to your computer and use it in GitHub Desktop.
Save jasoncoon/115e5d624af7207b3c81 to your computer and use it in GitHub Desktop.
pendulum wave
// 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment