HTML and CSS Reference
In-Depth Information
Figure 14-3.
Dragging 50 segments
Reaching with Multiple Segments
The following excercises build off the first example in this chapter,
01-one-segment.html
, and add to
that. That animation contained a segment rotating to a target, which was the mouse position.
Reaching for the Mouse
To reach with multiple segments, first determine the position of the segment for it to touch the target, which
is the same calculation you use to position the segment when you drag. In this case, you don't move the
segment; you just find the position. You use the position as the target of the next segment up the line and
have the segment rotate to that position. When you reach the base of the system, you then work back
through the line, positioning each piece on the end of its parent. Figure 14-4 illustrates how this works.
tx, ty
segment 0
segment 1
Figure 14-4.
segment0 is moved to the mouse cursor. In turn, segment1 follows segment0, positioning itself toward
point tx, ty.
