ActionScript 3 Arc Drawing Class
It seems nowadays that there has been a resurgence of experimentation happening with Flash. Seeing Natzke’s generative art at Flash Forward and checking out Keith’s new book site has gotten me inspired to do more artistic experimentation.
One of the things that I have always wanted to do is to draw perfect arcs using the drawing API. After much research, I happened across this old tutorial on the Adobe site by Ric Ewing. It has a bunch of code samples in ActionScript 1.0 for doing a wide variety of drawing effects. I ported this code into an ActionScript 3.0 class named Arc. It contains a single static method called draw().
I have create a Google Code repository for any classes that write. At the moment it is pretty bare but I will be adding more soon. Check out the code and let me know if you have any questions.
Below is the source code for the above example. It uses the Arc class as well as one of the random functions from the Math2 class.
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 41 42 43 | import com.leebrimelow.drawing.*; import com.leebrimelow.utils.*; var bmd:BitmapData = new BitmapData(550, 400, false, 0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); var t:Timer = new Timer(50); t.addEventListener(TimerEvent.TIMER, createArc); t.start(); function createArc(e:Event):void { var sp:MovieClip = new MovieClip(); sp.radius = Math2.random(50, 400); sp.sx = Math2.random(20, 500); sp.sy = Math2.random(20, 400); sp.thick = 2; sp.startAngle = Math2.random(20, 270); sp.endAngle = Math2.random(sp.startAngle, 360); sp.color = Math.random() * 0xFFFFFF; sp.count = 0; sp.filters = [new DropShadowFilter(0x000000)]; sp.addEventListener(Event.ENTER_FRAME, loop); addChild(sp); } function loop(e:Event):void { var sp:MovieClip = e.target as MovieClip; sp.graphics.clear(); sp.graphics.lineStyle(sp.thick, sp.color, 1, false, LineScaleMode.NORMAL, CapsStyle.NONE); Arc.draw(sp, 275, 200, sp.radius, sp.count, sp.startAngle); sp.count += 10; if(sp.count > sp.endAngle) { sp.removeEventListener(Event.ENTER_FRAME, loop); bmd.draw(sp); removeChild(sp); sp = null; } } |
The Arc class can form the basis of many different types of generative art and effects. It can also be helpful for building things like circular preloaders.
Lee
This example shouldn’t increase memory usage over time but it does. Does anyone know what I can do to prevent that? The arc should be killed by removing it from the display list and setting it to null but I’m not sure it is actually gone.
Yeah, I was just about to mention that, it looks as if you are attempting to remove each movieClip when its completed drawing. It might seem too subtle if it just disappears, maybe remove the loop eventListener and set it with a new fade event. And just out of curiosity why do you a addEventListener for the loop outside of the createArc function?
Nice class Lee this will really fun to play with, but the problem I have with flash for generative art is the limitation of large format output. Sure, you can always print to pdf as Joshua Davis does, but if you’re going to apply bitmap effects you’re limited to 2880px by 2880px, right? I know Natzke has worked up some solution outputting a grid of PNGs using AIR, but in all my attempts to create something similar it just hasn’t came out right. Are there any ways that you know of to create and output large format copies of the canvas?
@RyanP Ahhh that extra addEventListener doesn’t belong in there. Forgot to remove it. Thanks for pointing that out.
@ryan Check out Natzke’s source code (http://natzke.com/source) to see what he is doing. I think he is encoding to a PNG now.
This will keep the mem down.
if(sp.count > sp.endAngle)
{
sp.removeEventListener(Event.ENTER_FRAME, loop);
bmd.draw(sp);
sp.graphics.clear();
while(stage.contains(sp)){
removeChild(sp);
sp = null;
}
}
I need it
I was really inspired by Natzke’s work as well. I had a bit of a play with the source code he has up on his site – it’s far from perfect arcs but it was really fascinating and fun to work with…
http://www.flickr.com/photos/24934584@N05/2820791700/sizes/l/
Nice,
does anyone out there have a solution for ripping these type of dynamic swf artworks for print? It works for me on my old mac (save as ps pdf), but since I upgraded to my new Mac I can get it to work anymore. Have searched high and low for an answer, looked at Josh Davies site etc etc
Nice experiment!
for more complex drawing experiments I think degrafa is a very powerful help. But I am sure you know this
http://www.degrafa.com/
http://samples.degrafa.com/
Was gonna say the same Flo. It already has the functionality to draw arcs.
[...] ActionScript 3 Arc Drawing Class (from The Flash Blog) [...]
@Tink I thought Degrafa was just for Flex. Can you also use it from pure AS?
…is nice…
[...] from Lee Brimlow’s post of the Arc class he created, I took it a step further and created a generator that allows you to [...]
@Lee and Tink: Lee is right. You can’t use the combination of degrafa and flash. For example the DegrafaObject class uses the FlexEvent class and other Flex-based stuff.
http://code.google.com/p/degrafa/source/browse/branches/Origin/Degrafa/com/degrafa/core/DegrafaObject.as
Maybe the degrafa functionalities will be integrated in the Flash (Player)?!
http://www.degrafa.com/2008/08/19/degrafa-and-adobe-collaboration/
Wow, it’s great to see this old code updated! Thanks!
Lee, wow, your work is just great. Every time I come to this blog there’s a visual treat.
“@Lee and Tink: Lee is right. You can’t use the combination of degrafa and flash.”
Thats not correct.
@ Lee
Yes you can use Degrafa for pure AS. Behind the scenes are a bunch of AS classes that can be used in MXML. Some are built specifically for use with Flex, but the simple drawing stuff isn’t part of this, it is just leveraged by the Flex specific stuff.
for instance to draw a simple arc of 270 degrees
var solidStroke:SolidStroke = new SolidStroke();
solidStroke.color = 0xFFFFFF;
solidStroke.weight = 3;
solidStroke.alpha = 1;
var ellipticalArc:EllipticalArc = new EllipticalArc( 0, 0, 200, 200, 0, 270, “open” );
ellipticalArc.stroke = solidStroke;
ellipticalArc.draw( graphics, null );
[...] Lee posted this cool experiment and released some Drawing classes I try a quick and simple experiment (source [...]
hey, this sounds pretty cool. unfortunately, the source for the drawing classes is not available
could you update the link, *pretty please* ?
Hey lee, I took a look at your code repository… I saw a problem with the Wedge class. It doesn’t seem to work when any start angle other than 0 is specified…
Here is some test code that I used. It should draw a full circle using numWedges segments. It does not. Good luck:
public class WedgeTest extends MovieClip {
public function WedgeTest() {
var wedgeContainer:Sprite;
var numWedges:Number = 50;
for(var i:Number = 0; i < numWedges; ++i) {
wedgeContainer = new Sprite();
wedgeContainer.graphics.lineStyle(1.0, 0×000000, 1.0);
wedgeContainer.graphics.beginFill(0xCCCCCC, 1.0);
Wedge.draw(wedgeContainer, 200, 200, 200, 360/numWedges, i*(360/numWedges));
wedgeContainer.graphics.endFill();
addChild(wedgeContainer);
}
}
}
Hey,
I’ve put up a post (http://www.michaelwelford.com/blog/large-format-flash-printing/) that gives a run down on the ways to get large format files out of Flash.
Cheers.
I’d love to use your Arc class but the google repository seems to be empty..
@gio (23.) try this location if you haven’t found it already mate.
http://code.google.com/p/leebrimelow/source/browse/#svn/trunk/as3/com/theflashblog
@Bill (21.) I was having the same problem until i found this:
http://code.google.com/p/leebrimelow/issues/detail?id=1