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

 # インタラクティブのための基礎技術
**北陽センサー**を使って**インタラクティブの基礎**を記した記事です
どんなものを作るかというとこんなもんです！
[![hokuyo_output_low.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/77810289-4aca-273e-0aaf-80fea414fda9.gif)](https://youtu.be/opDVtyOQIeY)


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

この技術を応用すれば、
すみだ水族館で行われたさくらの道
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/0416600d-394b-3772-a82e-452db89107be.png)
(引用:[1->10 works](http://works.1-10.com/wp/wp-content/uploads/2019/03/5.gif))
ができるようになります！

**大必見案件**ですな

# センサーやプロジェクターの設置まで！
もちろん今回も[**Youtube**]()にてチュートリアルを出してるのですが！！
今回はTouchdesignerの画面だけでなく、**なんとプロジェクターどう設置してるか**とか、**実際にマッピングしている様子**とか、**位置合わせしている様子**まで**大公開！**
なにか参考になることはあるかな～と思います
というわけで、下の画像からぜひ～～～
[![Inkedhokuyosensor_thunmbnail_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/b0ed6ff0-9fdd-f99c-4be1-a7c6bcdb020b.jpeg)](https://youtu.be/opDVtyOQIeY)


# 動画の解説
あくまでの[上記動画](https://youtu.be/opDVtyOQIeY)の解説ですので、詳しくは[**動画**](https://youtu.be/opDVtyOQIeY)でご覧ください～
## 北陽センサーを買う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/04e3224f-a6a9-f202-73dc-1348cb288086.png)
(引用:[北陽電機](https://www.hokuyo-aut.co.jp/search/?cate01=1))
まず、**北陽センサーってなんやねん**
ってところですが、
簡単に言うと
**赤外線センサー**の一種です
(自動ドアとかについてる)
何ができるのかというと、センサーから人やものの
**距離**
が測れます！

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

そして購入リンク用意しまた
[UST-10X　楽天市場リンク](https://rpx.a8.net/svt/ejp?a8mat=3N24RW+G23X6A+2HOM+BW8O1&rakuten=y&a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2F0ea62065.34400275.0ea62066.204f04c0%2Fa22012922676_3N24RW_G23X6A_2HOM_BW8O1%3Fpc%3Dhttps%253A%252F%252Fitem.rakuten.co.jp%252Frobotshopjapan%252Frb-hok-24%252F%26m%3Dhttps%253A%252F%252Fitem.rakuten.co.jp%252Frobotshopjapan%252Frb-hok-24%252F)
(届くまでに時間がかかりそうなので、必要な方は早めのご注文を)

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

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

## Hokuyo CHOP
Touchdesignerのすばらしいことは、こういったセンサーとのインターフェースがしっかり整っていることで、
その証に、`Hokuyo CHOP`があります。
だいたいは**イーサネット経由で接続する**と、認識すると思います
![hokuyosensor_connect.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/edf4aa53-a891-b318-ed67-05d3eb527c87.jpeg)

もし、黄色のビックリマークが出てきた場合は、
[こちら](https://www.hokuyo-aut.co.jp/products/data.php?id=4)から**IPアドレスの設定**を行ってみてください
わたしもイエロービックリマークでたのでこれためしました！
そしたらうまくいきました。ナイスですね～

## Blob Track CHOP
`Hokuyo CHOP`とセットで使うのが`Blob Track CHOP`
![hokuyosensor_blobtrack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/db349fa1-d1b4-1038-277a-bfa8e6d7aa61.jpeg)

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

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

## プロジェクターで投影して確認
それでは、`circle SOP`を`Hokuyo CHOP`からの値でインスタンシングします。
![hokuyosensor_circlrinstancing.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/ed5254d6-2489-a482-d7a9-00ca145d1829.jpeg)

そして、`camera COMP`を出し、viewをperspective -> **Orthographic**にしちゃってください
![hokuyosensor_orthographic.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d84aea54-d510-b781-17f1-a2b82b1ac1d3.jpeg)

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

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

`window comp` で**open**して確認してみてください！
![hokuyosensor_open.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/044e150d-5797-23d1-f508-1407f467a5ae.jpeg)


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

ここで使うのが、パレットに入ってる
`Stoner`
`Stoner window`で各点を動かすだけ！
あら簡単
![hokuyosensor_stoner.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/1b9e81b8-32bb-23e6-4dbc-d68e48a6f3a6.jpeg)

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

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

主に二つ、
1.**センサーと四角の中心の距離**
![hokuyosensor_calib_center.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/7e526676-631e-85ed-c972-a10b25e5c517.jpeg)

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

2.**四角の高さと幅**
![hokuyosensor_calib_size.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d32edbdf-1439-70ca-4ae9-3d5ce5003923.jpeg)


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

単位は**メートル**ね

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

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

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

## 完成
最終的に人が入ってみて、circleがついてくれば完成！
![hokuyosensor_legs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/871600d0-27d1-21d8-e217-1f0682198cfc.jpeg)

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

## 私の作例
えもえもな体験を作りましたー
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Touch visionを使った事例<br>動画内に出てくる僕はラップしているように見えますがふざけているわけではありません。概要は下記から<a href="https://t.co/HqWmsmgxxa">https://t.co/HqWmsmgxxa</a><a href="https://twitter.com/hashtag/Touchdesigner?src=hash&amp;ref_src=twsrc%5Etfw">#Touchdesigner</a> <a href="https://t.co/8mco9a1uEZ">pic.twitter.com/8mco9a1uEZ</a></p>&mdash; miwa_maroon (@miwata34) <a href="https://twitter.com/miwata34/status/1384473899643981824?ref_src=twsrc%5Etfw">April 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



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

それでは！