Easy Bezier Interpolation

Demo: Easy Interpolation
Source: Interpolation.as

Commenting on my Interpolating Sine post, Saravanan wrote:

is there a way to smooth this line..........please help........

Why, yes, there is. Again, Patrick has done all the dirty work, but unfortunately his interpolation code was dependent on his demo movie clip classes. Rather that bother a man who is now retired, I borrowed his code, removed the dependencies, made it MTASC friendly, and am sharing it with you now. Patrick's cubic bezier and interpolation classes have been combined into com.bumpslide.util.CubicBezier.

Here is a quick sample of using this class to draw a smooth curve through a series of random points:

  1. import com.bumpslide.util.CubicBezier;
  3. // create some random points
  4. var targetPoints:Array = new Array();
  5. for(var i=0; i<9; i++) {
  6.     targetPoints.push({x:50+50*i, y:Math.random() * 300 + 50});
  7. }
  9. // interpolate the points
  10. var overshootFactor = 20;
  11. interpolatedPoints = CubicBezier.interpolatePiecewise( targetPoints, overshootFactor );
  13. // draw
  14. var holder:MovieClip = createEmptyMovieClip('holder_mc', 1 );
  15. holder.lineStyle(0, 0x880000);
  16. holder.moveTo(interpolatedPoints[0].x, interpolatedPoints[0].y);
  17. CubicBezier.drawBeziers(holder, interpolatedPoints);

The full example and all related source files are all in my Bumpslide Library SVN repository.


One Response to “Easy Bezier Interpolation”

  1. Patrick Mineault Says:

    Jim Armstrong has a nice article on piecewise interpolation using cubic beziers. You can read his technote here:


    Essentially Jim describes a more general version of the algorithm I'm using. In particular, rather than having the 1/3 value hardcoded (lines 35, 36), it can be used as a parameter corresponding to the tension of the interpolated curve. You can even animate this parameter if you want, which can create some really cool animations. Also, Jim describes how you can do the work with a less trig calls, using dot products if I remember correctly. In my scenario, most of the work was being spent in the physics engine, so it didn't really matter, but if the bottleneck shifts, it can make a big speed difference.

    That algorithm can be expanded to work not only with one dimensional lines, but also with lines that have a definite thickness. You can vary that thickness along the way. You can see this effect in the background of the top banner (the moving lines) here: