測域センサでインタラクティブ！（1）

# はじめに 
前回の[Trail系映像の作成方法](https://qiita.com/snafkinliberty/items/540c1872d1be3ec40a5c)に続き第二弾は、TouchDesignerと北陽電機の**測域センサ**を用いた、簡単なインタラクティブコンテンツの作成方法について書きたいと思います。
インタラクティブコンテンツと言えば、簡単なもので、壁に投影した映像に触れると、映像が変化するそんな作品を考えてみましょう。

僕の作成した簡単な例ですが

**事例1**：手で触れると花が大きく舞う(Kinectを使用)
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">簡単にではあるけれど、Kinectでインタラクティブにしてみる。花に触れると大きく変化します。<a href="https://twitter.com/hashtag/TouchDesigner?src=hash&amp;ref_src=twsrc%5Etfw">#TouchDesigner</a> <a href="https://t.co/6xNaknXOT4">pic.twitter.com/6xNaknXOT4</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1080491075540680705?ref_src=twsrc%5Etfw">2019年1月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
**事例2**：指で花びらに触れると、花びらがたくさん飛んできて舞う(測域センサを使用)
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">測域センサで指先の位置を求め(hokuyoChopとpythonで計算)、花びらに触れるとたくさん飛んでくるようにしてみる。キャリブレーションに手間かかりますが、慣れれば問題なさそう。<a href="https://twitter.com/hashtag/TouchDesigner?src=hash&amp;ref_src=twsrc%5Etfw">#TouchDesigner</a> <a href="https://t.co/xdLI7mYk7g">pic.twitter.com/xdLI7mYk7g</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1086558314605891584?ref_src=twsrc%5Etfw">2019年1月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
**事例3**:指で触れた箇所に映像が現れる(測域センサを使用)
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">手を触れたところだけ映像が出るパターン。石原さとみさんのCM的な。元映像のCGのクオリティを上げたい。簡易的に全部TouchDesignerで作っているゆえ。<a href="https://twitter.com/hashtag/TouchDesigner?src=hash&amp;ref_src=twsrc%5Etfw">#TouchDesigner</a> <a href="https://t.co/bKosrYtWXz">pic.twitter.com/bKosrYtWXz</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1091381319760633856?ref_src=twsrc%5Etfw">2019年2月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
**事例4**:日本酒を飲む(瓶を取って戻す)と季節が変わる(測域センサを使用)
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2/23の関西TD会では測域センサシリーズを紹介予定ですが、その１つに故郷の獺祭を持参し、飲む(瓶を取って戻す)と季節が変わると、錦帯橋の四季を楽しめるようにしました。飲めば飲むほど、どれだけ時間経つんだよって感じですが（笑） <a href="https://t.co/ctLe4GulId">pic.twitter.com/ctLe4GulId</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1097874941075062784?ref_src=twsrc%5Etfw">2019年2月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



事例1～3に関し、ポイントはどう映像に触れたかを判断するかですが、Kinectで手の座標を取ってもいけますが、今回は汎用性の高い**測域センサ**を使ってみます。
**測域センサ**はセンサから物体までの距離を周方向にスキャンして測定します。なので、例えば壁の下に設置して、壁の表面をスキャンすれば、何も障害物がなければ、天井位置のデータが返ってきます。ここで、指で壁に触れれば、その位置の距離が変化するので、触れたと判断でき、座標も取得できるわけです。
他にも人が近づいたらとか、物が置かれたらとか応用は広く、物体検知に**測域センサ**は有効です。
今回は映像そのものの制作よりは、センサの設定や座標取得方法についてまずは説明したいと思います。

# Step1 測域センサの準備
まずは北陽電機の**測域センサ**を用意します。ここが一番ハードル高そうです。そうです、お値段がなかなかなのです。僕もこれからインタラクティブコンテンツをどんどん作るぞと覚悟を決め、入門用で一番お手頃な「[URG-04LX-UG01](https://www.hokuyo-aut.co.jp/search/single.php?serial=17)」というタイプを買いました。
![111.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/25d668a0-9be7-8dd5-2467-2f955c680b68.jpeg)

これはUSB接続だけで、serial接続ですぐ使えるので良いですね。センサのUSBケーブルが短いので、引き回したい方はUSBの延長ケーブルも合わせて用意するといいです。
入手できましたら、PCにUSB接続します。
次に、コントロールパネルの**デバイスマネージャー**を開きます。
分からない場合は左下の検索欄で検索すると出てくるのでクリックして下さい。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/311653/cfea9a52-3111-de8e-48e0-a104f20f9ac5.png)

次は**ポート(COMとLPT)**をクリックし、センサの**COM番号**を確認します。僕の場合、COM5になっています。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/311653/f96975d7-3505-0d07-d39d-3ee26847e777.png)

# Step2 TouchDesignerでのhokuyoChopの設定
TouchDesignerでURG-04LX-UG01からのデータを取得する方法ですが、**hokuyoChop**があり、これが使えます。
図の通りの設定にして見てください。tx,tyの2chの波形が表示されると思います。
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/3e40d3cf-b7ff-40e3-7fdd-e1e551b7ecdd.jpeg)
ここで、センサによるのですが、本センサでは**Interface**を**Serial**にして、**Serial Port**を先に確認したCOM番号を選択します。
さらに**End Step**を入力をする必要があり、0～いくつまで測定するかですが、これは製品の[仕様](https://www.hokuyo-aut.co.jp/search/single.php?serial=17)(サイトの製品仕様をクリックして確認)に合わせて、240°まで測定できて、ピッチは0.36°とあるので、これを割って、**End Step**は**666**とすると良いです。
OutPutは2種類の表示方式があり、**Polar Coordinates**：極座標(radius,angle)と**Cartesian Coordinates**：直角(デカルト)座標(tx,ty)が選べます。直観的に分かりやすいのが**Cartesian Coordinates**だと思うのでこちらで今後進めます。

# Step3 chopToDatによるデータの取得
センサのデータを確認できたので、手をセンサに近づける等してみてください。波形が変わるのが分かると思います。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">URG-04LX-UG01の北陽電機の測域センサですが、hokuyoChopでシリアルポート介してデータを取得してます。<br>センサの周りをぐるっと手を近づけると、確かに距離が小さく変化しますね。早速活用してみよう。 <a href="https://t.co/qC35nrjPwj">pic.twitter.com/qC35nrjPwj</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1083952641019850752?ref_src=twsrc%5Etfw">2019年1月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
このデータを処理して、投影した壁に触れた位置を検知するようにしてみたいと思います。
まずはデータを表にするため、**chopToDat**を用意して、**hokuyoChop**をドラッグ&ドロップしてみてください。上の画像のようにデータが表で表示されたかと思います。
ここからは**Python**でこのデータを処理することになります。

# 続く...
ここからが肝心のところですが、長くなるので今回はセンサの接続方法までにします。次回、センサで検知した指先の座標の取得方法をまとめたいと思います。

[測域センサでインタラクティブ！（2）](https://qiita.com/snafkinliberty/items/2dae116bb1fb987c1ddf)
[測域センサでインタラクティブ！（3）](https://qiita.com/snafkinliberty/items/3bd064da4aac82fee049)

**＜制作環境＞**
　TouchDesigner099 COMMERCIAL 64-Bit Build 2019.10700
　CPU Corei9 9900K
　GPU Geforce RTX 2080Ti
　Windows10

**＜∀RroWs＞**
　[HomePage](https://www.arrowsofficial.com/)