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


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

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

・カメラ映像はデフォルトだと左右反転してしまう
これだとちょっと気持ち悪いので、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

試しにCheckmateをやろうと思ってはまったのでメモ。

ローカル上で普通に動いたので、「いざ、わだふる」と思いつつコードをアップすると、セキュリティサンドボックスが・・・。

どうやら、外部ドメイン画像をBitmapDataにしてdrawするとでるみたい。
ちょっと調べてみたら、ドンピシャの記事（_level0さん）があったので、助かりました！
正確には、記事内ので紹介されていたこれに助けられました。
要は、外部ドメインの画像に対して、LoaderContextをtrueにしなさいよってこと。

var context:LoaderContext = new LoaderContext(true);　//ここ！
loader = new Loader();
loader.load( new URLRequest("http://swf-dev.wonderfl.net/static/assets/checkmate04/tree.jpg"), context );　//第２引数でLoaderContextを指定
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, complete);

で、やっとアップできたのがこれ。




2009年10月19日 00:21

ずーっとできなくてもやもやしてたけど解決したのでメモ！ 2009年7月 8日 23:58

色々いじってたら着地点を見失った・・・。
捨てようかと思ったけど、一応ワンダホーに投稿してみた。
ほぼ、メモ置き場になってる・・・。



数字はSpriteにTextFieldをaddChildして、数字の中心点がSpriteの中心に来るように調整しているんだけど（50,51行目あたり）、どうもずれる。

強引に118,119行目のように、ステージの中央に表示されるように調整したけど、
もっとスマートな方法調べないと。
テキストの扱いにいまいち慣れない・・・。




2009年6月16日 22:50

引き続き、書籍の練習としてルーレットを作ってみた。
ソース内の　private var numberObj:Number = 10;　でルーレットの個数を決めれます。
ただ、円の大きさは数が増えた場合に重なってしまうので、
private var circleSize:Number = 45;　を小さくして調整してください。（＞誰）


色々つまづいた点をメモ。


・textFieldのマウスカーソルが指にならない！！

textField.buttonMode = true;　でいけると安易に考えてたんだけど、全然なんないでやんの。指。
で、ここの記事下部にtextFieldがaddChildされてるSpriteのmouseChildrenをfalseに設定してやれば、
親の設定が有効になるとのこと。
この設定は結構忘れがち・・・。



・textFieldが大きすぎて、STARTボタンの範囲が中心円からがっつりはみ出した！！

まぁこれは初歩的なミスで　STARTボタンのオブジェクト.autoSize = TextFieldAutoSize.LEFT;　
でテキストの長さに合わせてtextFieldを伸縮して解決しました。


次は時計かなー



2009年6月 1日 11:37

前回のを改造して、真ん中のballにマウスオンで周りのballが集まってくるように変更。
中心のballから周囲のballの距離は(x,y)=(r*cosθ,r*sinθ)なので、
θ=2π/（ballの個数）でそれぞれのx,yを計算した。
数学も子供の頃からこんな感じに可視化して勉強すればおもしろいのにな。





2009年5月28日 23:54

またまたサンプルをWonderflに投稿。
この形式でひとまずやっていこう！




2009年5月26日 23:23

軽くはまったのでメモ。

var ball:Sprite = new Sprite();
            ball.graphics.drawCircle(50, 50, 50);
            ball.graphics.beginFill(0x000000);
            ball.graphics.endFill();
            addChild(ball);

全然addChildできないじゃん。
と思ったら、drawCircleとbeginFillが逆だった。

var ball:Sprite = new Sprite();
            ball.graphics.beginFill(0x000000);
            ball.graphics.drawCircle(50, 50, 50);
            ball.graphics.endFill();
            addChild(ball);

これでできた。
いやー知らなかった・・・。



2009年5月26日 22:00

サンプル作成にはもってこいのサービスすぎだす。
ってことでステージクリックでサークルできるようにした。
けど、インスタンスが増えるとパフォーマンスが遅くなるので、改善必要だす。




2009年5月20日 17:39