Let's cover an example showcasing various interpolation techniques:

1. Open ch05_05_interpolation.html using your browser. You should see something similar to the following:

2. Inspect the code in an editor. Nearly all of the functions are the same as before, except for the new function called interpolate. This function interpolates the position in a linear fashion:

function interpolate() {
  const [X0, Y0, Z0] = initialPosition;
  const [X1, Y1, Z1] = finalPosition;

  const dX = (X1 - X0) / incrementSteps;
  const dY = (Y1 - Y0) / incrementSteps;
  const dZ = (Z1 - Z0) / incrementSteps;

  for (let i = 0; i < incrementSteps; i++) {
    position.push([X0 + (dX * i), Y0 + (dY * i), Z0 + (dZ * i)]);
  }
}

3. Open up ch05_06_interpolation-final.html in your browser. You should see something similar to the following:

4. Select Linear interpolation if it is not already selected.
5. Move the start and end points using the slider provided.
6. Change the number of interpolation steps. What happens to the animation when you decrease the number of steps?
7. The code for the linear interpolation has been implemented in the doLinearInterpolation function.
8. Select Polynomial interpolation. In this example, we have implemented Lagrange's interpolation method. You can see the source code in the doLagrangeInterpolation function.
9. Three new control points (flags) appear on screen. Using the sliders provided on the web page, you can change the location of these control points. You can also change the number of interpolation steps:

10. You may have also noticed that whenever the ball approaches one of the flags (with the exception of the start and end points), the flag changes color. To do that, we have written the ancillary close function. We use this function inside the draw routine to determine the color of the flags. If the current position of the ball, determined by position[sceneTime], is close to one of the flag positions, the respective flag changes color. When the ball is far from the flag, the flag changes back to its original color.
11. Modify the source code so that each flag remains activated; that is, activated with the new color after the ball passes by until the animation loops back to the beginning. This happens when sceneTime is equal to incrementSteps (see the animate function).
12. Select the B-Spline interpolation. Notice how the ball does not reach any of the intermediate flags in the initial configuration. Is there any configuration you can test so that the ball passes through at least two of the flags?

What just happened?

We’ve learned how to use interpolation to describe the movement of an object in our 3D world. We've also created very simple scripts to detect object proximity and alter our scene accordingly (changing flag colors, in this example). Reaction to proximity is a key element in game design!