天女散花的效果

利用bitmap,控制pexel的顏色,來達到天女散花的效果。
(我覺得這招有很多玩法, 如按滑鼠就拿掉馬賽克, 做法是底層放一張美女圖, 然後上層幾個重點部位用著色的bitmap蓋住,
使用者在著色的bitmap上click時,就用這招來隨機將pixel變透明, 那馬賽克就漸漸消散了..XD )

(在canvas上按滑鼠左鍵..)
demo:http://imlab.cs.nccu.edu.tw/~pie/spray.swf

同樣的效果其實用隨機drawCircle其實也做的到, 但每個shape都是會佔記憶體的display object, 所以可想而知效能會隨著shape增加而遞減. 用bitmap的pixel來做特效則沒有效能的問題.
此外注意到下面這行:
bmp.filters = [new BlurFilter(2, 2, 3)];
若拿掉上面blurFilter, 這些點將不會那麼萌... XD


<br />package redbug.draw<br />{<br /> import flash.display.Bitmap;<br /> import flash.display.BitmapData;<br /> import flash.display.Sprite;<br /> import flash.display.Stage;<br /> import flash.events.Event;<br /> import flash.events.MouseEvent;<br /> import flash.filters.BlurFilter;<br /> <br /> public class SprayPaint extends Sprite<br /> {<br /> private var canvas:BitmapData;<br /> private var color:uint;<br /> private var size:Number = 50;<br /> private var density:Number = 50;<br /> <br /> var parentStage:Stage;<br /> <br /> public function SprayPaint(s:Stage)<br /> {<br /> init(s);<br /> }<br /> <br /> private function init(s:Stage):void<br /> {<br /> parentStage = s;<br /> canvas = new BitmapData(parentStage.stageWidth, parentStage.stageHeight, true, 0x00000000);<br /> var bmp:Bitmap = new Bitmap(canvas);<br /> bmp.filters = [new BlurFilter(2, 2, 3)];<br /> addChild(bmp);<br /> <br /> parentStage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);<br /> parentStage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);<br /> }<br /> <br /> private function onMouseDown(event:MouseEvent):void<br /> {<br /> color = Math.random() * 0xffffff + 0xff000000;<br /> addEventListener(Event.ENTER_FRAME, onEnterFrame);<br /> }<br /><br /> private function onMouseUp(event:MouseEvent):void<br /> {<br /> removeEventListener(Event.ENTER_FRAME, onEnterFrame);<br /> }<br /><br /> private function onEnterFrame(event:Event):void<br /> {<br /> for(var i:int = 0; i < density; i++)<br /> {<br /> var angle:Number = Math.random() * Math.PI * 2;<br /> var radius:Number = Math.random() * size;<br /> var xpos:Number = mouseX + Math.cos(angle) * radius;<br /> var ypos:Number = mouseY + Math.sin(angle) * radius;<br /> canvas.setPixel32(xpos, ypos, color);<br /> }<br /> }<br /> }<br />}<br /><br />