 A Flash Developer Resource Site

1. 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   Reply With Quote

2. 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 fat-blue 8-curve version.

When using the same line-thickness and alpha, the 8-curves version is 20 times faster than the 400-lines 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(ang-mang);
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);  Reply With Quote

3. 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!  Reply With Quote Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

 » Home » Movies » Tutorials » Submissions » Board » Links » Reviews » Feedback » Gallery » Fonts » The Lounge » Sound Loops » Sound FX » About FK » Sitemap

Click Here to Expand Forum to Full Width 