toioを使って簡単にゾートロープ(立体アニメーション)を作る方法

# サマリ
本記事には**toioを使って簡単にゾートロープ(立体アニメーション)を作る方法**が記載されています。
基本は家にあるものだけで、以下の動画の様な体験ができるので、大変手軽で面白いです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パンタグラフさん(<a href="https://twitter.com/P_INOUE?ref_src=twsrc%5Etfw">@P_INOUE</a>, <a href="https://twitter.com/_PANTOGRAPH_?ref_src=twsrc%5Etfw">@_PANTOGRAPH_</a>)のスマホアプリ <a href="https://twitter.com/hashtag/StroboScopeApp?src=hash&amp;ref_src=twsrc%5Etfw">#StroboScopeApp</a> と <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> を組み合わせて、お手軽ゾートロープを作ってみました。現実がバグって見えて面白いです。<br>家庭にある材料で簡単に作れるので、子供向けワークショップにも良い。詳しくは以下記事↓へ<a href="https://t.co/NEC08Fv72T">https://t.co/NEC08Fv72T</a> <a href="https://t.co/IhlBCbcObi">pic.twitter.com/IhlBCbcObi</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1319926048465715200?ref_src=twsrc%5Etfw">October 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 成果物
- [工作シート](https://docs.google.com/drawings/d/1DZwZwWeU7HtirLlpZvzEzGgM2nY29glYL6jzx5pFU0M/edit?usp=sharing)<BR><img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/287fd91f-f08f-495c-eb76-1eefbfae398e.png">
- [ストロボスコープのサンプルシート](https://docs.google.com/drawings/d/1GTJYqccKdrPHcrgvH4nU6RhFaf4kdSIWkYRhtnHlTMs/edit?usp=sharing)<BR><img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/fbf832d0-7f21-8cb6-6ccc-5243d5943ed1.png">
- [キューブを制御するためのソフトウェア(Win/Mac)](https://preview.p5js.org/tetunori/present/7mfpgXD5Z)
  - `p5.toio`にて動作しています。**注意ですが、キューブのFWは最新版にFWしてからご使用ください！**
- ワークショップ的な工作の手順書(本記事にて後述)
- (2020/10/28追記) [ストロボスコープのサンプルシート その２](https://docs.google.com/drawings/d/1kFfRqBNQ0a0HFF65LNryhyXgOR41KjfMH7rJ92pW918/edit?usp=sharing)<BR><img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/90ffded9-1a3e-4c19-deae-dcdfd800ee69.png">

# きっかけ
私自身はコロナの影響もあり参加を見送ったのですが、2020年10月に開催された、[Maker Faire Tokyo 2020](https://makezine.jp/event/mft2020/)にて、[パンタグラフさん](http://www.pangra.net/)が出典されていた『[パンタグラフのゾートロープ | Zoetrope of PANTOGRAPH](https://makezine.jp/event/makers-mft2020/m0006/)』が超絶良かったので、ぜひ自宅でも簡単に再現したいなと思い構想をはじめました。
まずは、パンタグラフさんの作品(すごい)をご覧ください。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/aDcqLTl-Z3M/0.jpg)](http://www.youtube.com/watch?v=aDcqLTl-Z3M)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/X-5AP5R6gpA/0.jpg)](http://www.youtube.com/watch?v=X-5AP5R6gpA)

さて、自宅で再現するにあたり、昨今のご家庭には動画の様なレコードプレーヤーは少ないと思い、よりありふれており手軽な(異論は認める)toioを使って実現してみることにしました。また、**toioを使えば、回転速度や回転の向き、複数個の同時回転などレコードプレーヤーでは実現できなかった表現も可能になる**のでは、と思い開発に着手しました。
結果的にすべてを満たす簡単便利ツールが出来上がったので、子供向けワークショップとかで使ってもらえるといいなと思っています。

# 準備
## 一覧
下記をご用意ください。

- [工作シート](https://docs.google.com/drawings/d/1DZwZwWeU7HtirLlpZvzEzGgM2nY29glYL6jzx5pFU0M/edit?usp=sharing) (1枚)
    - A4サイズのコピー用紙や画用紙に**原寸で**印刷してください。
- [ストロボスコープのサンプルシート](https://docs.google.com/drawings/d/1GTJYqccKdrPHcrgvH4nU6RhFaf4kdSIWkYRhtnHlTMs/edit?usp=sharing) (1枚)
    - こちらも、A4サイズの紙に**原寸で**印刷してください。
- 不要なCD/DVD (1枚)
- toio™Core Cube (1個)
- toio™Core Cube専用プレートか、LEGOの4*4プレート (1枚)
- キューブ制御用 Windows/Mac PC (1台, Bluetoothが使えること)とブラウザ
    - ブラウザはGoogle Chromeを推奨します。
    - たぶんAndroidでも動きます。残念ながらiOS/iPad OSではAppleのポリシー的に動かせません。
- アニメーション閲覧用 iPhone, iPad (1台)
    - **[StroboScopeApp](https://apps.apple.com/jp/app/stroboscopeapp/id1260603638)を購入し、インストールしておく必要があります**。OSは13以上の方が望ましいようです。<BR><img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/1f14418a-a569-9cee-595d-93dea5dc4ff8.png">
- ハサミ、セロテープ、両面テープなどの文具

## 最終的な構成
こんな感じで使うことになります。
<img width="800" alt="topology.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/d710a11f-b783-4def-8e9c-be1aca099a05.png">

# 遊びの手順

## 1. キューブのソフトウェア動作確認

まずは、ソフトウェアでキューブを動かせるかを確認しましょう。その前に、**注意ですが、キューブのFWは最新版にFWしてからご使用ください！**

1. キューブの電源をONにします。
2. また、事前にWindows PC/ macOS PC上で、BluetoothがONになっていることを確認してください
2. PCにてGoogle Chromeから**[Stroboscope with toio™Core Cube](https://editor.p5js.org/tetunori/present/7mfpgXD5Z)**にアクセスします。<BR><img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/1efe3cc2-ae13-3c81-2bd7-1c0aac09fd17.png">
    3. **[ココ](https://editor.p5js.org/tetunori/sketches/7mfpgXD5Z)**でソースコードも見られますヨ
4. この画面をクリックしてキューブと接続します<BR><img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/dbd6723b-96d8-0e2f-e884-a4aa82f28d3f.png">
    5. キューブを選択し『ペア設定』ボタンを押して少し待つと、接続処理が完了しキューブのランプが白く光ります。
6. スペースキーを一度押すと、背景が黄緑色になり、キューブが回転し始めたらOKです！もう一度スペースキーを押すと回転が止まります。動かなかった方は、**キューブのFWは最新版にFWになっていますか？**
    7. 上に載せるモノへの影響を極力少なくするために、加減速して目的スピードに達する仕様になっています。
8. さらに細かく調整したい方向けに、最大回転速度と、回転方向などを動的に切り替えられるようにしています。操作仕様は下記の通り。

|カテゴリ|操作方法|
|:-:|:-:|
|回転の開始・停止|スペースキー押下|
|最大スピードの調整|↑: スピードアップ, ↓: スピードダウン|
|回転方向の設定|←: 反時計回り, →: 時計回り|

### 2. 回転台の工作
1. まずはA4サイズで印刷された[工作シート](https://docs.google.com/drawings/d/1DZwZwWeU7HtirLlpZvzEzGgM2nY29glYL6jzx5pFU0M/edit?usp=sharing)から、四角いパーツと丸い大きなパーツをハサミで切り出します。特に四角いパーツは後でコレをガイドとして貼り付けしますので、できるだけ正確に切り取りましょう。なお、丸いパーツはしばらく使わないです。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/97080187-94ad-a096-53e2-d159f1e4fb14.jpeg">

2. ここでCD/DVDを取り出し、CD/DVDの内側の穴と切り取った四角いパーツの黒い丸がピッタリ合うように、裏側からテープで止めます。ここも出来るだけ正確に貼り付けます。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/0b7a9da8-1af4-e491-f328-4e4f97a91799.jpeg">

3. 次に、CD/DVDを裏返して、四角いパーツにtoioコアキューブ専用プレート(LEGOの4*4プレートでも良い)を両面テープでつけます。この時、貼り付ける向きに注意してください。キューブを取り付けたとき、CD/DVDの中心に近い方にキューブのtoioロゴが来るように貼り付けます。専用プレートで言うと**突起が付いている辺が中心に近くなる向き**です。光に透かすと向きがはっきりとわかりますよ。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/982b121b-03e5-ef02-1ff9-a43b58857c1a.jpeg"><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/34d8ca9d-e746-e263-a63a-3ebbc71788c9.jpeg">

4. それではキューブを取り付けて回転させてみましょう！四角いパーツの黒丸の中央に白い点があると思いますが、回転させてもこの白い点がブレていなければ成功です！多少はズレていても楽しめますが、大幅にずれている場合はこの時点で工作を何度かやり直してみてください。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/1b72780c-664a-a706-76b1-24f9fd4a7286.jpeg">


### 3. サンプルでの動作確認
#### ベーシックなサンプル
1. ここまでの設定・工作がうまくできているか確認するために、サンプルシートで動作確認をします。A4サイズで印刷された[ストロボスコープのサンプルシート](https://docs.google.com/drawings/d/1GTJYqccKdrPHcrgvH4nU6RhFaf4kdSIWkYRhtnHlTMs/edit?usp=sharing)から、一番左上にある**図形がらせん状に回転している絵のもの**を切り取り、CD/DVDに両面テープで張り付けます。丸いパーツはCD/DVDの直径12cmピッタリに作っていますので、CD/DVDの外枠に合うように正確に貼り付けます。工作側はこれにて完了です。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/84d29c19-d769-6e61-c027-82673217df65.jpeg">

2. 次に、iOS/iPad OS上のアプリ**Stroboscope**を立ち上げましょう。1点だけ準備が必要で、一番左上にある設定メニューを開いて、**FPSという項目を20に変更してください**。『＋』ボタンをタップすると変更できます。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/4a249e94-58cf-1cb4-f1e0-7b9d9fa68cfd.jpeg">

3. では先ほどのソフトで回してみましょう！ぐるぐると無限に形状が変化するアニメーションが見えたとおもいます！基本の操作はこんな感じですが、前述のとおり、**PC上のキーボードの左右キーを押すと回転方向を変更することが出来ます。**回転方向が変わるだけで、また違ったアニメーションに見えるのも不思議ですね。なお、このサンプルはらせん状に描くことでアニメーションとしてのコマ数を多くとるサンプルになっています。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このツールを使うと、<a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> の作品も現実世界でアニメーション出来ます。<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> なら回転方向も指定できますが、回転方向によって違う表現に見えますね。<br><br>なお、コチラの絵はOpenProcessingにあげています。<a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> のサンプル[Morph]をベースに作っています。<a href="https://t.co/Au7zL3v5Ki">https://t.co/Au7zL3v5Ki</a> <a href="https://t.co/yqiV72E2R8">pic.twitter.com/yqiV72E2R8</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1319927214603857920?ref_src=twsrc%5Etfw">October 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### スピードの異なるアニメーションのサンプル
1. 次にサンプルシートから数字と目、立方体が描かれたシートを切り取り、同様にCD/DVDに張り付け、先ほどと同様に動作させます。ただ、先ほどと違いコマ数が減っていますので、なんだかせかせかして数字など読みにくいです。こんな時は、回転のスピードを下げましょう。これも前述のとおり、**PC上のキーボードの上下キーを押すと回転スピードを変更することが出来ます。**今回は、下キーを何度か押して**38**に設定し、また、Stroboscopeアプリ上のFPSも**10**へ下げてください。すると先ほどよりも視認性の高いアニメーションになったと思います。ただ画のカクツキは増えてしまいますので、作品によってこれらの設定をうまく使い分けてください。  
※ 補足：実はサンプルシートには、お勧めのFPS/回転スピードの組み合わせが記載されていますので、暗記する必要はありません。<BR><img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/dd22b979-d4af-9f7c-a640-86156d88fe70.png">
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スピードも調整できるので、FPSと組み合わせるとアニメーションの速度自体も自由に調整可能です。 <a href="https://t.co/ev03fuv38W">pic.twitter.com/ev03fuv38W</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1319927537896574976?ref_src=twsrc%5Etfw">October 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
3. なお、このサンプルではその場にとどまるアニメーションの例、色の変化の例、回転の例、数字等の文字を変化させる例等を確認できます。

#### その他アニメーションのサンプル
1. ここまでくれば使い方はお分かりかと思いますので、最後のサンプルをお楽しみください。唯一カラーで描かれたものがサンプルシートの右上にありますので、そちらを切り取り、(FPS/回転スピード)=(13,30)で動作させます。こちらは[エドワード・マイブリッジ（Eadweard Muybridge)さんという方が1893年に作成したフェナキストスコープ用円板](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A7%E3%83%8A%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97)です。当時は鏡やスリットを駆使してアニメーションを見ていたようです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これは、エドワード・マイブリッジ（Eadweard Muybridge)さんという方が1893年に作成したフェナキストスコープ用円板です。当時は鏡やスリットを駆使してアニメーションを見ていたようですが、<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> ならすんなり簡単に。<br>有名なギャロップの写真アニメーションにもチャレンジしたい。 <a href="https://t.co/NAxjEICSF1">pic.twitter.com/NAxjEICSF1</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1319928183848792064?ref_src=twsrc%5Etfw">October 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
2. (2020/10/28追記) もう１つ古典サンプルを用意しました。こちらも記載の設定値でお楽しみください。回転方向に注意してください。 [ストロボスコープのサンプルシート その２](https://docs.google.com/drawings/d/1kFfRqBNQ0a0HFF65LNryhyXgOR41KjfMH7rJ92pW918/edit?usp=sharing)

### 4. 自分でアニメーションを作る
さて、各種サンプルで遊んでいただければ、なんとなくどういう風にアニメーションさせるかはお分かりかと思います。今回は自分でも作成が出来るように、アニメーション作成のためのテンプレートもご用意しています。一番最初に切り出した丸いパーツを取り出してください。<BR><img width="600" alt="image.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/f9943b05-a732-1d15-972a-bda74c94094d.jpeg">

このパーツには、目安としてうっすら、円を8等分する線と同心円上の円の線が描かれていますので、それを基準にご自分のイラストや工作を載せてみてください。**平面のイラストである必要はなく、立体物でも大丈夫というのが本件の面白いところの一つ**ですね。

この時最も注意すべき点は、イラストや工作物を設置する**向き**です。ついつい画像のNGケースのように、自分に対して正面を向くように配置しがちですが、回転してアニメーションさせますので、あくまで**円の中心に向かう方向を0度**として扱ってください。<BR><img width="600" alt="okng.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/aaeecec8-aa67-37b6-cbfa-95dc576d534b.png">

線に沿って色々なものを配置するだけで不思議なアニメーションが量産できます！ぜひ楽しんでください。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このソリューションの一番良いところは、立体物でも簡単にゾートロープできるところですね。手軽にレゴで作ったものの詳細を貼っておきます。<br>自分で作っていて、個人的には赤ちゃんが量産されるヤツがツボでした。 <a href="https://t.co/klDXzaR47A">pic.twitter.com/klDXzaR47A</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1319929076723843072?ref_src=twsrc%5Etfw">October 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 所感と考察
- まずは、楽しいアプリ**Stroboscope**を作成されたMasayuki INOUEさんとパンタグラフさんに、お礼申し上げます。
- 最初のらせん状に描かれたサンプルはp5.jsで描画しています。いつもは当然、画面上でアニメーションさせるものを描いていますが、これが現実世界で動き出す体験はまた新しい表現が誕生したなと感じました。
    - p5.jsで書いた際のコードは[コチラのOpenProcessing](https://www.openprocessing.org/sketch/989598)にあります。この作品は[p5.jsのサンプルコード『Morph』](https://p5js.org/examples/motion-morph.html)を流用して作成しました。
- 回転方向や回転スピードの動的な変更、複数台による連携動作など、このツールとtoioを使って新しい表現がうまれることを期待します。