オーロラを作成
Flexでオーロラを作成しました。
http://moeten.info/flex/20080406_perlinNoise/bin-release/main.html
パーリンノイズっておもしろいね。
これで炎とか雲とかが作れるようです。
参考ページ
雲の作成が書いてあります。またColorTransformも組み合わせて使用しているので要チェキです。
http://casualplay.net/blog/2005/11/post_3.html
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundColor="0xffffff" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ //初期化関数 private function init():void{ //パーリンノイズ用画像作成 var bmp_data : BitmapData = new BitmapData( 128 , 128 , true , 0xFFFF8000); var offset:Array = [ new Point(0,0), new Point(0,0), ]; var rand:Number = Math.floor(Math.random() * 0xFFFF); this.addEventListener(Event.ENTER_FRAME ,function (e:Event):void{ //x.yにちょい移動させる offset[0].x += 2; offset[1].y += 5; //パーリンノイズ作成 bmp_data.perlinNoise(32 ,128 , 2 , rand , false , true , (8|4|2|1) , false , offset); myImage.source = new Bitmap( bmp_data ); }); } ]]> </mx:Script> <mx:Image id="myImage" x="34" y="21" width="512" height="512"/> </mx:Application>
パーリンノイズを使った焼けるエフェクト
http://moeten.info/flex/20080406_fireTrans/bin-release/main.html
参考ページ
紙が燃えていくようなトランジッション
http://casualplay.net/blog/2006/03/_thresholdperlinnoise.html
ポイントとなるのは、先日作ったパーリンノイズに閾値で2値化させそれをマスクに使用するところです。
プラスとして、焼けた感じを出すのに、blurとglowフィルタを追加しています(マスクの下に別途表示)
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFA9A9, #FFFFFF]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import flash.display.*; import flash.filters.*; import flash.geom.*; private var w:Number = 360; private var h:Number = 240; private var thr:Number = 0x000000; private var rdm:Number = Math.floor(Math.random()*10000); private var bmp:BitmapData = new BitmapData(w+20, h+20, false, 0); private var mask_bmp:BitmapData = new BitmapData(w+20, h+20, true, 0xFFFFFFFF); private var blur:BlurFilter = new BlurFilter(1.2, 1.2, 2); private var glow:GlowFilter = new GlowFilter(0x4C2E00, 100, 8, 8, 4, 2, true, true); private function init():void{ // -- アルファチャンネルマスクとして使用するため、cacheAsBitmapを有効に。 myImageOrg.cacheAsBitmap = true; myImageMask.cacheAsBitmap = true; //マスクの指定 myImageOrg.mask = myImageMask; burnImage(); //このフィルタを適応すると焼けた色が出せる myImageFire.filters = [blur,glow]; } private function burnImage():void{ //雲模様画像生成 createPerlinNoise(); this.addEventListener(Event.ENTER_FRAME , function():void{ if (thr > 0xCFFFFF) { mask_bmp.fillRect(mask_bmp.rect, 0xFFFFFFFF); thr = 0x000000; }else{ //少しずつ閾値をあげる thr += ( 0xFFFFFF - thr ) * 0.03; mask_bmp.threshold(bmp, bmp.rect , new Point(0, 0), "<=", thr, 0, 0x00FFFFFF , false); } //画像に反映表示 myImageMask.source = new Bitmap( mask_bmp); myImageFire.source = new Bitmap( mask_bmp); myImageThr.source = new Bitmap( mask_bmp); }); } //雲模様画像生成 private function createPerlinNoise():void { rdm = Math.floor(Math.random()*10000); bmp.perlinNoise(100, 100, 5, rdm, false, true, 1, true); //画像に反映表示 myImagePerlin.source = new Bitmap( bmp ); } ]]> </mx:Script> <mx:Image id="myImageOrg" x="10" y="10" source="06.jpg" width="474" height="500"/> <mx:Image id="myImageMask" x="10" y="10" width="474" height="500"/> <mx:Image id="myImageFire" width="474" height="500" x="10" y="10"/> <mx:VBox x="492" y="10"> <mx:Label text="背景画像"/> <mx:Image width="206" height="140" source="06.jpg"/> <mx:Label text="パーリンノイズで雲作成"/> <mx:Image width="206" height="137" id="myImagePerlin"/> <mx:Label text="閾値で2値化"/> <mx:Image width="206" height="143" id="myImageThr"/> </mx:VBox> </mx:Application>