{"id":138,"date":"2007-11-01T09:52:30","date_gmt":"2007-11-01T14:52:30","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/11\/01\/curveto-visualization\/"},"modified":"2009-08-14T15:09:38","modified_gmt":"2009-08-14T20:09:38","slug":"curveto-visualization","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/11\/01\/curveto-visualization\/","title":{"rendered":"Flash CurveTo Visualization Code"},"content":{"rendered":"

If you’ve ever wondered how Adobe Flash draws a curve when issued a “curveTo” command this article will help you visualize the process.<\/p>\n

As you probably know, Flash requires three points to draw an exponential curve.<\/p>\n

    \n
  1. A Starting Point<\/strong>. Wherever the Flash drawing pen is currently located. If you have not previously moved the pen with “lineTo”, “curveTo”, or “moveTo” the pen defaults to the origin (0, 0).<\/li>\n
  2. A Control Point<\/strong>. A point which the the Flash drawing pen will head toward before changing direction and heading toward the end point. The pen generally does not go through the control point unless your “curve” is nearly straight. <\/li>\n
  3. An End Point<\/strong>. Where the Flash drawing pen will come to rest when the curve is complete.<\/li>\n<\/ol>\n

    But how exactly does the control point “control” the shape of the curve? How does Flash precisely map the vague concept of heading towards<\/em> a point and then land precisely at another point? Take a look at the SWF file below. The red dot represents the Starting Point, the green dot represents the Control Point and the blue dot represents the End Point. The magenta (purple) dot represents various points along the “curveTo” path. So how does Flash determine where the magenta dot should be?<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n
      \n
    • You can drag the red, green and blue dots.<\/li>\n
    • Pressing the \"Q<\/strong>\" key freezes the curveTo function one Q<\/strong>uarter of the way along its path.<\/li>\n<\/ul>\n

      Here is how to visualize the process... <\/p>\n

        \n
      1. Determine where you want to be along the curved path. This can be represented as a ratio, fraction or percentage of the total distance needed to travel along the path from the Start Point to the End Point. For this example, we'll use 1\/4 (same as .25 or 25%).<\/li>\n
      2. Draw a yellow line from the red Starting Point to the green Control Point.<\/li>\n
      3. Draw a yellow dot on the yellow line 1\/4 of the distance<\/strong> from the red Start Point to the green Control point.<\/li>\n
      4. Draw a cyan line from the green Control Point to the blue End Point.<\/li>\n
      5. Draw a cyan dot on the cyan line 1\/4 of the distance<\/strong> from the green Control Point to the blue End Point.<\/li>\n
      6. Draw a magenta line from the yellow dot to the cyan dot.<\/li>\n
      7. Draw a magenta dot on the magenta line 1\/4 of the distance<\/strong> from the yellow dot to the cyan dot. The magenta dot now represents a point 1\/4 of the way along the curveTo path.<\/li>\n
      8. To find all other points on the path, repeat this process with different ratios (or fractions or percentages). The example above repeatedly goes from .01 to .99 and then bounces back to .01.<\/li>\n<\/ol>\n

        So when Flash draws a curve with the \"curveTo\" command it essentially goes through the same process as above for a series of points along the curve's path and then connects those points with straight line segments. So now you know.<\/p>\n

        If you'd like to dig through the code used to generate the above SWF file, here it is...<\/p>\n

        \/\/<\/span>
        \n\/\/ Red Dot (Start Point)<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P1"<\/span>, 10<\/span>)<\/span>;
        \nP1.lineStyle<\/span>(<\/span>20<\/span>, 0xFF0000)<\/span>;
        \nP1.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \nP1._x<\/span> = 50<\/span>;
        \nP1._y<\/span> = 50<\/span>;
        \n\/\/<\/span>
        \n\/\/ Green Dot (Control Point)<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P2"<\/span>, 20<\/span>)<\/span>;
        \nP2.lineStyle<\/span>(<\/span>20<\/span>, 0x00FF00)<\/span>;
        \nP2.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \nP2._x<\/span> = 450<\/span>;
        \nP2._y<\/span> = 50<\/span>;
        \n\/\/<\/span>
        \n\/\/ Blue Dot (End Point)<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P3"<\/span>, 30<\/span>)<\/span>;
        \nP3.lineStyle<\/span>(<\/span>20<\/span>, 0x0000FF)<\/span>;
        \nP3.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \nP3._x<\/span> = 50<\/span>;
        \nP3._y<\/span> = 350<\/span>;
        \n\/\/<\/span>
        \n\/\/ Yellow Dot<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P12"<\/span>, 40<\/span>)<\/span>;
        \nP12.lineStyle<\/span>(<\/span>10<\/span>, 0xFFFF00)<\/span>;
        \nP12.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Cyan Dot<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P23"<\/span>, 50<\/span>)<\/span>;
        \nP23.lineStyle<\/span>(<\/span>10<\/span>, 0x00FFFF)<\/span>;
        \nP23.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Magenta Dot<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"P123"<\/span>, 60<\/span>)<\/span>;
        \nP123.lineStyle<\/span>(<\/span>10<\/span>, 0xFF00FF)<\/span>;
        \nP123.lineTo<\/span>(<\/span>.5, 0<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Red Arc<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"PartLineA"<\/span>, 70<\/span>)<\/span>;
        \nPartLineA.lineStyle<\/span>(<\/span>2<\/span>, 0xFF0000)<\/span>;
        \nPartLineA.moveTo<\/span>(<\/span>P1._x<\/span>, P1._y<\/span>)<\/span>;
        \nPartLineA.curveTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>, P3._x<\/span>, P3._y<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Blue Arc<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"PartLineB"<\/span>, 80<\/span>)<\/span>;
        \nPartLineB.lineStyle<\/span>(<\/span>2<\/span>, 0x000FF)<\/span>;
        \nPartLineB.moveTo<\/span>(<\/span>P1._x<\/span>, P1._y<\/span>)<\/span>;
        \nPartLineB.curveTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>, P3._x<\/span>, P3._y<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Magenta Line<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"GuideLine"<\/span>, 5<\/span>)<\/span>;
        \nGuideLine.lineStyle<\/span>(<\/span>2<\/span>, 0xFF00FF)<\/span>;
        \nGuideLine.moveTo<\/span>(<\/span>P12._x<\/span>, P12._y<\/span>)<\/span>;
        \nGuideLine.lineTo<\/span>(<\/span>P23._x<\/span>, P23._y<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Yellow Line (Connects Starting Point to Control Point).<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"GuideLine2"<\/span>, 6<\/span>)<\/span>;
        \nGuideLine2.lineStyle<\/span>(<\/span>1<\/span>, 0xFFFF00)<\/span>;
        \nGuideLine2.moveTo<\/span>(<\/span>P1._x<\/span>, P1._y<\/span>)<\/span>;
        \nGuideLine2.lineTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Cyan Line (Connects Control Point to End Point).<\/span>
        \ncreateEmptyMovieClip<\/span>(<\/span>"GuideLine3"<\/span>, 7<\/span>)<\/span>;
        \nGuideLine3.lineStyle<\/span>(<\/span>1<\/span>, 0x00FFFF)<\/span>;
        \nGuideLine3.moveTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>)<\/span>;
        \nGuideLine3.lineTo<\/span>(<\/span>P3._x<\/span>, P3._y<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Animate the line by bouncing the values of "ratio" between 0 and 1.<\/span>
        \nvar<\/span> step = .0025;
        \nvar<\/span> curveRatio = 0<\/span>;
        \n\/\/<\/span>
        \nfunction<\/span> showCurveTo(<\/span>ratio)<\/span> {<\/span>
        \n    \/\/<\/span>
        \n    P12._x<\/span> = P1._x<\/span>+(<\/span>P2._x-P1._x<\/span>)<\/span>*<\/span>ratio;
        \n    P23._x<\/span> = P2._x<\/span>+(<\/span>P3._x-P2._x<\/span>)<\/span>*<\/span>ratio;
        \n    P123._x<\/span> = P12._x<\/span>+(<\/span>P23._x-P12._x<\/span>)<\/span>*<\/span>ratio;
        \n    P12._y<\/span> = P1._y<\/span>+(<\/span>P2._y-P1._y<\/span>)<\/span>*<\/span>ratio;
        \n    P23._y<\/span> = P2._y<\/span>+(<\/span>P3._y-P2._y<\/span>)<\/span>*<\/span>ratio;
        \n    P123._y<\/span> = P12._y<\/span>+(<\/span>P23._y-P12._y<\/span>)<\/span>*<\/span>ratio;
        \n    \/\/<\/span>
        \n    PartLineA.clear<\/span>(<\/span>)<\/span>;
        \n    PartLineA.lineStyle<\/span>(<\/span>2<\/span>, 0xFF0000)<\/span>;
        \n    PartLineA.moveTo<\/span>(<\/span>P1._x<\/span>, P1._y<\/span>)<\/span>;
        \n    PartLineA.curveTo<\/span>(<\/span>P12._x<\/span>, P12._y<\/span>, P123._x<\/span>, P123._y<\/span>)<\/span>;
        \n    \/\/<\/span>
        \n    PartLineB.clear<\/span>(<\/span>)<\/span>;
        \n    PartLineB.lineStyle<\/span>(<\/span>2<\/span>, 0x0000FF)<\/span>;
        \n    PartLineB.moveTo<\/span>(<\/span>P3._x<\/span>, P3._y<\/span>)<\/span>;
        \n    PartLineB.curveTo<\/span>(<\/span>P23._x<\/span>, P23._y<\/span>, P123._x<\/span>, P123._y<\/span>)<\/span>;
        \n    \/\/<\/span>
        \n    GuideLine.clear<\/span>(<\/span>)<\/span>;
        \n    GuideLine.lineStyle<\/span>(<\/span>2<\/span>, 0xFF00FF)<\/span>;
        \n    GuideLine.moveTo<\/span>(<\/span>P12._x<\/span>, P12._y<\/span>)<\/span>;
        \n    GuideLine.lineTo<\/span>(<\/span>P23._x<\/span>, P23._y<\/span>)<\/span>;
        \n}<\/span>
        \nfunction<\/span> bounceCurve (<\/span>)<\/span>{<\/span>
        \n    curveRatio += step;
        \n    if<\/span>(<\/span>curveRatio><\/span>1<\/span> ||<\/span> curveRatio<<\/span>0<\/span>)<\/span> step*<\/span>=-1<\/span>;
        \n    showCurveTo(<\/span>curveRatio)<\/span>;
        \n}<\/span>
        \nfunction<\/span> sameCurve(<\/span>)<\/span>{<\/span>
        \n    showCurveTo(<\/span>curveRatio)<\/span>
        \n}<\/span>
        \nfunction<\/span> toggleQuarter(<\/span>)<\/span>{<\/span>
        \n    if<\/span>(<\/span>Key<\/span>.getCode<\/span>(<\/span>)<\/span>  == 81<\/span>)<\/span>{<\/span>\/\/ "Q"<\/span>
        \n        if<\/span>(<\/span>onEnterFrame<\/span> == sameCurve)<\/span>{<\/span>
        \n            onEnterFrame<\/span> = bounceCurve;
        \n        }<\/span>else<\/span>{<\/span>
        \n            curveRatio = .25;
        \n            onEnterFrame<\/span> = sameCurve;
        \n        }<\/span>
        \n    }<\/span>
        \n}<\/span>
        \nonEnterFrame<\/span> = bounceCurve;
        \nonKeyDown<\/span> = toggleQuarter;
        \nKey<\/span>.addListener<\/span>(<\/span>this<\/span>)<\/span>;
        \n\/\/<\/span>
        \n\/\/ Allow dots to be dragged and update lines.<\/span>
        \nvar<\/span> pressed = null<\/span>;
        \nP1.onPress<\/span> = P2.onPress<\/span> = P3.onPress<\/span> = function<\/span>(<\/span>)<\/span>{<\/span>
        \n    pressed = this<\/span>;
        \n    onMouseMove<\/span> = movePressed;
        \n}<\/span>
        \nP1.onRelease<\/span> = P2.onRelease<\/span> = P3.onRelease<\/span> =
        \nP1.onReleaseOutside<\/span> = P2.onReleaseOutside<\/span> = P3.onReleaseOutside<\/span> = function<\/span>(<\/span>)<\/span>{<\/span>
        \n    pressed = null<\/span>;
        \n    onMouseMove<\/span> = null<\/span>;
        \n}<\/span>
        \nmovePressed = function<\/span>(<\/span>)<\/span>{<\/span>
        \n    pressed._x<\/span> = _xmouse<\/span>;
        \n    pressed._y<\/span> = _ymouse<\/span>;
        \n    GuideLine2.clear<\/span>(<\/span>)<\/span>;
        \n    GuideLine2.lineStyle<\/span>(<\/span>1<\/span>, 0xFFFF00)<\/span>;
        \n    GuideLine2.moveTo<\/span>(<\/span>P1._x<\/span>, P1._y<\/span>)<\/span>;
        \n    GuideLine2.lineTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>)<\/span>;
        \n    GuideLine3.clear<\/span>(<\/span>)<\/span>;
        \n    GuideLine3.lineStyle<\/span>(<\/span>1<\/span>, 0x00FFFF)<\/span>;
        \n    GuideLine3.moveTo<\/span>(<\/span>P2._x<\/span>, P2._y<\/span>)<\/span>;
        \n    GuideLine3.lineTo<\/span>(<\/span>P3._x<\/span>, P3._y<\/span>)<\/span>;
        \n    updateAfterEvent<\/span>(<\/span>)<\/span>;
        \n}<\/span>
        \n\/\/<\/span>
        \n\/\/<\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

        A tutorial explaining how the CurveTo command works in Flash with a very helpful curveTo visualization tool to help bring it all together.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,37],"class_list":["post-138","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}