
Graphing Tool
I'm working on a tool which takes an equation and x and y min/max as input, and outputs a graph. We have a first version, which plots individual points along the line to "fake" the generation of a curve.
However, we'd like to make the tool dynamic, and computing and plotting all of those points tends to be slow. Is it possible to use curveTo() to generate the graph of an equation?
I basically have several questions:
1) How can I translate an equation in y = f(x) format to the anchor1, anchor2, and handle coordinates I need for cuveTo?
2) I know I'm going to have to use separate curveTo's for each segment of the curve between inflection points. Will a series of quadratic Bezier curves model something like a sine wave close enough that a user wouldn't be able to tell the difference?
I'm a bit of a Flash newbie, but I'm working with someone who's far more of a Flash guru than I, so feel free to speak to me as if I know what I'm talking about

Senior Member
1) How can I translate an equation in y = f(x) format to the anchor1, anchor2, and handle coordinates I need for cuveTo?
I haven't worked out a general purpose formula for doing this, but, assuming that the f(x) produces a shallow enough curve, you can break it up into a series of points (as you are for lineTo) and then use Robert Penner's curveToThru or drawCurve3Points. The problem with this method is that it will produce sharp corners if the curve changes slope too quickly.
Penner's useful curve functions..
2) I know I'm going to have to use separate curveTo's for each segment of the curve between inflection points. Will a series of quadratic Bezier curves model something like a sine wave close enough that a user wouldn't be able to tell the difference?
You can do a good approximation of a sine wave using 8 curveTos.
Here's some code which draws a thin red sine wave using 400 line segments, followed by a fatblue 8curve version.
When using the same linethickness and alpha, the 8curves version is 20 times faster than the 400lines version.
code:
SW = Stage.width;
SH = Stage.height;
// 400 line segements
MovieClip.prototype.drawSine1 = function(x,y,width,height)
{
kNbrLineSegments = 400;
this.moveTo(x,y);
for (var a = 1; a <= kNbrLineSegments; ++a) {
var ang = a*2*Math.PI/kNbrLineSegments;
this.lineTo(x+a*width/kNbrLineSegments, y+height*Math.sin(ang));
}
}
// This is unused, but is what I based the curveTo version on...
MovieClip.prototype.drawCurve3Pts = function (x1, y1, x2, y2, x3, y3) {
var cx = 2*x2  .5*(x1 + x3);
var cy = 2*y2  .5*(y1 + y3);
this.moveTo (x1, y1);
this.curveTo (cx, cy, x3, y3);
}; // Robert Penner
// 8 curves
MovieClip.prototype.drawSine2 = function(x,y,width,height)
{
kNbrCurves = 8;
var x1 = x;
var y1 = y;
// mang is the angle of half a curve... (1/16 of the sine wave).
// It is used to compute the height of the cy points of the curves
var mang = Math.PI/kNbrCurves;
this.moveTo(x,y);
for (var a = 1; a <= kNbrCurves; ++a) {
var ang = a*2*Math.PI/kNbrCurves;
var x3 = x+a*width/kNbrCurves;
var y3 = y+height*Math.sin(ang);
// cx and x2 are the same
var cx = (x1+x3)/2;
var y2 = y+height*Math.sin(angmang);
var cy = 2*y2  .5*(y1 + y3);
this.curveTo(cx,cy,x3,y3);
x1 = x3;
y1 = y3;
}
}
_root.clear();
_root.lineStyle(1,0x000000,50);
// draw axis
_root.moveTo(0,SH/2);
_root.lineTo(SW,SH/2);
// draw red sine wave (line segments)
_root.lineStyle(1,0xFF0000,100);
_root.drawSine1(0,SH/2, SW, SH/2);
// draw blue sine wave (curves)
_root.lineStyle(8,0x0000FF,50);
_root.drawSine2(0,SH/2, SW, SH/2);
Last edited by jbum; 05042004 at 03:14 PM.

This should get me started. Thank you very, very, very much!
BTW, I finally visited your site. WOW! Great job on those animations in the Bestiary!
Posting Permissions
 You may not post new threads
 You may not post replies
 You may not post attachments
 You may not edit your posts

Forum Rules

Click Here to Expand Forum to Full Width
