< | 前の5日分>

teraco23でマトリックスな格闘をしてきた。

FLASH勉強

2009年07月02日

大阪てら子 23 「みんなで作る特別授業」行ってきました。
武田鉄矢ばりに参加者全員が先生になるという勉強会です。

今回は、怖くて手を出せなかった「マトリックス」を元に画像変形に挑戦してみました。
※アフィン変換や、射影変換と言われる変換方法を理解してから、actionscriptを書きたかったのですが、ちょっと理解不可能だったので、とりあえず、平行四辺形と台形の変形を実現することに力を注いでみた。

平行四辺形な変形

wonderflにUPしてみた


とりあえず、平行四辺形に変形してみた。Matrixのa,b,c,d,tx,tyのプロパティを以下のように設定し、画像に適応すると平行四辺形に変形します。

adobeのデベロッパーセンターに野中さんの記事より
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数

Matrix部分

private function _getTransformMatrix($pt0:Point, $pt1:Point, $pt2:Point):Matrix
{
	/*
	http://www.adobe.com/jp/devnet/flash/articles/matrix_class.html
	a: 水平方向の伸縮率 = 変換後の幅/もとの幅
	b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
	c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
	d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
	tx: 水平方向の移動ピクセル数
	ty: 垂直方向の移動ピクセル数
	*/
	var w:Number = _bmd.width;
	var h:Number = _bmd.height;
	var mat:Matrix = new Matrix();
	mat.a = ($pt1.x - $pt0.x) / w;
	mat.b = ($pt1.y - $pt0.y) / w;
	mat.c = ($pt2.x - $pt0.x) / h;
	mat.d = ($pt2.y - $pt0.y) / h;
	mat.tx = $pt0.x;
	mat.ty = $pt0.y;
	return mat;
}

Matrixを適応する部分

	_canvas.transform.matrix = newMatrix;

※_canvasに画像をaddChildしてます。 ※_canvasはSprite。

台形な変形

wonderflにUPしてみた


平行四辺形な変形は、どう頑張っても台形の変形は実現できません。ということで、三角形を2つ使用して台形を実現させます。
三角形??何故に??という方は以下の画像を!

teraco23_img1.gif

三角形といえど、平行四辺形な変形と同様です。
多分ですが、この三角形はポリゴンと呼ばれるやつなのかもしれない。(推測)

Matrixを適応する部分

	_canvas.graphics.clear();
			
	//分割した1個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix1 );
	_canvas.graphics.moveTo(bP0.x , bP0.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();
			
	//分割した2個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix2 );
	_canvas.graphics.moveTo(bP3.x , bP3.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();

台形への描画は、ちょっと面倒くさいけど、beginBitmapFill とmoveToとlineToを使って描画してます。

上記の理解を元に遊んでみた

その1
その2

三角形の分割数を増やしたりで色んな表現ができそうな気がします。ただし、分割の方法や、ポイントの配置方法などがちょっと難しい。手探り状態なので色々試してみるしかないか。
view source

Publishing source code が便利すぎるかも。

FLASH勉強

2009年06月30日

Flex BuilderにはPublishing source codeというViewSource機能(ソースをHTMLへ変換してプレビューが出来る機能)があって、これが凄い便利です。

Saqooshaさんがソース公開する時によく使われていて、どうやっているんだろう??と調べてみたら、いつも使っているFlex Builderの機能に存在していたという。全く知らなかった。

ViewSourceデモ

ViewSource

今までソース公開にzip化したファイルにリンクという方法でやってたのですが、断然、Publishing source codeで吐き出したHTMLファイルの方が手軽で見やすい。ピックアップしたいソースはjavascriptのSyntaxHighlighterでブログに直に書いて、全体ソースはViewSourceな感じがいいかな。

Publishing source codeの場所

プロジェクト - リリースビルドの書き出し - ソースの表示

1、プロジェクト - リリースビルドの書き出し

publishsourcecode1.jpg

2、リリースビルドの書き出し - ソースの表示

publishsourcecode2.jpg


ActionScriptソースをHTMLへ変換(コンバーター?)なものを探してたわけですが、ちょうどいいもん見つけれた。Flex Builderはやっぱり偉大だ。

Papervision3D 3D座標→2D座標の変換メモ

FLASH勉強

2009年06月11日

pv3dに3D座標→2D座標の変換クラスがあるか探してたのですが、結局見つけることが出来ず途方にくれてたわけですが、
http://www.nabble.com/3D-%3E%3E-2D-coordinates-td14730886.html
こちらにそれらしきソースが!!

以下該当ソース

private function getObj2DCords ( o:DisplayObject3D, camera:CameraObject3D,  offsetX:Number = 0, offsetY:Number = 0 ):Point
{
	var view:Matrix3D = o.view;
	var persp:Number = (camera.focus * camera.zoom) / (camera.focus + view.n34);
	return new Point ( (view.n14 * persp) + offsetX, (view.n24 * persp) + offsetY );
}

サンプルをwonderflに上げてみた。

※CameraType.DEBUGを使ってるので、マウスドラッグや方向キーでカメラが動きます。

3D空間にあるCubeの座標に2D座標の青い円を置いてみた。
これで、3Dオブジェクトに対して、簡単なコメントや「Click!!」とかの文字をつけることが出来そうだ。

大阪てら子 22 「webカメラで遊ぼう!」に参加してきました

FLASH勉強

2009年05月31日

大阪てら子 22 「webカメラで遊ぼう!」に参加してきました。
毎度ながら、スイマセン!的な発表なんですが、今回もスイマセンです。

今回やっておきたかったことは以下の2点。

  • Webカメラで撮った画像を保存。
  • シンプルな動体検知

こんなものを発表しました動画

Webカメラで撮った画像を保存

Flashのみで画像保存はFlash Player9の段階では不可能?みたいなので、サーバー側(php)で保存します。
※Flash Player10からはローカルファイルアクセス機能が出来るようになったので画像保存できるかもしれない。

1、BitmapDataをエンコードしてサーバーへ送信
2、サーバー側で画像保存
※サーバーはローカルにMAMPをインストールした環境を使用しました。(mac 0SX)

Flash→PHPの連携はパラメーターの引き渡しが簡単に出来るAMFPHPを使ってみました。エンコードに関しては、as3corelibよりPNGEncoderを使用しています。

主要部分のASスクリプト

package
{
	import com.adobe.images.PNGEncoder;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.net.NetConnection;
	import flash.net.Responder;
	import flash.utils.ByteArray;
	
	public class Test_amfphp extends Sprite
	{
		public function Test_amfphp()
		{
			//BitmapDataをエンコード
			var bmd:BitmapData = new BitmapData(100,100,false,0x0)
			var byteArray:ByteArray = PNGEncoder.encode(bmd);
			
			//AMFPHPのgateway.phpがある場所
			var gateway:String = "http://localhost/amfphp/gateway.php";
			
			//AMFPHPが返す値の受け皿を設定
			var responder:Responder = new Responder(_onResult,_onStatus);
			
			//つなげる。
			var connection:NetConnection = new NetConnection();
			connection.connect(gateway);
			
			//呼ぶ
			connection.call("PHPクラス名.メソッド名",responder,byteArray,"その他引数1","その他引数2");
		}
		
		private function _onResult($result:Object):void {
			trace("結果_" + $result);
		}
		
		private function _onStatus($status:Object):void {
			trace("ステータス_" + $status);
		}

	}
}

画像保存のphpスクリプト

class PngSave
{
    public function download($image,$dir)
    {
        $fileName = $dir."hae.png"; // ファイル名
        
        //方法1
        $fp = fopen($fileName, 'wb');
        fwrite($fp, $image->data);
        fclose($fp);
        
        //方法2 ブラウザからじゃないと上手くいかない?
        //$im = imagecreatefromstring ($image->data);
        //header('Content-Type: image/png');
        //header("Content-Disposition: attachment; filename=".$fileName);
        //imagepng($im);
        
        return $fileName;
    }
}

ActionScript側からAMFPHPにByteArrayを飛ばした時、$image->dataにデータが入ってます。※$imageと指定してハマりました。
参考:AMFPHP1.9b2でByteArrayをもらう、返す 

シンプルな動体検知

動体検知ですが、検知する場所を決めて、その場所のピクセルの色が一つ前の色と最新の色とで、 どれだけ変化しているか?で判断しています。
今回の場合、画面の左、上、右の3カ所に検知するポイントを置いて、そこのピクセルの色が一定以上変化したかどうか?で動体検知を行いました。

動体検知判断のASスクリプト

package
{
	import flash.display.Sprite;
	
	public class Test_ColorDiff extends Sprite
	{
		public function Test_ColorDiff()
		{
			//古い色と最新の色
			var color_old:uint = 0xFFFFFF;
			var color_new:uint = 0xFFFF00;
			
			//古い色をR,G,Bに分ける
			var color_old_arr:Array = [ 
				color_old >> 16 , 
				color_old >> 8 & 0xFF ,
				color_old & 0xFF ,
				];
			trace("old-R_" + color_old_arr[0]); //255
			trace("old-G_" + color_old_arr[1]); //255
			trace("old-B_" + color_old_arr[2]); //255
			
			//新しいい色をR,G,Bに分ける
			var color_new_arr:Array = [ 
				color_new >> 16 , 
				color_new >> 8 & 0xFF ,
				color_new & 0xFF ,
				];
			trace("new-R_" + color_new_arr[0]); //255
			trace("new-G_" + color_new_arr[1]); //255
			trace("new-B_" + color_new_arr[2]); //0
			
			//R,G,Bそれぞれ古い色と新しい色を比較し、threshold_valueの値以上に差が出たら「動いた」と見なす。
			var threshold_value:Number = 20;
			for(var i:Number = 0;i <= 2;i++ ){
				if(Math.abs(color_old_arr[i] - color_new_arr[i]) > threshold_value ) {
					trace("動いた!");
				}
			}
			
		}
	}
}

てな感じです。

大阪てら子 22 「webカメラで遊ぼう!」の感想

世の中広いわけで、凄いスクリプトを書く人、とても良いアイデアを持っている人を目のあたりにすると、 危機感というか、やべー状態になりました。

ということでこれからも精進していこうと思います。


USKさんが今回の様子をしっかりまとめてくださっています。

大阪てら子 22 「webカメラで遊ぼう!」@trace

それと、トンカさんが同様に動体検知されてました。
てら子に行ってきた!~大阪てら子 22 「webカメラで遊ぼう!」~@キテレツ荘
動体検知方法は、BlendMode.DIFFERENCEで古い情報と新しい情報の差分を取得する方法のようです。その方法は全く思いつかなかった!!

DBD::mysqlのインストールメモ

PHP/システム関連

2009年04月23日

Movable Typeをローカル環境にインストールしようとした時に躓いたのでメモ。

※私のはMac OS10.5.6にMAMPをインストールした環境です。

DBD::mysqlがインストールされてない

ローカルにMovable Typeを解凍&設置し、mt-check.cgiを走らせたところ、

サーバーにDBD::mysqlがインストールされていないか、DBD::mysqlに必要なモジュールがインストールされていません DBIとDBD::mysqlは、MySQLを使ってブログのデータを管理するために必要です。 DBD::mysqlをインストールする場合は、インストール手順を参照してください。

なエラーが。MAMPはデフォでMySQLをインストールしてくれるので、DBD::mysqlとはperlとMySQLをつないでくれる便利なモノと予想。まあ、それはどうでもよくて、DBD::mysqlをインストールすることに。

DBD::mysqlをインストール

MySQLDBD::mysqlが必要となるのでダウンロードし解凍しとく。

以下を実行

1. mysql_configを探す。(私の場合は /Applications/MAMP/Library/bin/ にある)

2. MAMPと同じバージョンのMySQLをダウンロードして、解凍する。
 (訳注.mySQLのサイトからでもよし、MAMPのサイトでソース版をダウンロードしてもよし)

3. includeディレクトリを /Applications/MAMP/Library/ディレクトリの下に移動する。

4. libディレクトリの内容を /Applications/MAMP/Library/lib/mysql/ディレクトリにコピーする。

5. ターミナルを起動し、DBD::mysqlを解凍したディレクトリに移動

6. make file を作る:
sudo Perl Makefile.PL --mysql_config=/Applications/MAMP/Library/bin/mysql_config
 (訳注.mysql_configを指定することによって、この環境用のコンパイル引数を調べて設定してくれる)
※自分の場合、このままでは無理でした。当エントリの下の方参照
7. sudo make

8. sudo make install
Macが主流になってきました様より引用

ここで make コマンドが使えない

-bash: make: command not found
とハマる。

makeコマンドを使用できるようDeveloper Toolをインスト

appleのADC member siteより、Xcode (最新ver) Developer ToolsをDL&インストール

※DLにメンバー登録が必要です。(無料)

Device Centralが起動するか心配

Xcodeがあると、Device Central CS3が起動しないという症状があり、以前Xcodeをアンインストールしました。→Device Central CS3起動するようになった。

で、今回、Xcode 3.1.2をインストールしたところ、Device Central CS3も無事起動!!

makeコマンドも無事使用可能に

ということで、makeコマンドが通り、無事にDBD::mysqlがインストールされ、かつMac0S 10.5.6 & Movable Type + MySQL環境が構築できました。おわり。

嘘です。MySQLを選ぶところでこんなエラーが。(apache_error_logより)

[Thu Apr 23 23:40:17 2009] [notice] Digest: generating secret for digest authentication ...
[Thu Apr 23 23:40:17 2009] [notice] Digest: done
[Thu Apr 23 23:40:17 2009] [notice] Apache/2.0.59 (Unix) PHP/5.2.6 DAV/2 configured -- resuming normal operations
[Thu Apr 23 23:40:26 2009] [error] [client ::1] dyld: lazy symbol binding failed: Symbol not found: _mysql_init, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Expected in: dynamic lookup, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] , referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] dyld: Symbol not found: _mysql_init, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Expected in: dynamic lookup, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] , referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] Premature end of script headers: mt-wizard.cgi, referer: http://localhost/mt/mt-wizard.cgi

perlからMySQLへアクセスするスクリプトを試す

※mt425っていうデータベースとユーザはphpMyadminより作成してあります。

use DBI;

$user = 'hoge';
$passwd = 'hoge';
#$db = DBI->connect('DBI:mysql:hoge:localhost', $user, $passwd);
$db = DBI->connect('DBI:mysql:mt425:localhost:mysql_socket=/Applications/MAMP/tmp/mysql/mysql.sock', $user, $passwd);
$sth = $db->prepare("SELECT cd, nm FROM test");
$sth->execute;
$num_rows = $sth->rows;
print "該当 $num_rows 件\n";
for ($i=0; $i<$num_rows; $i++) {
    @a = $sth->fetchrow_array;
    print "cd=$a[0], nm=$a[1] \n";
}
$sth->finish;
$db->disconnect;

結果

dyld: lazy symbol binding failed: Symbol not found: _mysql_init
  Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle
  Expected in: dynamic lookup

dyld: Symbol not found: _mysql_init
  Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle
  Expected in: dynamic lookup

Trace/BPT trap

同じようなエラーが出たんで、Movable Typeはひとまず置いといて、perl&MySQLを解決しなくては。

追加(次の日) 寝て頭すっきりさせたらエラーがなくなった。

弄くりまわしてごちゃごちゃしたらエラーがなくなった。その過程を覚えてる範囲で記載しておきます。

1、用意するMySQLのバージョン

MAMPにはすでにMySQLが入っているのだけど、どうも完全体ではないみたいなので、MySQLをDLしてきて、おいしいところだけチョイスする。その時に「Mac OS X 10.5 (x86)」と「Mac OS X 10.5 (x86_64)」があるわけだが、x86の方を選んだ。※最初はx86_64を選んでいてエラーでてた。ただし、結果的にエラーがなくなっただけで、これが原因かどうかは分かりません。

perl Makefile.PLの設定

perl Makefile.PL --libs="-L/Applications/MAMP/Library/lib/mysql/lib -lmysqlclient" --mysql_config=/Applications/MAMP/Library/bin/mysql_config --testdb=mt425 --testhost=localhost -testuser=mt425 -testpassword=admin

※一行で
※mt425っていうデータベースとユーザはphpMyadminより作成してあります。

自分の場合、
/Applications/MAMP/Library/lib/mysql/lib
にDLしてきたMySQL(Mac OS X 10.5 (x86))のlibファイルをコピペして、Makefile.PL時に設定しました。

後は、 sudo make
sudo make test
sudo make install
です。

make test時にエラーが

/tmp/mysql.sockが無いYO!みたいなエラーが出たけど、これは無視!
※perlでのアクセス時や、movable typeインストール時にmysql.sockの位置を指定できため。

export PATH=$PATH:/Applications/MAMP/Library/bin あと上記のようなコマンドを打ったけど、意味は全然わかっていなかったりする。

OS10.5.6 & Movable Type & MySQL完了

mtmysql.jpg

データベースソケットのところにmysql.sockの位置を指定。データベースポートは無視。

これで多分完了。ローカルにmt環境作るだけなんて簡単よ!とか思ってたけど全くそんなことなかった。サーバー弄くれる人尊敬します。

< | 前の5日分>
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
クラスで書けるようになった。配列のpushとかspliceとかsliceとかややこしい部分の辞書代わりにも使ってます。XML関係もこれで覚えた。
ActionScript 3.0 アニメーション
vx,Math,cos,sinとか???な数学的な部分をこの本で理解できた気がします。逃げたいジャンルだけどFLASHに必須なジャンルなのよね。。
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
ActionScript応用への第一歩。ただこれを読む前に入門ノート1を先に読んでおいた方がよさそう。ASの世界が広がった気がする本です。
Flash Creative Workshop
FLASHを始めて右も左も分からない時に救世主となった本。FLASHサイト制作法がなるほど!っと。ActionScriptバリバリの人はスルー。
FLASH OOP for ActionScript 3.0
FLASHの「今の主流」を知ることが出来る本。筆者の方々は総勢10人以上でかつ現在活躍中の方々ばかりなんでミーハー的な読み方もありかも。