EllipseTesting

Drawing Evenly Distributed Points on an Ellipse in Flash AS3

| 0 comments

I recently had a request from a friend on how to draw evenly distributed points on an ellipse in Flash.  So I did some research and basically found that all articles/posts/whatever talk about the same thing.  See here as an example.

Goal

Find a way to evenly distribute points on an ellipse using Flash AS3.

Step 1: Grab Some Classes

I used Senocular’s TransformTool and AS3 Math Library to get started.

Step 2: Learn About Elliptical Integrals of the Second Kind

I’m not going to go into the math detail in this tutorial as I’m sure most people viewing this would rather have code then piles of calculus.  If you are interested in the math behind the functionality here, please check out this site.

Step 3: Code the “important” Do/While Loop

Basically, the code below is all you need to get things up and running.  Notice though that I’m using Simpson’s Rule to calculate the integral.  Please checkout the classes above to integrate this.

private function iterateArcAngle():void {
			var targetArcLength = (targetArcAngle(Math.PI)/numDots);

			var nextInput:Number = 0;
			var degreeLimit:Number = .01;
			var degreeCounter:Number = 0;
			var arcLength = 0;

			for(var i:int = 0; i <= numDots; i++) {
				degreeCounter = 0;
				arcLength = 0;
				do {
					degreeCounter+=degreeLimit;
					arcLength = calculateArcAngle(0, degreeCounter);
				}
				while(arcLength < targetArcLength*(i));

				nextInput = degreeCounter;

				dotArray[i].x = (radiusX * Math.cos(nextInput)) + fieldsOffset;
				dotArray[i].y = (-radiusY * Math.sin(nextInput)) + fieldsOffset;
			}
		}

private function calculateArcAngle(iteration:int, angle:Number):Number {

			var f:Function = function(x:Number):Number {
	       	 	return Math.sqrt(
								 (radiusX*Math.sin(x))*
								 (radiusX*Math.sin(x)) +
								 (radiusY*Math.cos(x))*
								 (radiusY*Math.cos(x))
								 );
			}
			var returnNum:Number = integralCalculator.simpson(f, iteration, angle, 4);
			return returnNum;
		}

Step 4: Test the Demo

Here’s the reason you came to this article anyway. Check out this demo and/or just download the source code.

Conclusion

I’d suggest learning more about math.  Math knowledge when writing any code is essential, and it’s also fun :)