キテレツ荘

大阪てら子に行ってきました。
寺子屋タラコさんではなくFLASHerの勉強会イベントの方です。

大阪てら子は世界のSaqooshaさんをはじめ、
日々俺が読んでるFLASHerブログの主たちがぞろぞろ参加している
魑魅魍魎の異世界の雰囲気がぷんぷん漂う勉強会で、
とても一人では行けないと思い悩んでたんですが
STARRYWORKSのキム兄さん（俺のFlash師匠）が誘ってくれたのでこれ幸いと行ってきました。

今回のテーマが「webカメラで遊ぼう！」だったので、新しい「動体検知」作品と
プラスおまけで前の「ちらしの裏」（未完成だけど）を持っていきました。

で、作品発表してきました。
ずーーーーーっとおなかグルグルゆーてました。

「ちらしの裏」は前の記事を参考にしてもらうとして、新しい動体検知作品の解説を簡単にしておきます。

http://www.a-knot.sakura.ne.jp/works/cameraui/cameraUI.html
要webカメラ。

テーマは「SF映画に出てくるようなユーザーインターフェイス（UI）をwebカメラの動体検知を使って実現できないかな～」的画像ビューアーです。

• 使い方：
• [最初]：画面の前で両手を適当に動かしてください。そのうち認識します。
• [画像選択画面]：右ポインターを動かし画像を選び、左ポインターを一番上のエリアに上げると画像が選択されます。
• [画像詳細画面]：画像の右上と左下にポインタを持っていくと画像を持つことができます。多少、傾けたり引き伸ばしたりできます。元の画面に戻るときはポインタを左下、右下に持っていってください。

まぁやってみると分かりますが、慣れるまで難しい…。バグ多いし。
適時修正していきます。

webカメラない人用に動画とってみました。こんな感じ。
※「demo」みたいなメッセージは無視したらいいんちゃうかな。

[ちょっとだけ解説]
動体検知のあたりは定番の方法です。
※ちょっと会場の明るさにあわせて感度を変更できるよう
裏で仕込んでます…。

ポインタはwebカメラの左右の情報をコピーしたBitmapDataから
動いている箇所（動体検知で白くなる部分）の矩形を取得し、
その中心の何コマかの平均をとっています。

//急遽追加した閾値変化機能。ボタン押すごとに閾値が変化。動きが悪いときにどうぞ
var shikii_a:Array = new Array(0xff555555,0xff444444,0xff333333,0xff222222,0xff111111);
var shikiiArray_num:uint=0;
stage.addEventListener(KeyboardEvent.KEY_UP,shikiiChange);

function shikiiChange(e:KeyboardEvent){
if(shikiiArray_num<4){
shikiiArray_num++;
}else{
shikiiArray_num = 0;
}
}

function cameraAndPointerCol(e:Event){
if(right_leng_flg ==true &&left_leng_flg==true&&first_flg==false){

//ポインタの平均値がとれるまで待ち状態。とれたら「OK」表示
message_sp.gotoAndPlay("ok");
//そっから画像読み込みスタート
start_func();
first_flg=true;

}
//カメラ映像をドロウ
defaultCamera_bmd.draw(cameraVideo);
//現在のビデオをまずコピー
ugokiCamrera_bmd.copyPixels(defaultCamera_bmd,rect,pt);
//ブレンドモードDIFFERENCEで以前記憶した記録と動いた箇所の差分をチェック
ugokiCamrera_bmd.draw(beforeCamera_bmd, null, null, BlendMode.DIFFERENCE);
//閾値以上を白色に変化（動体検知）
ugokiCamrera_bmd.threshold(ugokiCamrera_bmd, rect, pt, ">“, shikii_a[shikiiArray_num], 0xffffffff);
//次のブレンド用にビフォーを記録
beforeCamera_bmd.copyPixels(defaultCamera_bmd,rect,pt);
//動体検知の左側をコピー
leftCamera_bmd.copyPixels(ugokiCamrera_bmd,left_rect,pt);
//動体検知の右側をコピー
rightCamera_bmd.copyPixels(ugokiCamrera_bmd,right_rect,pt);

//動体検知の左側の動いている場所を矩形化
leftMove_rect = leftCamera_bmd.getColorBoundsRect(maskColor, icchiColor, true);
//動体検知の左側の動いている場所を矩形化
rightMove_rect = rightCamera_bmd.getColorBoundsRect(maskColor, icchiColor, true);

pointerCal(); //ポインタの位置計算
selectPointSencer(); //ポインタの選択してるもののチェック

}

つかんだときに画像を回転、拡大するのは、この前勉強した三角関数が役に立ちました。趣旨は同じで距離と角度を随時計算しています。

//つかんだ画像の拡大縮小回転計算を初期化
function detailBigImg(){
detaiMode_flag = true; //つかんでいるモード
WW = 800 * bigImg_sp.scaleX; //800pxの幅の画像
HH = 470 * bigImg_sp.scaleX; //470pxの高さの画像
def_dg = (Math.atan( WW / HH)) * 180 / Math.PI; //その画像の対角線の角度を求める(これがデフォルト角度)
bigImg_sp.y = 0;
bigImg_sp.x = 0;
stage.addEventListener(Event.ENTER_FRAME,detailCal);
}

function detailCal(e:Event){
leftX = leftPointer.x; //左ポインタx
leftY = leftPointer.y; //左ポインタy

rightX = rightPointer.x; //右ポインタx
rightY = rightPointer.y; //右ポインタy

bigImg_cont.x = rightX; //画像のx
bigImg_cont.y = rightY; //画像のy
//三平方の定理で元のサイズと現在のポインタの対角線の長さの比を出して拡大縮小
bigImg_cont.scaleX = bigImg_cont.scaleY = Math.sqrt(Math.pow(rightX-leftX,2) + Math.pow(rightY-leftY,2)) / Math.sqrt(WW * WW+ HH * HH);

//現在のポインタの対角線の角度を求める
var dg:Number = (Math.atan( (rightY – leftY ) / (rightX – leftX ))) * 180 / Math.PI;
//そこからデフォルトの角度を差し引いて現在の角度に置き換える
bigImg_cont.rotation = dg -(90 – def_dg);
}

だいたいこんな感じ。ソースはここ置いときますね。

いやー、はじめてのてら子でホント逃げ出したいぐらい緊張してたんですが
皆さんめーちゃいい人で、
気遣いフォローやら業界アドバイスやらいろいろお話聞かせてもらいました。
とってもいい刺激をもらえたので、
これからもモニョモニョ作っていきたいと思います。
ありがとうございました。