Processingを使ったインタラクティブコンテンツ作品 with OpenCV, ARToolKit
大学での実習を通して、Processingを使ったインタラクティブコンテンツを作成しました。
Processingを使うのは初めてという中で、ある程度形になったものをここに上げておきたいと思います。
(課題提出締め切りギリギリまで制作していたので、ソースコードは汚いです.... m(_ _)m)
画像処理インタラクティブコンテンツ
カメラ入力を使ったインタラクティブコンテンツを作成せよ、と言う課題が出されました。
そこで私はOpenCVでの画像処理を組み込んだコンテンツを作成しました。
完成品はこちら↓
大学の授業課題で作ったものですが、ハンドトラッキングのアルゴリズムがなかなか精度よくできたので...
— IKEP (@CreativeIKEP) 2018年5月10日
processingとopencvで作りました。
言語はJavaです
(深度センサー付ではない普通のカメラです)#Processing #opencv #画像処理 pic.twitter.com/1UX02157Jq
モグラたたきです。カメラを机に向けて設置して、机の映像に対応した部分を叩くとモグラを叩くことができます。アルゴリズムを試行錯誤したら、手が早く動いてもトラッキングの精度が落ちないようにできました。
OpenCVでは顔認識はデフォルトで簡単に行えるようになっているのですが、手形状認識はできません。そこで、手形状認識をしてバーチャルなものに触れることができるものを作ろうと思いました。
普通のRGBのwebカメラで映像を取得し、HSVでの肌色抽出で実現しました。この肌色領域を取得して、その領域とモグラのCGが接触したらモグラを叩いたと認識させています。
ARToolKitを使ったオブジェクトの3次元制御ARシステム
次にARToolKitを使ったARインタラクティブシステムを作成せよ、という課題が出されました。
ARToolKitはARマーカーを使って仮想オブジェクトを表示します。しかし、マーカーをオブジェクト表示だけに使うだけではつまらないと思い、コントローラとして使おうと考えました。
完成品はこちら↓
大学の課題で作ったものですが...
— IKEP (@CreativeIKEP) 2018年6月29日
ARToolKitを使ったインタラクティブキャラクターコントロールシステム
ARToolKitとprocessingでマーカー回転角度を取得して、アフィン変換で実現しました。 pic.twitter.com/8Eg1mvebgE
マーカーを手で隠したり見せたりする事でボタンとしての機能を持たせつつ、マーカーの回転角度をアフィン行列で取得。その中から平面に対して垂直な軸を中心とした回転角度を抽出し(その他の軸の無駄な回転角度を削る)、この角度を使ってオブジェクトをアフィン変換しています。
回転軸切り替えをした時に、オブジェクトに適応しているアフィン行列を今までの変換行列に掛け合わせることで、今までの回転操作の状態を保存したまま異なる回転軸でさらに操作を行えるようにしました(線形代数学ちゃんと勉強しといてよかった…(^^))
感想
普段、Unityの方をメインで使うんでProcessingはあまりやった事なかったですが、やってみると面白かったのでもっと勉強したいですね(^_^)
なによりも描画関係がすごく簡単にできるのが衝撃的でした。
追記
最終課題で、上記のことを全部混ぜたレーシングカーゲームを作りました。ARマーカーの回転角度で車を操作、手認識とオブジェクトへの接触判定でスピードアップです。
ついでにランキング機能を組み込みました。ランキングの順位は、(速くゴールする)>(遅くゴールする)>(ゴールできなか ったときの走行距離⻑)>(ゴールできなかったときの走行距離短)の順です。
完成品はこんな感じです↓。昔のゲームによくある8ビット風の世界です♪
PC内蔵のカメラを使っているので、映像の精度が悪いです....
工夫点としては、
・「ゴールできないかもしれないリスクを背負うが、スピードアップして走行距離をかせぐ」か「走行時間は遅くなるが、着実にゴールするのを狙う」など、ユーザの判断によって、ユーザ個人個人の楽しみ方を自然に提供したところ
・ARマーカー、画像処理による操作をインタラクティブかつ直感的なものになるよう設計
などですね
ただ、自分がunityでの制作に慣れたせいか、シーンの切り替えがprocessingではやりにくいなと感じました 笑