Forward Kinematics: Making Things Walk - HTML5 Animation with JavaScript - page 309

function checkFloor (seg) {
var yMax = seg.getPin().y + (seg.height / 2);
if (yMax > canvas.height) {
var dy = yMax - canvas.height;
segment0.y -= dy;
segment1.y -= dy;
segment2.y -= dy;
segment3.y -= dy;
vx -= seg.vx;
vy -= seg.vy;
}
}
function checkWalls () {
var w = canvas.width + 200;
if (segment0.x > canvas.width + 100) {
segment0.x -= w;
segment1.x -= w;
segment2.x -= w;
segment3.x -= w;
} else if (segment0.x < -100) {
segment0.x += w;
segment1.x += w;
segment2.x += w;
segment3.x += w;
}
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
cycle += speedSlider.value;
setVelocity();
walk(segment0, segment1, cycle);
walk(segment2, segment3, cycle + Math.PI);
checkFloor(segment1);
checkFloor(segment3);
checkWalls();
segment0.draw(context);
segment1.draw(context);
segment2.draw(context);
segment3.draw(context);
speedSlider.draw(context);
thighRangeSlider.draw(context);
thighBaseSlider.draw(context);
calfRangeSlider.draw(context);
calfOffsetSlider.draw(context);
gravitySlider.draw(context);
}());
};