Trigonometry for Animation - HTML5 Animation with JavaScript - page 80

The first for loop in the window.onload function sets up an array of nine points. Each point is an object
with an x and y property, and they are randomly placed on the canvas.
We begin a new path, and the pen is moved to the first point. The next for loop starts at one and
increments by two each time, drawing a curve through point one to point two, then through three to four,
then through five to six, and then through seven to eight. The loop stops there, which is perfect because
point eight is the last one. There must be a minimum of three points, and the number of points must be
odd.
It seems like a well-reasoned program, until you test it. As shown in Figure 4-1, it doesn't look curvy at all.
In fact, it looks a bit spiky. The problem is that there is no coordination between one curve and the next,
except that they share a point.
Figure 4-1. There are multiple curves going the wrong way. You can see where one curve ends and the next begins.
You must plug in a few more points to make it look right. Here's the strategy: Between each set of two
points, you need a new point that sits exactly in the middle. You then use these as the starting and ending
points for each curve, and use the original points as the control points.
Figure 4-2 illustrates the solution. In the figure, the white dots are the original points, and the black dots
are the in-between points. You can see there are three context.quadraticCurveTo methods used here.