HTML and CSS Reference
In-Depth Information
Take a look at the new code in the
drawFrame
function; you see that it now contains code to position
segment1
based on the return value of
segment0.getPin()
. The
drawFrame
function is first called after
the objects are initialized, to make sure they are positioned properly at the start.
You set up
slider1
to call the
drawFrame
function in the same way as
slider0
, by assigning the function
to its
onchange
property. And, obviously, you have
segment1
's rotation now based on
slider1
.
Figure 13-3.
Forward kinematics with two segments
If you test this file in your browser, you see that as you rotate
segment0
around,
segment1
remains
attached to the end of it, as shown in Figure 13-3. But there is no actual attachment between the two
segments—it's all done with math. You can also rotate
segment1
independently with its slider. For some
fun, change the height and width of the segments and see that it all still works perfectly. One thing that
looks a bit strange is that although
segment1
moves
with
segment0
, it doesn't
rotate
with it. It's like there's
some gyro-stabilizer inside of it, holding its orientation steady. Because this is not how our arms move
naturally, it doesn't look right. What really should happen is that
segment1
's rotation should be
segment0
's
rotation plus the value of
slider1
. The document
04-two-segments-2.html
handles this with the
following code:
function drawFrame () {
context.clearRect(0, 0, canvas.width, canvas.height);
segment0.rotation = slider0.value * Math.PI / 180;
segment1.rotation = segment0.rotation + (slider1.value * Math.PI / 180);
segment1.x = segment0.getPin().x;
segment1.y = segment0.getPin().y;
segment0.draw(context);
segment1.draw(context);
slider0.draw(context);
slider1.draw(context);
}
Now, that looks more like a real arm. Of course, if you're thinking about a human arm, you might not like
the way the elbow can bend in both directions. To look more normal, change the range of
slider1
so
minimum
is something like -160 and
maximum
is 0, as in the following code.
var slider1 = new Slider(-160, 0, 0);
This might be a good time to reflect on the term
forward kinematics
again. The base of this system is the
pivot point of
segment0
. The free end is the other end of
segment1
, where you might imagine a hand. The
