前にもやったことのある動体検知ですが、認識率悪かったり最適化できてなかったりと改善点あったので、もっかいやってみた。


動体検知して何しようと思い、最初は動いた部分だけパーティクルで崩れるようにしてたのですが、いまいち良い表現にならず、流行りのみかんを出してみることにしました。
虫みたいできもい。

以下は備忘録的なメモです。

・カメラ映像はデフォルトだと左右反転してしまう
これだとちょっと気持ち悪いので、Matrixを使って鏡みたいに反転させた。
まずscaleを-1倍して左右を反転。そして、対象のビットマップの幅分をx方向に移動させてやればOK。

// カメラ映像を左右反転してdrawする
_mat = new Matrix( -1, 0, 0, 1, _videoBmd.width);
_videoBmd.draw(_video, _mat);

・動体検知
要は、1フレーム前の映像と現在の映像の差異をBlendMode.DIFFERENCEで調べて、動きがあった部分のピクセルを0xFFFFFFFFで表示。
0xFFFFFFFFで表示されたピクセル情報を_particleListに格納してパーティクルを発生させている。

動体検知の映像は表示されずに、裏で処理してるので、見たい場合は_oldBmdをaddChildしてやれば見れます。

動体検知部分のソースがこちら。
色々な方のソースを参考にしているので、他にもいぱい方法はあるはず！

// 動体検知
_oldBmd.copyPixels(_videoBmd, _videoBmd.rect, _pt);
_oldBmd.draw(_beforeBmd, null, null, BlendMode.DIFFERENCE);
_oldBmd.threshold(_oldBmd, _oldBmd.rect, _pt, ">", 0xFF222222, 0xFFFFFFFF);
_beforeBmd.copyPixels(_videoBmd, _videoBmd.rect, _pt);

// 動体検知情報を_particleListに格納
var margin:int = 20;
for (var x:int = 0; x < _oldBmd.width; x = x + margin) {
    for (var y:int = 0; y < _oldBmd.height; y = y + margin) {
        if (_oldBmd.getPixel(x, y) == 0xFFFFFF) {
            _p = new Particle();
            _p.x = x;
            _p.y = y;
            _particleList.push(_p);
        }
    }
}

と、2009年も残すところあと3日！！
よいお年を！！


来年はもっとブログ更新するようにしよ。





2009年12月28日 10:41

久々にWonderflしました。
今回は音とパーティクル連動の勉強です。

本当はマウスホイールで早送り・巻き戻しできる擬似DJアプリ（？）作ろうと思ったのですが、
音の概念が深く理解できず挫折・・・。
Flashでもっと簡単にSoundを扱えるようになってから挑戦します。

で、今回できたのがこれ。


以下個人的メモ。

・入力したテキストのビットマップへの変換

// 入力したテキストをビットマップ変換用のテキストフィールドに入れる
var tf:TextField = new TextField();
tf.text = _tf.text;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.setTextFormat(new TextFormat("_sans", 10, 0xFFFFFF));

// 入力したテキストを一時格納用ビットマップデータにdraw
var matScale:Number = 50 / tf.length;
var mat:Matrix = new Matrix(matScale, 0, 0, matScale, (STAGE_WIDTH - tf.width * matScale) >> 1, (STAGE_HEIGHT - tf.height * matScale) >> 1);
_bmd.draw(tf, mat);

工夫点としては、入力した文字数に応じて、表示ビットマップ（パーティクル文字）の大きさを変えているところです。
単純に1文字の場合最大Scaleを50として、あとは入力文字数でScaleを割っているだけです。
あと、色々な方のソースを見て勉強になったのが、ビット演算（ビット単位シフト演算）。
 (STAGE_WIDTH - tf.width * matScale) >> 1は (STAGE_WIDTH - tf.width * matScale) /2と同意。
つまりx >> y は x / (2^y)ということです。
詳しくはこちら。

・波形データをパーティクルの動きに変換

// 波形データを取得
SoundMixer.computeSpectrum(bytes, false, 0);

// 波形データをパーティクルの動きに変換
_canvas.lock();
_canvas.colorTransform(_canvas.rect, COLOR_TRANSFORM);
_canvas.applyFilter(_canvas, _canvas.rect, _pt, _filter);

for (var i:int = 0; i < CHANNEL_LENGTH; i++)
{
    xrf = bytes.readFloat();
    yrf = bytes.readFloat();
   
    for (i = 0; i < _particleArray.length; i++)
    {
        p = _particleArray[i];
        setX = p.x + Math.round(xrf * Math.random() * 300);
        setY = p.y + Math.round(yrf * Math.random() * 300);
        _canvas.setPixel32(setX, setY, p.c);
    }
}
_canvas.unlock();

結論から言うと、上記ソースでは理想の動きが出ませんでした。
パーティクルの動きをよく見ると分かるのですが、右上と左下にパーティクルが散りません。
setX、setYの式が要調整です。時間見つけてやってみます。

あと、colorTransformの挙動がよくわかりませんでした。
パラメータはトライ＆エラーでチェックしながらやってるので、いい加減です。
なによりOKボタン押しまくるとfpsがどんどん落ちてくので、最適化しなきゃなんですが、
知識不足でできませんでした。
まぁ、今後の課題として・・・。

あ、159行目のコメント「// テキストが未入力の場合は"文字を入力してください"を表示」は
「// テキストが未入力の場合は"Wonderfl"を表示」の間違いです。スミマセン＞誰。

  2009年12月11日 00:44

めちゃくちゃ簡単だったので、「iPhoneテンプレートfor MT」ってのを使ってブログをiPhone用に最適化してみた。
導入方法はダウンロードファイル内の「readme.txt」に最高に詳しく書かれています。

これが導入後のブログトップ。




これが記事ページ。



唯一惜しいのが、iPhoneからのアクセスを自動判別している訳ではないので、
直接iPhone用のURLを見る必要がある。
URLはこれ。
http://mattodesign.com/blog/i/
（ユーザーエージェントをサーバで判断すればいけるんだろうか？） 2009年12月 1日 17:35