Unexpected Results - Interpolating Sine
Demo: Interpolating Points on a Sine Curve
Source: interpolate_sine.zip
A recent post on the gotoAndPlay.net flashlist asked about charting the sine wave in flash using the drawing API. The problem with the drawing API is that the quadratic bezier curveTo functions don’t make for the smoothest curves without a little trickery.
Patrick Mineault has a great piece on his blog about piecewise cubic beziers. Using his code, we can interpolate between the points on a sine curve quite smoothly. I thought his demo was quite nice, so I download his source, hacked it a bit, and came up with this demo.
Yes, it makes a nice smooth curve, if that’s what you’re after, but the fun starts when you start playing with the controls. A good place to start is by setting the wavelength to 2 while increasing the overshoot. Once the wavelength gets below 4 pixels, the cubic bezier interpolation no longer has enough points to interpolate the high frequency wave accurately. Increasing the overshoot factor creates some unexpectedly fun curls. Altering the number of points plotted gives us even more variation.
January 18th, 2007 at 2:29 pm
David,
Thanks for looking into this. I was suprised by the lack of info on the web regarding this topic. I’m looking forward to digging through your source files.
Thanks Again,
~Jeremy
May 28th, 2007 at 11:16 pm
is there a way to smooth this line……….please help……..
var line_data_arr:Array = new Array();
line_data_arr.push({x:0, y:500});
line_data_arr.push({x:54.1666666666667, y:500});
line_data_arr.push({x:108.333333333333, y:0});
line_data_arr.push({x:162.5, y:307.055555555556});
line_data_arr.push({x:216.666666666667, y:483.333333333333});
line_data_arr.push({x:270.833333333333, y:487});
line_data_arr.push({x:325, y:431.444444444444});
line_data_arr.push({x:379.166666666667, y:472.222222222222});
_root.createEmptyMovieClip(”line_mc”, _root.getNextHighestDepth());
with (_root.line_mc) {
lineStyle(1, 0×564500, 100);
moveTo(0, 500);
for (var j = 0; j
June 4th, 2007 at 2:20 pm
saravanan- I’ve posted an example for you here… http://bumpslide.com/blog/2007/06/04/easy-bezier-interpolation/
hope this helps.