mattodesign blog: Worksアーカイブ

WEBCAMで動体検知やってみた

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

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

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

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

プライベート作品を1本公開しました。

仕事終わってから粛々と長いこと作ってきたサイトをやっと公開しました。
細かい調整できてないけど形はできたので、まぁいいか。

いやー本当に長かった・・・。

1年半前にオカンの写真サイトFaELを作って、ちょっと更新面倒だし飽きてきたから、
思い切って作り直すかって感じで始めたのがきっかけ。

ちょうどActionScriptの勉強中だったってこともあって、どうせやるならフルスクリプトでやってやろかなと思い、超シンプルな作りを目指しました。

作りは単純で、XMLに記述した写真を読み込むだけ。
記述するXMLはこんな感じ。

    //
    <photo>
         <tags>SKY</tags>
         <src>photo/ph050.jpg</src>
        <thumbnail>photo/ph.s50.jpg</thumbnail>
    </photo>
    //
    //
    <photo>
         <tags>ANIMAL</tags>
         <src>photo/ph051.jpg</src>
        <thumbnail>photo/ph.s51.jpg</thumbnail>
    </photo>
    //
    //
    <photo>
         <tags>LANDSCAPE</tags>
         <src>photo/ph052.jpg</src>
        <thumbnail>photo/ph.s52.jpg</thumbnail>
    </photo>
    //

素人ながら「簡単じゃん」と思ってやり始めたら、サムネールの配置とか、カテゴリのソート機能とか、ブラウザリサイズとかマウスホイールの実装とか色々つまずいた・・・。

ただ、意地でもFLAには一切の記述なしで作りたかったから、メインタイムラインには何も置いてません。

おかげでだいぶAS3を理解できました。
ソースはぐちゃぐちゃだけれども。

こんな調子で色々作っていきたいと思います。

2009年10月 4日 22:37

LET'S MOVE!!

先月はこれ作ってました。WEBカメラを使った遊びゲームです。
遊び方は、

1.STARTを押すと自分の顔が画面に映し出されます。
2.映し出された画面がどんどん小さくなっていきます。
3.動くことによって枠が徐々に大きくなります。
4.一定の大きさまで大きくできたら必死な写真が撮られて終わり。

みたいなモーション検知をやってみました。

最初は画面の中の動画をモーション検知で制御とか色々考えてたけど、
やりかたわからず挫折・・・。

んで、今後の課題は、

1.addChildされた不要なBitmapDataの削除
2.ENTER_FRAME以外でのBitmapDataの制御
3.ガベージコレクション

ってな感じでまだまだ色々ある・・・。

カメラの表示（左右反転）、モーション検知用のBitmapDataだけで３枚同時に重ねてるから
動作重過ぎ・・・。

ちなみにMac環境でしか検証してません。

2008年11月10日 23:34

時計 ver.3.0

またまた改良してみました。

・ユニクロックっぽく。５秒ごとにびょんびょんしてみた。

・こっちは毎秒びょんびょんしてみた。（こんな時間が見にくい時計も珍しい）

とまぁ、色々いじくって遊んでみた訳だけど、
こんな程度の動きでも色々とつまずきました。
もっと勉強しないといかんなこれは。

とりあえず時計はこんなもんにしといて、
AS3の勉強進めるか。
今年はバナーも考えなきゃなー。（つーかサイトすげーな・・・）

2008年9月30日 01:09

時計 ver.2.0

とりあえず、１秒ごとにランダムに色が変わってく感じに変更。
でも文字が白だから背景が白になったとき何時かわからん・・・。
FFFFFF以外でランダムに変えてけばいいのか。うーん・・・。
Tweenerで色変えてみたけど改めてライブラリのすばらしさを実感しました。
今後、もっと改良していく予定。

2008年9月24日 23:55

時計(TeraClock)

コレ見ながら作ったんだけど、すげー簡単に作れるの！
すばらしいです。
簡単なサンプルしかやってないけど、
時間あるときに、ユニクロックみたいな動きを付けてみようかなー。

2008年9月23日 00:30

待ち受け作成

携帯の待ち受けを作ろうと思ってここ数日苦労してた。

ランダムに色が変わっていくだけのサンプルを作ろうと思って、
「楽勝だな」と思ってたら、実際きれいに色が変わっていかないし、
実際できたのがこれだった・・・。

ランダムにグラデーションしていくのを作りたかったんだけど、
知識不足で結局R→G→Bに落ち着きました。
時間あるときに改良してみます。

多分いらんけど欲しい人はどうぞ。
ちなみにDoCoMo SO906iCS用に作ってます。

あ、自分は別にこれを壁紙にしてません。
しょぼいからです。
（じゃあ配布すんな・・・。）