dcsimg
A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Graphing Tool

  1. #1
    Junior Member
    Join Date
    Mar 2004
    Location
    Austin, TX
    Posts
    9

    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

  2. #2
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    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);


    Last edited by jbum; 05-04-2004 at 03:14 PM.

  3. #3
    Junior Member
    Join Date
    Mar 2004
    Location
    Austin, TX
    Posts
    9
    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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center