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

segment2.x = 200;
segment2.y = 200;
segment3.x = segment2.getPin().x;
segment3.y = segment2.getPin().y;
speedSlider.x = 10;
speedSlider.y = 10;
speedSlider.captureMouse(canvas);
thighRangeSlider.x = 30;
thighRangeSlider.y = 10;
thighRangeSlider.captureMouse(canvas);
thighBaseSlider.x = 50;
thighBaseSlider.y = 10;
thighBaseSlider.captureMouse(canvas);
calfRangeSlider.x = 70;
calfRangeSlider.y = 10;
calfRangeSlider.captureMouse(canvas);
calfOffsetSlider.x = 90;
calfOffsetSlider.y = 10;
calfOffsetSlider.captureMouse(canvas);
gravitySlider.x = 110;
gravitySlider.y = 10;
gravitySlider.captureMouse(canvas);
function setVelocity () {
vy += gravitySlider.value;
segment0.x += vx;
segment0.y += vy;
segment2.x += vx;
segment2.y += vy;
}
function walk (segA, segB, cyc) {
var angle0 = (Math.sin(cyc) * thighRangeSlider.value + thighBaseSlider.value) * Math.PI
/ 180,
angle1 = (Math.sin(cyc + calfOffsetSlider.value) * calfRangeSlider.value +
calfRangeSlider.value) * Math.PI / 180,
foot = segB.getPin();
segA.rotation = angle0;
segB.rotation = segA.rotation + angle1;
segB.x = segA.getPin().x;
segB.y = segA.getPin().y;
segB.vx = segB.getPin().x - foot.x;
segB.vy = segB.getPin().y - foot.y;
}