HTML and CSS Reference
In-Depth Information
calfRangeSlider.y = 10;
calfRangeSlider.captureMouse(canvas);
calfOffsetSlider.x = 90;
calfOffsetSlider.y = 10;
calfOffsetSlider.captureMouse(canvas);
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;
segA.rotation = angle0;
segB.rotation = segA.rotation + angle1;
segB.x = segA.getPin().x;
segB.y = segA.getPin().y;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
cycle += speedSlider.value;
walk(segment0, segment1, cycle);
walk(segment2, segment3, cycle + Math.PI);
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);
}());
};
</script>
</body>
</html>
This code is exactly as it was before, but now it uses the slider values rather than hard-coded values. You
can have a lot of fun with this exercise, exploring different variations of the walk cycle.
Making It Really Walk
You have a couple of legs moving around in a manner that looks realistic, but they are just floating in
space. Earlier in the topic, you got something moving with velocity and acceleration, and then had it
interact with the environment. It's time to do the same thing here.
 
Search WWH ::




Custom Search