HTML and CSS Reference
In-Depth Information
If you want it to bend either way, you need to figure out some kind of conditional logic to say: “If it's in this
position, bend this way; otherwise, bend that way.” But these examples should give you plenty to get
started.
Important Formulas in This Chapter
For the standard form of inverse kinematics, you use the law of cosines formula.
Law of Cosines
a
2
= b
2
+ c
2
- 2
×
b
×
c
×
cos A
b
2
= a
2
+ c
2
- 2
×
a
×
c
×
cos B
c
2
= a
2
+ b
2
- 2
×
a
×
b
×
cos C
Law of Cosines in JavaScript
var A = Math.acos((b * b + c * c - a * a) / (2 * b * c)),
B = Math.acos((a * a + c * c - b * b) / (2 * a * c)),
C = Math.acos((a * a + b * b - c * c) / (2 * a * b));
Summary
Inverse kinematics is a vast subject—far more than can ever be covered in a single chapter. Even so, this
chapter described some pretty interesting and useful things. You saw how to set up an inverse kinematics
system and two ways of looking at it: dragging and reaching. Hopefully you've seen that there's some fun
stuff you can build with it, and it doesn't have to be that complex. There's much more that can be done
with inverse kinematics, and you should be ready to go discover it and put it to use.
In the next chapter, you enter a whole new dimension, which enables you to add some depth to your
animations.
