Webカメラからの入力に対してActionScriptでエッジ検出を行う

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。

KBMJの佐藤です。

今回はActionScriptを使って、

Webカメラからの入力に対してエッジ検出を行ってみます。

ソースコード

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.media.*;
    import flash.filters.*;

    public class Motion extends Sprite {
	private var bd:BitmapData;
	private var video:Video;
	private var bitmap:Bitmap;

	public function Motion(){
	    // (1)
	    bd = new BitmapData(640, 480, false, 0x00000000);
	    bitmap = new Bitmap(bd);
	    addChild(bitmap);
	    addEventListener(Event.ENTER_FRAME, onEnterFrame);

	    // (2)
	    var camera:Camera = Camera.getCamera();

	    if(camera != null){
		video = new Video(640, 480);
		video.attachCamera(camera);
	    }
	}
        public function onEnterFrame(evt:Event):void {
	    // (3)
	    bd.draw(video);
	    var conv:ConvolutionFilter;
	    var edges:Array = [0, -1, 0,
                               -1, 4, -1,
                               0, -1, 0];
	    convFilter(bitmap, edges, 1);
        }
        private function convFilter(dispObj:DisplayObject, m:Array, d:int):void{
	    // (4)
	    var conv:ConvolutionFilter = new ConvolutionFilter(3, 3, m, d);
	    dispObj.filters = [conv];
	}
    }
}

コード解説(1)

bd = new BitmapData(640, 480, false, 0x00000000);
bitmap = new Bitmap(bd);
addChild(bitmap);

ここではWebカメラからの入力を描画するためのBitmapDataオブジェクトを生成しています。

ActionScriptではBitmapDataオブジェクトを用いることによって、

ビットマップを直接操作することができます。

コード解説(2)

var camera:Camera = Camera.getCamera();

if(camera != null){
    video = new Video(640, 480);
    video.attachCamera(camera);
}

Cameraオブジェクトを取得し、

そこからの入力をVideoオブジェクトに割り当てています。

コード解説(3)

    bd.draw(video);
    var conv:ConvolutionFilter;
    var edges:Array = [0, -1, 0,
                       -1, 4, -1,
                       0, -1, 0];
    convFilter(bitmap, edges, 1);

Videoオブジェクトの内容をBitmapオブジェクトに描画しています。

畳み込みフィルタの内容を配列で作成し、

Bitmapオブジェクトに設定しています。

コード解説(4)

    // (4)
    var conv:ConvolutionFilter = new ConvolutionFilter(3, 3, m, d);
    dispObj.filters = [conv];

ConvolutionFilterオブジェクトを生成して

畳み込みフィルタの配列を適用しています。

filtersとあるように、フィルタは複数設定することができます。

さいごに

ActionScriptはWebブラウザ上で実行でき、

なおかつリッチなプレゼンテーションが得意なので、

グラフィック処理を色々と試してみるには良いプラットフォームだと思います。

皆さんも是非試してみて下さい。

個人ブログ 拡張現実ライフ