yukku++

[SWF] DistortImageTest.swf

Flash Player 9 が必要です。

Matrix クラスを使えばどんな形にでもなると思ったけど、台形変形は一筋縄には行かないのね。
ってわけでいろんな人のブログのエントリーを見るうちに DistortImageクラス にたどり着く。
リンク先の demo より、四角形の四頂点を自在に扱って、変形が出来るようになるクラス。
原理としては四角形を三角形に分割してどーのこーのしているらしい。
下部のスライドバーで分割数を変更できるので、その様子がわかる。
もとは Sandy という3Dを表現するためのクラス群のひとつだったらしいのだが、最新版には含まれていなかった。
何かに統合かなんかされたのだろうか？ってか Sandy のサンプル見てるとすごいな…。
下手すると Flash だけで初期のプレステくらいのゲーム作れちゃうんじゃないか…？
3Dにはまだクビを突っ込んでないけど(突っ込めるほどスキルはないが)やってみたいな。
さて、長くなったがテストサンプルとソース。これもサンプルのソースを参考。
頂点に mx:button をそのまま利用でカコワルイ。画像はウチのねこちゃん。
四頂点を設定するだけで変形できるからすごく簡単だなぁ。
あと、せっかくフルスクリーンも試したかったのに、SWFだけで設定できないみたい。
HTMLに埋め込んで、タグの allowFullScreen を true にしないとダメみたい。
マンドクセー。ので、Enter を押してもフルスクリーンになりません。エラー出ます。
保留ってことで。

// @Main.as
import mx.controls.*;
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import DistortImage;

[SWF (backgroundColor = "#FFFFFF", width = "640", height = "480", frameRate = "12")]
[Embed(source = 'assets/testimg.jpg')]
private var myImg:Class; 
private var bmp:Bitmap = new myImg();
private var shape:Shape = new Shape();
private var di:DistortImage = new DistortImage(320, 240, 2, 2);

public function Init():void
{
	stage.addChild(shape);
	// ついでにフルスクリーンモードのテストも兼ねておこう。
	stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
}

private function keyDown(evt:KeyboardEvent):void
{
	switch (evt.keyCode)
	{
		case Keyboard.ENTER:
			stage.displayState = StageDisplayState.FULL_SCREEN
		break;
	}
}

private function onEnterFrame():void
{
	shape.graphics.clear();
	shape.graphics.lineStyle(1, 0xEEEEEE, 0.3);
	// setTransform を使って四頂点を point で指定するだけで変形できる
	di.setTransform(shape.graphics, 
	bmp.bitmapData, 
	// 上から左上、右上、右下、左下の順
	getObjectCenter(tl), 
	getObjectCenter(tr), 
	getObjectCenter(br), 
	getObjectCenter(bl)
	);
}

private function getObjectCenter(btn:DisplayObject):Point
{
	// 各ボタン(ドラッグポイント)の中心を求めて point を返す関数
	var center:Point = new Point()
	center.x = btn.x + btn.width / 2;
	center.y = btn.y + btn.height / 2;
	return center
}

<?xml version="1.0" encoding="utf-8"?>
<!-- @DistortImageTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="Init()" enterFrame="onEnterFrame()" layout="absolute">
    <mx:Script source="Main.as" />
    <mx:Button id="tl" x="20" y="20" width="24" height="24" buttonMode="true" mouseDown="tl.startDrag()" mouseUp="tl.stopDrag()" />
    <mx:Button id="tr" x="340" y="20" width="24" height="24" buttonMode="true" mouseDown="tr.startDrag()" mouseUp="tr.stopDrag()" />

    <mx:Button id="bl" x="20" y="260" width="24" height="24" buttonMode="true" mouseDown="bl.startDrag()" mouseUp="bl.stopDrag()" />
    <mx:Button id="br" x="340" y="260" width="24" height="24" buttonMode="true" mouseDown="br.startDrag()" mouseUp="br.stopDrag()" />
</mx:Application>

[SWF] MotionDetector 0.0.1

Flash Player 9 が必要です。

・必要なもの：

• Webカメラ
• 多少のマシンスペック

・遊び方： 左のウィンドウがそれぞれ、

• 左上：カメラの映像
• 左下：動いた場所が白く表示される
• 右上：背景に無いものを抽出
• 右下：背景に設定された映像

右の設定はそれぞれ、

• BlurDegree：検出の輪郭の曖昧さ
• DetectionAccuracy：オブジェクト抽出の精度

となっています。
一度、右下の[CaptureBG]のボタンをクリックして背景を決定します。
すると、右上には背景には無かった物体のみを抽出します。
まぁ、テキトーにいじればなんとなく意味は分かるはず。
基本的には映像を表示するだけのものなので他に機能はありません。
カメラとBitmapData周りの勉強中…。
今度はちょっとでもゲームっぽいのを作りたい。