HTML and CSS Reference
In-Depth Information
positions put your fingers in contact with the object, and other times, you won't be able to reach it. If the
object moves from side to side, all your limbs constantly reposition themselves to keep your fingers
reaching as close as they can to the object. Inverse kinematics shows you how to position all the pieces to
give the best reach.
The other type of inverse kinematics is when something is dragged. In this case, the free end is moved by
some external force. Wherever it is, the rest of the parts of the system follow along behind it, positioning
themselves in whatever way is physically possible. For this, imagine another person lying on the floor, that
you grab by the hand and drag around. The force you apply to their hand causes the wrist, elbow,
shoulder, and rest of their body to pivot and move in whatever way they can as they are dragged along. In
this case, inverse kinematics shows you how the pieces fall into the correct positions as they are dragged.
To give you an idea of the difference between these two methods—drag and reach—let's run through an
example of each one with a single segment. You need the Segment class we used in the Chapter 13, so
make sure you include that script in your document.
Reaching with a Single Segment
For reaching, all the segment is able to do is turn toward the target. The target, in these examples, is the
mouse cursor. To turn the segment toward the target, you need the distance between the two on the x and
y axes. You then can use Math.atan2 to get the angle between them in radians, which we use to rotate
the segment. Here's the code (which you also find in 01-one-segment.html) :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>One Segment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="segment.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
segment0 = new Segment(100, 20);
segment0.x = canvas.width / 2;
segment0.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = mouse.x - segment0.x,
dy = mouse.y - segment0.y;
 
Search WWH ::




Custom Search