Archive for June, 2009
New generative art series
After months of experimenting with the medium, I’m finally pleased with the results of my generative art engine. Next thing on the list is to create some high resolution pieces and then print and frame the best ones.
Here are some of my latest artworks:
If anyone is interested in buying high quality glicee prints (signed and numbered offcourse), let me know.
A while ago, when working on a Flex application, I was in need of a nice visual for when the user is selecting multiple items. We are all familiar with the marching ants selection rectangle in tools like Photoshop, so I decided to implement selection the same way as in Photoshop.
There are already some free resources out there, but most of them aren’t in actionscript 3, or incomplete.
So, I thought I’d share my version, maybe this could be usefull to someone.
Here’s my marching ants visual 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | package be.vip.marchingantsdemo.view { import flash.display.BitmapData; import flash.geom.Matrix; import flash.geom.Rectangle; import mx.core.UIComponent; public class MarchingAntsSelectionRectangle extends UIComponent { private var horizontalBitmap:BitmapData; private var verticalBitmap:BitmapData; private var _rect:Rectangle; private var _lineThickness:Number=1; private var bitmapScroll:Number=0; public function MarchingAntsSelectionRectangle() { super(); width=0; height=0; includeInLayout=false; horizontalBitmap=new BitmapData(4,2,false,0XFFFFFF); verticalBitmap=new BitmapData(2,4,false,0XFFFFFF); initBitmaps(); } public function get rect():Rectangle{ return _rect; } public function set rect(value:Rectangle):void{ _rect = value; if(initialized) update(); } public function clear():void{ graphics.clear(); } public function get lineThickness():Number{ return _lineThickness; } public function set lineThickness(value:Number):void{ _lineThickness = value; if(initialized) update(); } private function scrollBitmaps():void{ bitmapScroll++; if(bitmapScroll>3) bitmapScroll=0; } private function initBitmaps():void{ for(var _x:Number=0;_x<2;_x++){ for(var _y:Number=0;_y<2;_y++){ horizontalBitmap.setPixel(_x,_y,0x000000); verticalBitmap.setPixel(_x,_y,0x000000); } } } private function update():void{ scrollBitmaps(); graphics.clear(); graphics.beginBitmapFill(horizontalBitmap,new Matrix(1, 0, 0, 1, bitmapScroll, 0),true,false); graphics.drawRect(_rect.x,_rect.y-lineThickness,_rect.width,lineThickness); graphics.drawRect(_rect.x,_rect.y+_rect.height,_rect.width,lineThickness); graphics.beginBitmapFill(verticalBitmap,new Matrix(1, 0, 0, 1, 0, bitmapScroll),true,false); graphics.drawRect(_rect.x-lineThickness,_rect.y-lineThickness,lineThickness,_rect.height+(lineThickness*2)); graphics.drawRect(_rect.x+_rect.width,_rect.y-lineThickness,lineThickness,rect.height+(lineThickness*2)); } } } |
It extends UIComponent, so it’s ment to be used inside a Flex application. If you want to use it in Flash, you can change it so it extends Sprite.
And here’s a small example of how to use it. I created a canvas, added some standard components, and added the marching ants selection marquee. I also added some actionscript code to highlight the selected components. For this simple demo, I just show a green glowfilter on top of the selected components.
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <?xml version="1.0" encoding="utf-8"?> <mx:Canvas clipContent="false" addedToStage="creationComplete_handler()" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400" backgroundColor="#FFFFFF" backgroundAlpha="1.0" xmlns:view="be.vip.marchingantsdemo.view.*"> <mx:Script> <![CDATA[ import mx.core.UIComponent; private var selectionRect:Rectangle; private var clickPoint:Point; private function creationComplete_handler():void{ stage.addEventListener(MouseEvent.MOUSE_DOWN, startSelectionDrawing_handler); stage.addEventListener(MouseEvent.MOUSE_UP, stopSelectionDrawing_handler); } private function startSelectionDrawing_handler(evt:MouseEvent):void{ selectionRect=new Rectangle(); selectionRect.x=mouseX; selectionRect.y=mouseY; selectionRect.width=1; selectionRect.height=1; addEventListener(Event.ENTER_FRAME,updateSelection_handler); } private function stopSelectionDrawing_handler(evt:MouseEvent):void{ removeEventListener(Event.ENTER_FRAME,updateSelection_handler); marchingAntsSelectionRect.clear(); selectItems(); selectionRect=null; } private function updateSelection_handler(evt:Event):void{ selectionRect.width=mouseX-selectionRect.x; selectionRect.height=mouseY-selectionRect.y; marchingAntsSelectionRect.rect=selectionRect; } private function selectItems():void{ if(selectionRect!=null){ if(selectionRect.width<0){ selectionRect.x=selectionRect.x+selectionRect.width; selectionRect.width=selectionRect.width*-1; } if(selectionRect.height<0){ selectionRect.y=selectionRect.y+selectionRect.height; selectionRect.height=selectionRect.height*-1; } for (var i:Number=0;i<numChildren;i++){ if(selectionRect.intersects(getChildAt(i).getRect(this))){ getChildAt(i).filters=[new GlowFilter(0x33FF33,1,3,3,4,1)]; }else{ getChildAt(i).filters=[]; } } } } ]]> </mx:Script> <mx:Button x="120" y="91" label="Button"/> <mx:CheckBox x="120" y="121" label="Checkbox"/> <mx:ColorPicker x="120" y="151"/> <mx:ComboBox x="120" y="181"></mx:ComboBox> <mx:Label x="120" y="211" text="Label"/> <mx:NumericStepper x="120" y="237"/> <mx:TextInput x="120" y="267"/> <view:MarchingAntsSelectionRectangle lineThickness="1" x="0" y="0" id="marchingAntsSelectionRect"/> </mx:Canvas> |
And last but not least, here’s what this little demo looks like (just click and drag anywhere to make a selection):
As you see, its very easy to set it up, and it defently adds some value to your application when the user needs to select multiple items by clicking and dragging.
For those of you who are interested in this demo application, you can download it here (in Flex, just click File–>import–>flex project–>from archive file and then point to the zip)
