経路探索アルゴリズムA*をActionScript3.0で実装してみた

ひさびさにプログラムネタ。

経路探索ってものを作ったことがなかったので、作ってみた。
A*(Aスター)というヤツがメジャーらしいので、それを。

このFlashの適当な場所をクリックすると、壁をよけてうまい具合に丸が動いて、クリックした場所にたどり着きます。

なかなか楽しい。

玉の移動にTweenerを使用。

参考は、WikipediaのA*と、gan2さんのRubyのコード。

Node.as

AStar.as

Papervision3Dでメタセコイアのmqoファイルを表示する

出来るらしいというのは知ってましたが、やったことなかったのでやってみました。

<<-- MqoSample.swf -->>

この表示されてる戦闘機は、DOGA-L1で作ったモノ。

それをMetasequoia LEで読み込み、mqoファイルを作成。

このあたりの作業方法は、んぱかさんとこを参照のこと。

Macユーザーの僕は、VMWare Fusionでこの一連の作業を行いましたが、仮想マシンの3Dアクセラレーションがなくても特に問題ありませんでした。

mqoファイルの読み込みには、Metasequoiaクラスを使用。

現在は、Papervision3D 1.7を中心に使用しているので、1.7用のファイルをダウンロードして使用。

1.7用のファイルは、クラス名がMetasequoiaとなっていて使い勝手が悪かったので、Metasequoia_1_7に変更して使用。

MqoSample.as

GoogleMapの画像を3Dのテクスチャとして張ったFlashを作ってみたのだが・・・

ブログにアップしてみたら、さっぱり動きませんでした（笑

エラーとしては次の内容。

SecurityError: Error #2122: セキュリティサンドボックス侵害 : BitmapData.draw:http://shin-ishimaru.cocolog-nifty.com/swf/Pv3dGoogleMap-debug.swf は http://mt0.google.com/mt?n=404&v=ap.74&hl=ja&x=116426&s=&y=51606&zoom=0&s=Gali にアクセスできません。ポリシーファイルが必要ですが、このメディアがロードされたとき、checkPolicyFile フラグが設定されませんでした。
    at flash.display::BitmapData/draw()
    at Pv3dGoogleMap/loop3D()[/Users/shin_ishimaru/Sites/ActionScript3/Pv3dGoogleMap/Pv3dGoogleMap.as:134]

どうも、googleのサーバのほうにcrossdomain.xmlを設置してないんで、セキュリティーエラーになっちゃうみたいですね。

ローカルのデバッグモードでは動いて、画像はそのスクリーンショット。

テクスチャは秋葉原駅のあたりの地図。
Google Maps API for Flashで読み込んでいます。

参考資料は、nitoyonさんのGoogle Mapsで鈴鹿サーキットFlash版のソース。

しかし、googleさん、crossdomain.xml設置してよ！

Vote for crossdomain.xml for Google APIs and services

Pv3dGoogleMap.as

ARToolKitのFlashへの移植

おお、ついにやってくれた人が！

ARToolKitをFlashに移植したよ。

これは素晴らしいガッツ。

動くデモはこちら。

画像は僕が動かしてみてるところ。
ちゃんと動くなー。

これは良い。

Adobe Flash CS3でユーザインターフェイスを作ってFlex Builder 2（または3)でロジックを組み込む

どうも、そういうことが出来るらしいというのは知ってたんですが、このたびやってみました。
こらなかなか、便利ですな。

矢印ボタンが手書きのため、やたらとゆるいですが（笑

Flash CS 3で、UIになるFlash作成。

ベースになるMovieClipを作って、シンボル化。
SimpleButton、TextFieldなどのコントロール類を置いたら、SWFを作成（ここではUISkin.swfというファイルを作成）。

次に、この作成したswfをFlex Builderで作成したプロジェクトのディレクトリ内に置く。

Flex Builder 2で、このSWFを読み込み、そのSWF上のコントロールに発生するイベントを処理するコードを書けば完成。

このサンプルのボタンを押すと数字が足されたり引かれたりする処理は、Flex Builderで書いたActionScriptによって処理されています。

コードは下記のSymbolEx.as。

参考文献は、布留川英一氏のAIR本。

Adobe AIRプログラミングガイド 著者：布留川 英一 販売元：毎日コミュニケーションズ Amazon.co.jpで詳細を確認する

この本の「FLVプレイヤー」の項に、詳細なやり方が書いてありますので、より詳しい説明を読みたい方はこちらをご参照ください。

ユーザインターフェイス部分のswfである、UISkin.swfと、UISkin.flaもアップしておきます。

Download: UISkin.swf

Download: UISkin.fla

SymbolEx.as

Webカメラ画像の色重心を判定するFlash

を作りました。

画像内で、青色の部分をラベリング。

その上で青色の面積が一番広いところの、重心を求めて表示します。

こんな感じで青色のファイルをかざすと、

青色と判定された部分を白で表示して、重心に水色の丸を表示。

処理的には、そこそこ早いのでゲームなんかにマウスポインタ的に気楽に使うのに良いんじゃないかなと。

[参考資料]

重心を求める部分は、OpenCVプログラミングブックの肌色追跡の部分に載ってた画像モーメントの式。

OpenCV プログラミングブック 著者：奈良先端科学技術大学院大学 OpenCVプログラミングブック制作チーム 販売元：毎日コミュニケーションズ Amazon.co.jpで詳細を確認する

ラベリング部分は、flashrodさんのAS3でARを参考に。

ColorGravity.as

CenterOfGravity.as

LabelData.as

CameraFramework.as

背景差分法で背景部分を判定するFlash

を作りました。

背景画像を撮影して、その前に人が来たりすると、その差分から人の部分（前景）と背景を計算して表示します。

まず「背景画像撮影」ボタンを押して、背景画像を撮影。

そのうえで、自分がカメラの前に来たりすると、背景部分を赤、前景部分を黒で描画します。

うまく行けば、こんな感じにシルエットが表示されます。

でも、あまりうまく動かないんだよなー。

カメラのフォーカスが変わるからか、自動的に露光調整してるためなのかよくわからんのですが。

BackGroundDiff.as

CameraFramework.as

TextButton.as

WEBカメラの画像をグレースケール化するFlash

「ActionScript3.0での画像のグレースケール化ってどうやったら高速にできんのかな？」

と今週頭くらいに思ってたら、ちょうど良くてっく煮ブログさんに投稿されたコードがそのものずばり。

いやはや、ありがとうございます。

自分の勉強用にColorMatrixFilterでのグレースケール化コードを作成しました。

まったく同じでもつまらないので、二つのグレースケール化方法を実装しています。

一つは、RGBの平均からグレースケール化する方法。

もう一つは、人間の生理的な特性から色の重み付けを計算する方法。

カラーテレビを白黒にするのと同じ仕組みです。

このように赤いファイルを写して、それぞれでグレースケール化してみます。

RGB平均。

重み付き平均。

重み付き平均のほうが、若干キレイな感じがしますね。

グレースケール化のアルゴリズムの参考にしたのはこちら。

[< グレースケール > Le Premier Soleil]

GrayScale.as

CameraFramework.as

TextButton.as

WEBカメラの映像をクロマキー処理するFlashを作った

最近好きなFlashでのWEBカメラ操作系ですな。

今回はクロマキー処理をするやつを作ってみました。

クロマキーってのは、青い背景の前とかで人が動いて背景画像を合成する、テレビとかでよく使われてるやつですね。

背景画像として、用意したのは、神田方面からの秋葉原のほうを撮ったこの写真。

で、こんな感じで青い背景の前に、太陽の塔を置きます。

Chromakey ONボタンを押すと、背景が合成！

秋葉原に太陽の塔あらわる！！

ちょっと青の抜け悪いけど（笑

今回のこのFlashは、光の加減やバックの色の問題で、なかなか試せないと思いますが（笑

こんな感じの舞台装置を作って実験しました。

自作クロマキー舞台装置。休みの日に家で一人で、何やってんねんという感じも。

これ、やたらと青の原色に近いワイシャツですな。

シャツをひっかけてるのは、A4のファイルという手作り感。

しかし、こんなシャツ、オレ持ってたっけか？

でもクロマキーに便利で助かった。

ソースコード的には、BitmapDataに備え付けのAPIを活用してるんで、かなり処理速度は速いですね。

そのあたりの勉強も兼ねて。

ChromakeyCamera.as

CameraFramework.as

TextButton.as

WEBカメラの映像を色々な色相でモノクロ化するFlashを作った

これを作りました。

一回画像をRGBカラーから、HSVに変換。

その上で、色相と彩度を一定値に固定して、RGBカラーに戻しています。

彩度220、色相220で、水色がかったモノクロ画像。

彩度220、色相100で黄色がかったモノクロ画像。

彩度220、色相0で赤みがかったモノクロ画像。

これ、なんで作ろうかと思ったかというと、PhotoShopのマジックワンドツールみたいな、色選択処理を作ろうと思ったんです。

HSVに変換して、色相で範囲指定しようかなと。

でも、速度的に考えると、これでやるのはイマイチかなー。

あんまり速度でてないし。

ラベリングもやろうかと思ったら、てっく煮ブログさんのほうでやってますね。

void element blogさんのところでやってる高速化処理も勉強になる。

BitmapDataにthreshold、getColorBoundsRect、なんて面白いのがあったのか。

知らなかったです。

もうちょっとリファレンスよく読むべきですなー。

noize、mergeも面白そう。

参考文献は、OpenCVプログラミングブック。

OpenCV プログラミングブック 著者：奈良先端科学技術大学院大学 OpenCVプログラミングブック制作チーム 販売元：毎日コミュニケーションズ Amazon.co.jpで詳細を確認する

HSV変換コードは、ここを参考に。

ソースコードが以下。

HSV.as

SepiaCamera.as

CameraFramework.as

TextButton.as