Skip to content

Instantly share code, notes, and snippets.

@pixlpa
Last active August 29, 2015 13:57
Show Gist options
  • Save pixlpa/9397596 to your computer and use it in GitHub Desktop.
Save pixlpa/9397596 to your computer and use it in GitHub Desktop.
Uses hierarchical canvas transforms to make an articulated form
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var canvas = document.getElementById('bb');
var cc = canvas.getContext('2d');
var swing = 0;
var swinger = -0.008;
var armswing = 0;
var armswinger = -0.007;
var px = 350;
requestAnimationFrame(ani);
function sway(){
swing+=swinger;
if (swing>0.1) swinger *=-1;
else if (swing<-0.1) swinger *= -1;
return swing;
}
function armsway(){
armswing+=armswinger;
if (armswing>0.15) armswinger *=-1;
else if (armswing<-0.15) armswinger *= -1;
return armswing;
}
cc.fillStyle= "grey";
cc.lineWidth= 1;
function ani(){
cc.clearRect(0,0,400,800);
cc.translate(px,150);
cc.rotate((armsway()+0.5)*Math.PI);
drawjoint(0,1.5,50);
drawjoint(0,1.,50);
drawjoint(sway(),0.8,50);
drawjoint(swing*1.1,0.6,50);
drawjoint(swing*1.5,0.4,50);
drawjoint(swing*2,0.2,50);
drawjoint(swing*2.5,0.2,50);
drawjoint(swing*3,0.05,50);
cc.setTransform(1,0,0,1,0,0);
requestAnimationFrame(ani);
}
function drawjoint(rot,x,y){
cc.beginPath();
cc.moveTo(-50,0);
cc.lineTo(50,0);
cc.translate(0,y);
cc.rotate(rot*Math.PI);
cc.scale(x,1);
cc.lineTo(50,0);
cc.lineTo(-50,0);
cc.closePath();
cc.fill();
cc.stroke();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment