はじめに
初めまして、関西大学総合情報学部4回生の森友吾です。大学ではインタフェース工学を専攻しています。この度は、1→10様にて2ヶ月ほどインターンとして活動させていただいたので、その成果をご報告します。
目的
普段は Processingなどを使ってデジタルアートなどを作成しているのですが、プログラム内で完結していて、センサーを使ったインタラクティブなフィジカル作品にも興味があったので、インターンとして2ヶ月間、インスタレーションの制作を行いました。
制作プロセス
制作にあたって、使う機材の選定、制作物の決定というプロセスで進めていきました。ここからは、週ごとにどんなことをしたのかご報告します。
Week1
一週目は、使う機材を決めるために、会社にあるいろいろなセンサーを使ってみて、どういう使い方ができるのかを試していきました。
左（測域センサー） 中（Kinect） 右（M5Stack）です。
測域センサーは、このセンサーの周りにものがあるかどうかを測ることができます。ネットワーク通信をしながらセンサーをやり取りするのが初めてで、使い方を知れてよかったです。
Kinectはよく使われるセンサーなので知っていましたが、初めて使ってこんなふうに使うんだという発見がありました。結構簡単に使えます。
M5Stackはちょうど社内会議で使い方の解説をしてくださっていて、プロトタイプの容易さに驚きました。
Week2
2週目は、実際にどんなコンテンツを制作するかを実際に決めていくことにしました。いろいろ調べていく中で、ハンドトラッキングを使った動画を拝見して、これを応用した制作をしたいと思い、TouchDesigner＋カメラで、Mediapipeを用いて簡単なプログラムを作成しました。
このプログラムではMediapipeを使用して指の関節をトラッキングできており、その値の変化を用いてインタラクティブな動画を作ることができます。
自分自身、TouchDesignerを触るのも初めてだったのですが、チュートリアルを見ながら覚えることができました。
↓サンプルで作成した手の形で文字の大きさが変わるプログラムです。
Week3
Week2で作った作品は、カメラでジェスチャーを検出するプログラムだったのですが、よりフィジカルな要素を取り込んだ方向へ進みたいと思い、最終成果に向けて、手元にプロジェクションを行って操作する、テーブルディスプレイを作成することにしました。
まずはプロジェクションのための土台を作成しました。
アクリル板にトレーシングペーパーを貼って、下からプロジェクションすると、この板に映像が投影されます。
次に板にインタラクションするためのマーカー検出をできるようにしました。
ここでは、Arucoマーカーを使用して検出をしており、カメラ内のマーカーの位置と角度がわかるようになっています。
この技術を合わせて、実際にマーカーをアクリル板越しに検出できるようにしました。
使用したのはIRカメラ＋Arucoマーカーです。
IRカメラとは赤外線カメラのことで、赤外線の画像を検出します。これにより、人の目では見えない光を使って検出することができるため、周りの環境に左右されずに使うことができます。赤外線は赤外線用のライトを使って照らしています。
また、アクリル板の４隅にマーカを置くことで、４隅を基準としたマーカー検出を可能としました。
Week4
ここからはディスプレイを本格的に仕上げていきます。
まずはプロジェクターで投影するためのマウンタを作成しました。
レーザーカッターを用いて木材をカットすることで、それを繋げます。カメラとプロジェクターをここに設置します。
↓カッティング中の写真
Illustratorで設計してそれをカッティング→それをグルーガンでつけるのですが、ここが意外と面白くてハマってました。ここ数年は制作をするとなるとプログラムばっかり触っていたのですが、自分自身、元々工作好きなのを思い出しました。Arucoマーカーもここでカッティングして、木材で作っています。
Week5
今まで部品や一部を一つ一つ制作していましたが、ここで実際にプロトタイプとして動かせる状態にしました。
たまたまですが、アクリル板がコンテナボックスにジャストサイズに収まりました。プロジェクタも投影面に対してちょうど良いサイズになっていて、そこら辺にあったコンテナボックスなのですが、テーブルディスプレイのためにあるようなサイズで、少しビビりました。
簡単な演出も用意しました。テーブル上のマーカーを動かすと、その軌跡に映像が投影されます。
Week6
ここまでTouchdesignerで実装してきたのですが、使い慣れてないのもあって、画面上のマーカのパラメータの扱いが難しく、個人的に扱いやすいPython＋Processingを連携させた方法へと移行しました。
Pythonで画像検出＋UDPでProcessingへと通信
Processing上でマーカーの位置に円を置いて、簡単なブロック崩しみたいなゲームを作成
画像検出の精度が低いため、スムーズにマーカーを動かすことができず、こちらは使いづらかったため、他の演出をすることとしました。
最終成果物
ここまでテーブルでのプロジェクションを行ってきました。この成果を最後CT部の皆さんの前で発表しました。
最終発表準備中…
体験
このシステムでは、テーブル上にある二つのマーカを動かして映像の変化を楽しむことができます。
これを動かすと色が変わります。
もう一方を動かすと形が変わります。
二つのマーカを近づけると、円の配置が中心によっていきます。
さらに、マーカの角度を変えると、円が画像の中心にして回転し始めます
このように遊べるのがこの作品です！
まとめ
2ヶ月間のインターンの中で、テーブルプロジェクションを行ってまいりました。最初は機材を触る中で、やることを決めていき、最終的な成果物を約1ヶ月かけて制作しました。
このインターンで以下のようなスキルを学びました
- TouchDesigner(mediapipeによるハンドトラッキング,KantanMapperによるマッピング,ノードを繋いでパラメータ制御）
- レーザーカッターによる加工
- アクリル板に投影するためのプロジェクション技術
- Python+ProcessingによるUDP通信
- Arucoマーカー検出（赤外線による検出、精度上げるための二値化など含む）
今後の改善点としては、マーカー検出の精度を高めるところまでは手が回らず、精度が低いままだったので、こちらの改善が挙げられると思います。
原因としては、カメラのfpsや画質の問題、撮影する映像の一部に光が当たって検出できなくなるなどがあるかなと思います。
今回のインターンで、実際にセンサなどの機材を触りながら制作を行えたことがとてもよかったです。機材などはなかなか簡単には用意できないものも使わせていただくことができ、貴重な体験となりました。今後も使用できるスキルばかりなので、今回の学びを活かして、これからも制作に取り組んでいきたいと思います。
また、インターンは基本京都の会社に出社する形で行っていましたので、会社の雰囲気も知ることができたのがとてもよかったです。
CT部の定例会にも参加させていただいたのですが、そこでの内容も非常に面白く、参考になりました。
最後になりますが、今回インターンを受け入れてくださった1→10さま、メンターの岩中さん、CT部のみなさま、お話ししてくださった京都オフィスの皆様、本当にありがとうございました。