Polyline Tweening in Javascript Canvas

Excerpts from Computer Graphics using OpenGL by F S Hill Jr and Stephen M Kelly

Interesting tweens can be created that show one figure being tweened into another.

Its simplest if the two figures are polylines based on the same number of points.

Suppose if the first figure is based on the polyline Ai, and the second polyline B is based on points Bi, for i=0,.......,n-1

we can form a polyline P(t), called the tween at time t by forming the points

Pi(t) = (1 - t) Ai + t Bi

if we look at the succession of values for t between 0 and 1, say t=0.0,0.1,0.2.... ,0.9,1.0

we see that this polyline begins with the shape of A and ends with the shape of B, but in-between it is a blend of shapes between A and B.

Here is a link to google books for the said pages in the this book.