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

var angle = (Math.sin(cycle) * 90) * Math.PI / 180;
segment0.rotation = angle;
segment1.rotation = segment0.rotation + angle;
segment1.x = segment0.getPin().x;
segment1.y = segment0.getPin().y;
segment0.draw(context);
segment1.draw(context);
}());
};
</script>
</body>
</html>
Building a Natural Walk Cycle
Now you have something moving around looking vaguely arm-like, but let's turn it into a leg. Start with the
following changes:
 Make the system point down by adding 90 to segment0 's rotation and reducing its range of
motion from 90 degrees in both directions to 45 degrees.
 Use a separate angle for each segment, so you have angle0 and angle1 .
 Reduce angle1 's range to 45, and then add 45 to it. This makes its final range 0 to 90, so that it
bends in only one direction, like a real knee. If that isn't totally clear, try it with and without the
added 45 to see what it's doing, and try some other numbers until you get a feel for how it all fits
together.
You end up with the following code from 06-walking-2.html . Only the drawFrame method is shown,
because nothing else has changed:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
cycle += 0.02;
var angle0 = (Math.sin(cycle) * 45 + 90) * Math.PI / 180,
angle1 = (Math.sin(cycle) * 45 + 45) * Math.PI / 180;
segment0.rotation = angle0;
segment1.rotation = segment0.rotation + angle1;
segment1.x = segment0.getPin().x;
segment1.y = segment0.getPin().y;
segment0.draw(context);
segment1.draw(context);
}());
Well, you're getting there, as shown in Figure 13-4. This is starting to look like a leg, or at least starting to
move like one.