Drawing Quadratic Bezier circles with a given radius: how to determine control points
- by Casey
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;
}
