LoginSignup
13

More than 1 year has passed since last update.

[超入門]北陽センサーとTouchdesignerで体験型インタラクティブコンテンツ!!

Last updated at Posted at 2021-07-27

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

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

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

この技術を応用すれば、
すみだ水族館で行われたさくらの道
image.png
(引用:1->10 works)
ができるようになります!

大必見案件ですな

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

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

動画の解説

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

北陽センサーを買う

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

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

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

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

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

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

Hokuyo CHOP

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

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

Blob Track CHOP

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

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

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

size(四角の高さと幅)
その他は動画内で説明してま~す

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

それでは、circle SOPHokuyo CHOPからの値でインスタンシングします。
hokuyosensor_circlrinstancing.jpg

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

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

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

window compopenして確認してみてください!
hokuyosensor_open.jpg

歪みを補正!ほっせい!

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

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

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

手を動かして測るよ

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

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

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

2.四角の高さと幅
hokuyosensor_calib_size.jpg

それぞれ測った値をBlob track CHOP
Center

Size
に代入してください

単位はメートル

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

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

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

完成

最終的に人が入ってみて、circleがついてくれば完成!
hokuyosensor_legs.jpg

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

私の作例

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

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

それでは!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13