{"id":403,"date":"2008-08-07T15:33:36","date_gmt":"2008-08-07T20:33:36","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=403"},"modified":"2009-08-15T18:04:49","modified_gmt":"2009-08-15T23:04:49","slug":"draw-rotated-oval","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/08\/07\/draw-rotated-oval\/","title":{"rendered":"Rotated Oval Tutorial"},"content":{"rendered":"

\"rotated<\/p>\n

Making the transition from drawing circles<\/a> to drawing ovals<\/a> is pretty simple but when you need to go from drawing ovals to drawing rotated<\/em> ovals, you might run into a few problems. This article documents some of the pitfalls I encountered and presents them as a learning experience. If you just want some solid code to draw rotated ovals or twisted ellipses, skip ahead to the end of the article and copy the last block of code<\/a>. If you think you might gain from my experience then by all means… read on.<\/p>\n

In the simplest of terms, the goal is to plot the points of the rotated oval just like you would plot the points of a normal oval, but you also want to add a “twist” to each point so the whole oval ends up being rotated. “No duh!” right? If you want to rotate the whole oval, you have to rotate each and every point in the oval. Thanks for the tip Captain Obvious, Commander of the S.S. A’Durrrrrrr.<\/p>\n

While the concept of rotating each point may be a no-brainer, simply adding “twist” won’t do the trick.<\/p>\n

Here’s the standard oval drawing code (for comparison purposes):<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nfunction<\/span> drawOval(<\/span>centerX, centerY, xRadius, yRadius, sides)<\/span>{<\/span>
\n    this<\/span>.moveTo<\/span>(<\/span>centerX + xRadius,  centerY)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> radians = pointRatio *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        var<\/span> xSteps = Math<\/span>.cos<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> ySteps = Math<\/span>.sin<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> pointX = centerX + xSteps *<\/span> xRadius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> yRadius;
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/         X,   Y,   W,   H, steps.<\/span>
\ndrawOval(<\/span>250<\/span>, 200<\/span>, 200<\/span>, 150<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

And here’s my first failed attempt at simply adding “twist” to each point:<\/p>\n

\/\/<\/span>
\n\/\/ Add "twist" argument.<\/span>
\nfunction<\/span> drawOval(<\/span>centerX, centerY, xRadius, yRadius, twist, sides)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Convert "twist" to radians.<\/span>
\n    var<\/span> twistRadians = twist *<\/span> 2<\/span>*<\/span>Math<\/span>.PI<\/span>;
\n    this<\/span>.moveTo<\/span>(<\/span>centerX + xRadius, centerY)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> radians = pointRatio *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        \/\/<\/span>
\n        \/\/ Add "twist" to "radians" .<\/span>
\n        radians += twistRadians;
\n        var<\/span> xSteps = Math<\/span>.cos<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> ySteps = Math<\/span>.sin<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> pointX = centerX + xSteps *<\/span> xRadius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> yRadius;
\n        \/\/<\/span>
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/         X,   Y,   W,   H,  twist, steps.<\/span>
\ndrawOval(<\/span>250<\/span>, 200<\/span>, 200<\/span>, 150<\/span>, 45<\/span>\/<\/span>360<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

The above code produced this SWF:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

FAIL!<\/strong><\/p>\n

All that did was find a point on the circle, spin said point around the circle (by adding twist), and THEN scale the X and Y axis to make it an oval. Twisting or spinning the points on a circle before they are scaled is useless, you must scale first and then twist<\/strong>.<\/p>\n

*NOTE:<\/strong> The straight line is caused by the \"moveTo\" command sending the pen to the standard oval's starting point (3 O'clock) and then jumping to the (supposedly) \"rotated\" oval's new starting point 45 degrees around.<\/p>\n

It might be clearer now that one possible solution is to:<\/p>\n

    \n
  1. Plot the point as if you were drawing a standard non-rotated oval being sure to scale X and Y (by multiplying times the xRadius and yRadius).<\/li>\n
  2. After the point has been scaled, find its new distance from center.<\/li>\n
  3. Find the point's new angle from center.<\/li>\n
  4. Add \"twist\" to the new angle.<\/li>\n
  5. Use distance and rotation values to plot the point at its new \"spun\" location.<\/li>\n<\/ol>\n

    Here's what it looks like in code:<\/p>\n

    \/\/<\/span>
    \nfunction<\/span> drawOval(<\/span>centerX, centerY, xRadius, yRadius, spin, steps)<\/span>{<\/span>
    \n    var<\/span> ratio, scaledAngle, ratioRadians, scaledRadius, angl, i;
    \n    var<\/span> spinRadians = spin *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
    \n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>spinRadians)<\/span> *<\/span> xRadius;
    \n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>spinRadians)<\/span> *<\/span> xRadius;
    \n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
    \n    for<\/span>(<\/span>i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
    \n        ratio = i\/<\/span>steps;
    \n        ratioRadians = ratio *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
    \n        \/\/<\/span>
    \n        \/\/ Scale the points like you would with a standard oval.<\/span>
    \n        xx = Math<\/span>.cos<\/span>(<\/span>ratioRadians)<\/span> *<\/span> xRadius;
    \n        yy = Math<\/span>.sin<\/span>(<\/span>ratioRadians)<\/span> *<\/span> yRadius;
    \n        \/\/<\/span>
    \n        \/\/ Find the scaled point's new distance from center.<\/span>
    \n        scaledRadius = Math<\/span>.sqrt<\/span>(<\/span>xx*<\/span>xx + yy*<\/span>yy)<\/span>;
    \n        \/\/<\/span>
    \n        \/\/ Find the scaled point's new angle from center.<\/span>
    \n        scaledAngle = Math<\/span>.atan2<\/span>(<\/span>yy, xx)<\/span>;
    \n        \/\/<\/span>
    \n        \/\/ Spin the point.<\/span>
    \n        scaledAngle += spinRadians;
    \n        \/\/<\/span>
    \n        \/\/ Plot the point with its new scaled and rotated values.<\/span>
    \n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>scaledAngle)<\/span> *<\/span> scaledRadius;
    \n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>scaledAngle)<\/span> *<\/span> scaledRadius;
    \n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
    \n    }<\/span>
    \n}<\/span>
    \n\/\/<\/span>
    \nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
    \ndrawOval(<\/span>250<\/span>, 200<\/span>, 200<\/span>, 100<\/span>, 45<\/span>\/<\/span>360<\/span>, 100<\/span>)<\/span>;
    \n\/\/<\/span><\/div><\/div>\n

    And here's the SWF created using the above code:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

    SUCCESS!<\/strong><\/p>\n

    That's pretty sweet but there's still room for improvement because \"Math.atan2\" and \"Math.sqrt\" are redundant and use more resources than necessary. There's a way to reduce the calculations above into a nice and compact formula but I must admit that the logic of the Math is a bit beyond me.<\/p>\n

    \"diagram\"
    \nFor an oval where...<\/p>\n