Next, we build the fundament for our animation. Essentially, we want an array of points on each plane's route. We will call them way points and here's how they will look for the flight path Frankfurt to Atlanta as an array and as points on the path:

The way points are the core ingredient, the fuel for our animation. When we animate the first frame, we will:

1. Clear the plane's own canvas contextPlane.
2. Pull out the very first way point for each plane.
3. Draw that plane in this position.

When we draw the second frame we do the same, but in step 2 pull out the second way point. For the third frame, we shall pull out the third way point, and so on.

We don't want to hold up the browser with complex calculations in between each frame, so we shall calculate all positions for all planes before we animate. Note, this is not always possible, positions might be dependent on user input or arbitrary charges in your force-directed graph or the like. However, whatever you can pre-calculate, you should.