Using the DrawingAPI to make wavy circles and stars

Ingredients

• A bunch of Sprites
• 1 cup of graphics.lineStyle
• A dash of Vector3D and Matrix3D – adds an extra dimension to the dish ( ha-ha )
• And most importantly a pinch of sin and cosine.

Directions

It is surprisingly easy to make this dish. The entire deal comes down to one line of code:

s.graphics.lineTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );

Once you have that the rest just falls into place. The entire WavyCircles class is only a few lines of code:

[cc lang="actionscript3"]package com.polyGeek.patterns {
	import flash.display.Sprite;
	public class WavyCircle extends Sprite {
		public function WavyCircle( s:Sprite, radius:int, amplitude:int, period:int, rotation:Number ) {
			super();
			var step:Number = 0.01;
			var len:Number = 2 * Math.PI + step;
			for( var i:Number = -0.01; i < len; i+= step ) {
var r:Number = radius + amplitude * ( Math.sin( period * i ) * Math.cos( period * i ) );	 				 				if( i >= 0 ) {
					s.graphics.lineTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );
				} else {
					s.graphics.moveTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );
				}
			}
		}
	}
}[/cc]

Ya see. That wasn’t so bad now was it? Most of the work on this came in the MXML and getting the auto-pilot and sliders going. Not hard. Just time consuming. I did all this coding back in the Spring – 9 months ago. I get a bit distracted over the summer and never published it. Of course I ported it over to Flex4 before putting it up. That was pretty easy. Most of the work was just replacing “<mx” with “<s” and that sort of thing. Not that I had to. Just wanted to.

I’d suggest turning off the auto-pilot and manually changing the radius, amplitude, period and rotation. Then take a look at the source code. It should be pretty easy to make since of it.

And yes, I should hook this up to an MP3 player and throw a few more WavyCircles in there that change based on the beat. Maybe later.