Home > Degrafa, Flex > Degrafa Quad. Bezier Y at X

Degrafa Quad. Bezier Y at X

January 13, 2009

I finally got around to writing a test program for the advanced quadratic Bezier y-at-x  method.  In a parametric curve such as a Bezier, the x- and y-coordinates are parameterized as a function of t in [0,1].  There are occasions when an application needs y as a function of x.  One common application is when Bezier curves are used to interpolate animation parameters.

It does seem strange using a drawing package like Degrafa for something that is purely computational in nature.  There are, however, some drawing applications in which this capability is useful.  I once worked on an experimental interface for a designer that was dynamically drawn.  The boundary of a certain UI element was a Bezier curve.  Depending on which page the user was viewing, a certain number of menu items were dynamically rendered along the boundary.  The x-coordinate boundaries were well-known and used to generate y-coordinates to place the dynamic menu items.

The screenshot from the demo shows the previous three-point interpolation used to generate a quad. Bezier.  When an interpolation point is moved, a slider becomes active.  The slider’s value represents x-coordinates along the interface.  As  the slider is moved, two markers appear to denote the y-coordinates along the quadratic Bezier corresponding to the input x-coordinate.  There are at most two y-coordinates.  The t-parameter at each y-coordinate is returned so that this information may be used in applications to choose one y-coordinate over another in the event that only one is required.

Degrafa Quad. Bezier y at x

Degrafa Quad. Bezier y at x

As always, update your code base from SVN before playing with the demo. Enjoy!

View demo.

View source.

  1. January 26, 2009 at 8:44 am


    This is so fantastic! I need to do something like this for change levels on images.. I mean.. I need to parse the levels of one image and then I need to create a graphic like this and allow users to drag the levels line.. Is that possible with your sample?

    keep on with the good samples!
    kind regards.

  2. Pierre
    April 6, 2009 at 1:13 am


    Great example.

    On my screen the read line is not exactly in the middle. On the beginning she is on the left and at the end on the right.

    one question : Is it possible to make the classic statistical bell curve like http://merhl.com/index.php?paged=3.


  3. April 6, 2009 at 4:59 am

    that’s an artifact of the way the slider thumb is rendered – it’s not supposed to be exactly in the middle the entire time.

  4. Pierre
    April 15, 2009 at 10:47 am


  5. Pierre
    April 15, 2009 at 10:49 am

    I’m looking for to draw a classic statistical bell curve with the same aspect that http://merhl.com/index.php?paged=3. Can you help me, please?


  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: