Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

place your ad here

Web Premium



Get Qwest High Speed Internet



Using the DrawingAPI to make wavy circles and stars

January 2nd, 2010 . by polygeek

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.
view source

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.

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

One Response to “Using the DrawingAPI to make wavy circles and stars”


comment number 1 by: sakri

You made good on your new years resolution already?! Good on you :) Looking forward to more!

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud