A secondary motion (offset) can be made dependent
on the primary motion in various ways. In this demo, the sine
offset is made perpendicular to the linear motion and
scaled according to the length of the linear path. This
gives the object's path a consistent shape.
To make the offset perpendicular, it is given x and y components
that are dependent on the angle of the linear motion.
At this point it is helpful to start using
the term "vector" (see Vectors).
The math involves a few steps:
1. Find the unit vector that
is perpendicular to the linear path.
2. Multiply the unit vector by offset(p)
3. Use x and y of the resulting vector as the x and y offsets.
There are several ways to
go about finding the unit vector.
In this demo, it is found using mathematics
described in Sine & Cosine Definitions.
First, the angle of the linear path is found using
atan(). It is then rotated 90°. Then the
sin() and cos() of this angle give the x and
y components of the perpendicular unit vector.
( [sin t, cos t] is always a unit vector)
Since the unit vector is
the same for the whole path, it is calculated once and
then used for all the offsets.
The size of the offset is
made dependent on the length of the linear motion by
scaling it according to the length. Linear length is calculated using
the pythagorean theorem, hyp = sqrt(x2 + y2).
•How would you make the duration
of the animation depend on the linear length?
•How would you keep the offset parallel to the
linear motion?
Extra for philomaths:
Linear algebra is very useful in working with vectors. Rotating
a vector 90° can
be done with the matrix multiplication .
This is the method used in the vector version of the demo.