ActionScript 3 Wedge Drawing Class
Here is another class that I wrote thanks to this old tutorial. This is similar to the Arc class except that it draws wedges instead. These are great for doing lightweight charting stuff. You can get the code at my Google Code repository. The example below rapidly animates new wedge shapes creating a cool effect. You can click on the image below to check it out.
Below is the source code for the above example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import com.leebrimelow.drawing.*; import com.leebrimelow.utils.*; var bmd:BitmapData = new BitmapData(600, 400, true, 0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); function createArc():void { var sp:MovieClip = new MovieClip(); sp.radius = Math2.random(20, 400); sp.endAngle = Math2.random(130, 400); sp.color = Math.random() * 0xFFFFFF; sp.count = 0; sp.filters = [new DropShadowFilter(10, 45, 0x000000, 0.5)]; sp.addEventListener(Event.ENTER_FRAME, loop); addChild(sp); } addEventListener(Event.ENTER_FRAME, loop); function loop(e:Event):void { var sp:MovieClip = e.target as MovieClip; sp.graphics.clear(); sp.graphics.beginFill(sp.color); sp.graphics.lineStyle(5, 0x000000); Wedge.draw(sp, 300, 200, sp.radius, sp.count, 0); sp.count += 20; if(sp.count > sp.endAngle) { sp.removeEventListener(Event.ENTER_FRAME, loop); bmd.draw(sp); removeChild(sp); sp = null; createArc(); } } createArc(); |
Lee
That would be pretty cool for preloaders as well – thanks
.
I’m not able to view the example with FF3 (I just see a black stage). It works with IE though…
Hey Lee,
what is this Wedge.draw part?
Why is it that ALWAYS when you ask a question, the answer becomes to you? The Wedge is another ClassName for you Arc class. So just rename it to Arc so it can acces the draw dunction in Arc.as
sorry
simple and nice. thanks a lot!
This is great Lee – nice work! I’ll definitely need to try out some charting with it.
Works fine for me in FF3 on Mac.
Hi, Lee
really cool and easy to use classes! here is my quick 5 minutes addition:
http://blog.inspirit.ru/?p=29
Lee – so simple so lean – awesome!
Thanks Lee! I love generative art. Wouldn’t it be great if Friends of Ed needs to came out with an AS3 version of this book? http://www.friendsofed.com/book.html?isbn=1590594290
The Wedge class does not appear to be in the repository.
Thanks Lee
spooky, I just wrote a similar function yesterday. Wish I saw this first!
Where can I get the Math2 class, will that be put into the google code library.?
Hey Lee, what do you use to post code on your blog??
Hey Lee, I noticed that if the endAngle is set to 90, the wedge created falls short of 90 degrees; likewise with 270. Any reason why this would be?
@Matt – That’s because it draws the wedge in increments of 20 degrees, and since 90 and 270 are not evenly divisible by 20 you can’t get either angle, you can change the 20 degree draw to 15 if you want it to draw those two angles.
Thanks Ryan. I have actually noticed that it isn’t always accurate and I’m not sure why. I’ll look into it.
Thanks Ryan. Another thing I noticed is that if the startAngle parameter is changed in the draw method do say, 90, the wedge draws incorrectly. Let’s say I have 4 segments each at 90 degrees. I would then want segment 2’s startAngle the be segment 1’s endAngle, and so on. I am currently working on finding a solution to this…
Hi,
I was trying to use the Arc class to draw a simple preloader in one of my experiments (http://www.wemakedotcoms.com/_tmp/3DBlog/WMDC08_v1_r01.html). It refused to draw correctly until I added t.graphics.lineTo(ax, ay); after the for(…){} loop in the class’ draw function. Otherwise it was drawing from the right edge of the wedge rather then the center. Thank you for another great sample.
Cheers,
Jerome.
Here’s a Degrafa example for a wedge
var solidStroke:SolidStroke = new SolidStroke();
solidStroke.color = 0xFFFFFF;
solidStroke.weight = 3;
solidStroke.alpha = 1;
var solidFill:SolidFill = new SolidFill();
solidFill.color = 0xFF0000;
var ellipticalArc:EllipticalArc = new EllipticalArc( 0, 0, 100, 100, 0, 270, “pie” );
ellipticalArc.stroke = solidStroke;
ellipticalArc.fill = solidFill;
ellipticalArc.draw( graphics, null );
where should i get such classes for a reference or to learn the concepts.
Not sure if your referring to degrafa shivaji, but you can find it here
http://www.degrafa.com/
[...] Lee posted this cool experiment and released some Drawing classes I try a quick and simple experiment (source [...]
has anyone been able to get the start angle to work? I want to make radial chart using these wedges but unless my start angle is 0 or 180 the thing goes crazy. I have only been working flash for a few days so I can’t figure out what is wrong in the code myself yet. Any help would be greatly appreciated.
[...] ActionScript 3 Wedge Drawing Class (from The Flash Blog) [...]
I figured out a workaround where to create each wedge I make a second white wedge to cover up the unwanted portion, not too much more work but that seems to be the only way I can get it to do what I need.
This works perfectly:
function drawWedge(mc,x,y,radius, bA,eA) {
var degToRad = Math.PI/180;
if (eA < bA) eA += 360;
var r = radius;
var n= Math.ceil((eA-bA)/45);
var theta = ((eA-bA)/n)*degToRad;
var cr = radius/Math.cos(theta/2);
var angle = bA*degToRad;
var cangle = angle-theta/2;
mc.graphics.moveTo(x, y);
mc.graphics.lineTo(x+r*Math.cos(angle), y+r*Math.sin(angle));
for (var i=0;i < n;i++) {
angle += theta;
cangle += theta;
var endX = r*Math.cos (angle);
var endY = r*Math.sin (angle);
var cX = cr*Math.cos (cangle);
var cY = cr*Math.sin (cangle);
mc.graphics.curveTo(x+cX,y+cY, x+endX,y+endY);
}
mc.graphics.lineTo(x, y);
}
This is great! You really saved me a lot of time by posting this.
Thank you.
source code is not complete! It finish with an open bracket!
I doctored this class so it can also draw thick arcs. The start angle can also be anything you like and still draw properly. If anyone is interested, let me know.
Yeah thanks for that code. It was the difference between finishing a project on time and never getting it done.
Love the class, just wanted to ask you to update the URL in your content body as http://code.google.com/p/leebrimelow/source/browse/trunk/as3/com/leebrimelow/drawing/Arc.as does not work for me. No worries, I grabbed it all via SVN, but I think it may help some to have that corrected. Thanks for all you do.
Hi Brian,
Can you let me know how to grab the code via SVN or do you have the updated URL to download the Arc.as class.
Thanks
@GTStan –
The link to the file is http://code.google.com/p/leebrimelow/source/browse/trunk/as3/com/theflashblog/drawing/Arc.as
how do you download the source files?
http://code.google.com/p/leebrimelow/source/browse/trunk/as3/com/theflashblog/drawing/Arc.as