Drawing Quadratic Bezier circles with a given radius: how to determine control points

Posted by Casey on Stack Overflow See other posts from Stack Overflow or by Casey
Published on 2010-04-22T07:01:00Z Indexed on 2010/04/22 7:03 UTC
Read the original article Hit count: 320

Filed under:
|
|

Just to clarify; the code below works, but I don't understand where the formula for the variable "controlRadius" comes from. I wrote this function by dissecting an example I found elsewhere, but I can't find any explanation and the original code comments were not able to be translated.

Thanks in advance


//returns an array of quadratic Bezier segments
    public static function generateCircularQuadraticBezierSegments(radius:Number, numControlPoints:uint, centerX:Number, centerY:Number):Array
    {
        var segments:Array = [];

        var arcLength:Number = 2 * Math.PI / numControlPoints;

        var controlRadius:Number;

        var segment:QuadraticBezierSegment;

        for (var i:int = 0; i < numControlPoints; i++) {

            var startX:Number = centerX + radius * Math.cos(arcLength * i);
            var startY:Number = centerY + radius * Math.sin(arcLength * i);

            //control radius formula
            //where does it come from, why does it work?
            controlRadius = radius / Math.cos(arcLength * .5);

            //the control point is plotted halfway between the arcLength and uses the control radius
            var controlX:Number = centerX + controlRadius * Math.cos(arcLength * (i + 1) - arcLength * .5);
            var controlY:Number = centerY + controlRadius * Math.sin(arcLength * (i + 1) - arcLength * .5);

            var endX:Number = centerX + radius * Math.cos(arcLength * (i + 1));
            var endY:Number = centerY + radius * Math.sin(arcLength * (i + 1));

            segment = new QuadraticBezierSegment(new Point(startX, startY), new Point(controlX, controlY), new Point(endX, endY));

            segments.push(segment);
        }

        return segments;
    }

© Stack Overflow or respective owner

Related posts about actionscript

Related posts about bezier