2006.12.06アレっぽいFLASH
アドのWEBのページを変えました。
http://www.a-ac.jp/web/index.html
有機的な動きをするFLASHは以前から作ってみたかったので。
重くてすみません。。。
もうすこしアレっぽくしたかったのですが、
睡眠時間が。。また今度。
っていうかアレ、モーションランプって言うんですね。
調べるの大変でした。
ちなみにもしアレを作る場合、
今の延長ではない感じですね。
初期値、ランダム値を作る分では使えそうですが、
全体の量が変わらないはず。って所で工夫が要りそう。
またいつか、じっくり考えてみたいです。
これを作るうえで、参考にさせていただいたのが、
先日も紹介した
http://casualplay.net/blog/2005/11/post_3.htmlです。
ソースを公開しているとこが非常に参考になったので、
僕も公開しちゃいます。
GPLではないですけど。
import flash.display.*;
import flash.geom.*;
import flash.filters.BlurFilter;
var w:Number = Stage.width;
var h:Number = Stage.height;
var octaves:Number = 3;
//2つの雲をもつMC作成
var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
//背景側
var bitmapData_1:BitmapData = new BitmapData(w, h, true, 0);
var mc_1:MovieClip = mc.createEmptyMovieClip("mc_1", mc.getNextHighestDepth());
mc.mc_1.attachBitmap(bitmapData_1, mc.getNextHighestDepth());
var randomNum:Number = Math.floor(Math.random()*10);
//前面側(ブレンドモード「加算」)
var bmp:BitmapData = new BitmapData(w, h, true, 0);
var mc_2:MovieClip = mc.createEmptyMovieClip("mc_2", mc.getNextHighestDepth());
mc.mc_2.attachBitmap(bmp, mc.getNextHighestDepth());
mc.mc_2.blendMode = 8;
mc.mc_2.cacheAsBitmap = true;
mc.mc_1.cacheAsBitmap = true;
//二つの動く距離指定
var offset:Array = new Array();
var speed:Array = new Array();
for (var i:Number = 0; i < octaves; i++) {
offset[i] = new Point(Math.random()*w, Math.random()*h);
speed[i] = new Point(0, 1.5);
}
var offset_1:Array = new Array();
var speed_1:Array = new Array();
for (var i:Number = 0; i < octaves; i++) {
offset_1[i] = new Point(Math.random()*w, Math.random()*h);
speed_1[i] = new Point(0,0.5);
}
var rdm:Number = Math.random()*1000;
//var clr:ColorTransform = new ColorTransform(1.5, 1.5, 2, 1, 0, 0, 0, -30);
//mcをビットマップ化したもの
var myBitmapData:BitmapData = new BitmapData(w, h, false, 0x00FFFFFF);
myBitmapData.fillRect(new Rectangle(0, 0, w,h), 0x00000000);
//mcをビットマップ化したものに閾値をかけたもの
var myBitmapData_1:BitmapData = new BitmapData(w, h, true, 0x00FFFFFF);
var mc_1:MovieClip = this.createEmptyMovieClip("mc_1", this.getNextHighestDepth());
mc_1.attachBitmap(myBitmapData_1, this.getNextHighestDepth());
myBitmapData_1.fillRect(new Rectangle(0, 0, w,h), 0x00000000);
var translateMatrix:Matrix = new Matrix();
var myColorTransform:ColorTransform = new ColorTransform();
mc_1.cacheAsBitmap = true;
//ぼかし
var blurX:Number = 2;
var blurY:Number = 2;
var quality:Number = 2;
var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
var filterArray:Array = new Array();
filterArray.push(filter);
mc_1.filters = filterArray;
this.onEnterFrame = function():Void {
for (i = 0; i < octaves; i++) {
offset[i].x += speed[i].x;
offset[i].y += speed[i].y;
offset_1[i].x -= speed_1[i].x;
offset_1[i].y -= speed_1[i].y;
}
bmp.perlinNoise(w/3, h/2, octaves, rdm, false, true, 0, true, offset);
bitmapData_1.perlinNoise(w/3, h/2, octaves, rdm, false, true, 0, true, offset_1);
//mcの取り出し
myBitmapData.draw(mc, translateMatrix, myColorTransform, null, null, false);
//mcの単純色化(背景白)
myBitmapData_1.threshold(myBitmapData, new Rectangle(0, 0, w, h), new Point(0, 0), ">=", 0xFFCCCCCC, 0xFFFFFFFF, 0xFFFFFFFF, true);
//mcの単純色化(白で無いとこは赤)
myBitmapData_1.threshold(myBitmapData_1, new Rectangle(0, 0, w, h), new Point(0, 0), "<", 0xFFFFFFFF, 0xFFFF0000, 0xFFFFFFFF, true);
//bmp.colorTransform(bmp.rectangle, clr);
};
もうちょいスマートなやり方、
いい変数名がありそうなのはご愛嬌ということで。
原理的には
流れる雲でやっている、perlinNoiseのスクロールを2つ重ねて
1つのMCの中に入れます。
このとき、上のビットマップにフィルタで「加算」をかけます。
そうやって出来たMCを閾値で分けます。
グレー50%以上なら黒、以下なら白
みたいな感じでチョコチョコ調整しながら、
この位?と思う値にして色をつけます。
閾値でわけると、なかりギジャギジャな見た目になりますので、
適当にぼかします。
動き方とかは適度に調整しました。
という具合で。
ステージサイズにフィットしますので、
でかくなると多分動かなくなります。
ボカシレベルやらノイズのoctavesやら調整すれば多少いけるかも?
著作権とかはいい刺激を与えて頂いた作者様に習います。
この記事へのコメント
「アレ」というより、
「アメーバ」に見えた櫛部です(笑)
いつも楽しく拝見しております。
師走ということも手伝って
本当にお仕事お忙しそうですが、
お体をお大事にして
がんばってください♪
先日、GooglePageRankの話題がコチラに出ていましたが、
Googleのツールバーを付けているので、私もかなり気になってしまいます。
最後にどうでもいい話をひとつ。
GooglePageRankのPageは、Webページのページではなくて、
グーグルの創設者の1人ラリー・ページ(Lary Page)氏のファミリーネームのページらしいですよ♪
本当にどうでもいいですね・・・
お気遣い頂き、ありがとうございます。櫛部様もお体にはお気をつけ下さいませ。
アメーバ説、鋭いッス!
本当は顕微鏡のイラストを入れたかったのですが。。
睡眠時間が!
ページの由来は実は知ってました。。
でも、どうでもいい情報、僕は大好きです◎
本町東のエレベータ前のカーペットが実は結構気になってます。

