HTML and CSS Reference
In-Depth Information
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
drag(segments[0], mouse.x, mouse.y);
segments.forEach(move);
segments.forEach(draw);
}());
};
</script>
</body>
</html>
In the
drawFrame
animation loop, the first segment is positioned at the mouse cursor. Then, each segment
is passed to the
move
function as an argument, and positioned behind the segment before it (using the
drag
function). The first segment is ignored in the
move
function because it has already been positioned.
Figure 14-2 shows the result.
Figure 14-2.
Multiple-segment dragging
Well, there you have the basics of inverse kinematics. You can add as many segments as you want by
changing the
numSegments
variable. In Figure 14-3, you can see 50 segments, demonstrating just how
robust this system is.
