インタラクティブのための基礎技術

北陽センサーを使ってインタラクティブの基礎を記した記事です
どんなものを作るかというとこんなもんです！

わっかが人の足に反応して、今にも飛べそうですね

この技術を応用すれば、
すみだ水族館で行われたさくらの道

(引用:1->10 works)
ができるようになります！

大必見案件ですな

センサーやプロジェクターの設置まで！

もちろん今回もYoutubeにてチュートリアルを出してるのですが！！
今回はTouchdesignerの画面だけでなく、なんとプロジェクターどう設置してるかとか、実際にマッピングしている様子とか、位置合わせしている様子まで大公開！
なにか参考になることはあるかな～と思います
というわけで、下の画像からぜひ～～～

動画の解説

あくまでの上記動画の解説ですので、詳しくは動画でご覧ください～

北陽センサーを買う

(引用:北陽電機)
まず、北陽センサーってなんやねん
ってところですが、
簡単に言うと
赤外線センサーの一種です
(自動ドアとかについてる)
何ができるのかというと、センサーから人やものの
距離
が測れます！

大事なのは、距離が測れるってこと！
大事なので二回言いました

そして購入リンク用意しまた
UST-10X　楽天市場リンク
(届くまでに時間がかかりそうなので、必要な方は早めのご注文を)

値段はかなりしますが、目新しさにたくさんの集客ができると考えれば、かなりお安い投資ではないかなと思います
(または学校や会社にせびるとか笑)

北陽センサーとパソコンとつなげる

買ったら買ったで、え、こっからどうすんの状態になります
そこで北陽センサーとパソコンをつなげる最強の記事みつけました
こちらです
https://qiita.com/atsonic/items/be9e15f528e34e370d32
LGTMしました、ふむふむ

Hokuyo CHOP

Touchdesignerのすばらしいことは、こういったセンサーとのインターフェースがしっかり整っていることで、
その証に、Hokuyo CHOPがあります。
だいたいはイーサネット経由で接続すると、認識すると思います

もし、黄色のビックリマークが出てきた場合は、
こちらからIPアドレスの設定を行ってみてください
わたしもイエロービックリマークでたのでこれためしました！
そしたらうまくいきました。ナイスですね～

Blob Track CHOP

Hokuyo CHOPとセットで使うのがBlob Track CHOP

まじでこいつは**神！開発者しゅごい！**ってなります

何ができるのかっていうと、あらかじめ決めたエリアに入ってくる
人やモノの位置を返してくれます
特に大事なパラメーターが
center(センサーから四角の中心までの距離)
と
size(四角の高さと幅)
その他は動画内で説明してま～す

プロジェクターで投影して確認

それでは、circle SOPをHokuyo CHOPからの値でインスタンシングします。

そして、camera COMPを出し、viewをperspective -> Orthographicにしちゃってください

何が変わったねん！という方
はい
並行投影に代わりました。遠近感がなくなります！(簡潔～)

render TOP から rectangle TOPとoverして rgb key にかまして、window compにぶち込んでください
あ、なんかルー大島みたいですね。
やばいわからないよとなった方！
そういう時はどうすればいいんだっけ～？？
そうだよね！
Youtube!!
ありがとうございます

window comp でopenして確認してみてください！

歪みを補正！ほっせい！

私はスーパーチープ環境でやってるので、プロジェクターの投影方法が
だいぶとしょぼい笑笑
でもこれでいいの！
Touchdesigner で補正すればいいから、
プロジェクターの角度いちいち変えたりすると大変だしね。

ここで使うのが、パレットに入ってる
Stoner
Stoner windowで各点を動かすだけ！
あら簡単

これで長方形を目指して！
頑張って！
あきらめないで！

手を動かして測るよ

投影した映像をもとに、メジャー等を使って測量します。
レッツ伊能忠敬

主に二つ、
1.センサーと四角の中心の距離

センサーの横位置は中心に置いてあげると、だいぶとやりやすいよ

2.四角の高さと幅

それぞれ測った値をBlob track CHOPの
Center
と
Size
に代入してください

単位はメートルね

##細かい調整
Circleをぴったり合わせるために下記のことをやってみてください

・cameraのyの調整
・blob track CHOPの後に、math CHOP入れて広さを変える
・blob track CHOPのMax blobsやMax distanceをいじる

あなたの気が済むまでやってみてください

完成

最終的に人が入ってみて、circleがついてくれば完成！

いくらでも応用きくのでたくさん作ってみてください

私の作例

えもえもな体験を作りましたー

Touch visionを使った事例
動画内に出てくる僕はラップしているように見えますがふざけているわけではありません。概要は下記からhttps://t.co/HqWmsmgxxa #Touchdesigner pic.twitter.com/8mco9a1uEZ
— miwa_maroon (@miwata34) April 20, 2021

これをもとに国内でたくさんの体験型インタラクティブコンテンツの事例が増えてほしいと思って、記事書きました！
皆さんと一緒に盛り上げられたらなって思ってます

それでは！