ここではM5Stackを使ったユニークな電子工作を前編、後編の2回に分けて紹介していきたいと思います。
今回のユニークな電子工作を紹介してくれるのは、物事の関係性をテーマに活動するアーティストである平原真さんです。長岡造形大学准教授でもある平原さんは、これまでもコンピュータや電子デバイスを使ったメディアアートを多数制作されており、Device Plusでも「Arduinoを使ったソーラーパネルで動くデジタル飼育箱」や「ArduinoとTOF距離センサでつくるドーナツプレーヤ」「Arduinoと加速度センサで作るデジタルボール転がし迷路」「Arduinoと赤色レーザーで作るレーザーストリングス」といったオリジナリティ溢れる素晴らしい電子工作を紹介してくれています。それでは早速見ていくことにしましょう！
目次
- はじめに
- 作品プランと制作の準備
- 電子回路の作成
- 2.1. 配線図
- 2.2. センサユニットの接続
- 2.3. 圧力センサ
- 動作テスト
- 3.1. 開発環境の準備
- 3.2. サンプルプログラムの実行
はじめに
みなさん、こんにちは。平原です。
今回のテーマは「色」です。色は物に反射した光の波長を視覚で認識したものですが、色相によって暖かさや冷たさを感じたり、明度によって重さを感じるなど、心理的な効果もあります。また、肌や髪の色のように個人の身体を特徴づけたり、初めて買ったスマートフォンの色や、大事にしている靴の色のように、思い出と結びつくこともあります。
今回は、身の回りの物から色を吸い取り、液体のように流す事ができる玩具を作ります。カラーセンサで色を読み取り、M5Stack から Wi-FiでPCにデータを送り、TouchDesigner で液体のようなグラフィックを表示します。
この記事は、6つのパートを前後編の2回に分けてご紹介します。
今回の前編は、アイデアをまとめてプランを立て、部品の選定と電子回路の動作確認をおこないます。
- 作品プランと制作の準備
- 電子回路の作成
- 動作テスト
次回の後編は、レーザー加工機を使って筐体を作成し、マイコン側とPC側のプログラムを作ります。
- 筐体の作成
- マイコン側のプログラムの作成
- PC側のプログラムの作成
1. 作品プランと制作の準備
1.1. 全体のイメージ
はじめに、作品の概要を考えます。どういう操作をしたら、どういうことが起きるのか？使用者の気持ちになって体験をイメージしてみます。
今回は、実際の物から色を吸い取りたいと思います。その時にスイッチをカチッと押すよりも、スポイトで吸い込むような操作にしたほうが、自然な感じがしそうです。また、吸い取った色を取り出せるようにもしたいです。その時は、コップの水を流すように装置を逆さまにするとよさそうです。また、使いやすいように、電源や通信用のケーブルは繋がっていない方がいいですね。
1.2. システム構成
全体のイメージを実現するために具体的なシステム構成を考えます。今回は中心となるマイコンとしてM5Stackを使用します。選定の理由は、吸い取った色を表示するためのカラーディスプレイや、PCと通信するためのWi-Fi、バッテリ等を標準装備している点です。
色を読み取るカラーセンサと傾きを検出する加速度センサは、M5Stackにコネクタで接続できるものを使用します。ライブラリが用意されているので簡単に使用できます。
色を読み取るためのトリガーは、指で押した強さを反映するために感圧センサを使用し、電圧のアナログ値を取得します。
色が流れる表現は、M5StackからWi-FiでPCにデータを送り、TouchDesignerで描画を行います。
M5Stack Basic
M5Stackは、液晶ディスプレイ、スピーカ、無線通信機能、SDカードスロットなど様々な機能を搭載したマイコンモジュールです。いくつかのバリエーションがありますが、今回は最も標準的な「M5Stack Basic」を使用します。
M5Stackについての詳しい解説は、こちらの記事を御覧ください。
人気急上昇中のマイコンモジュール「M5Stack」とは？特徴や使い方をわかりやすく紹介！
センサユニット
M5Stack の拡張パーツには2種類あります。1つは名前の通りM5Stackに重ねて（スタックして）使う「モジュール」。もう1つは本体横のGROVEコネクタまたはGPIOピンにケーブルを接続して使う「ユニット」です。
今回使用するセンサは、TCS3472を搭載した「M5Stack用カラーセンサユニット」と、ADXL345を搭載した「3軸デジタル加速度計ユニット」です。どちらもGROVEコネクタに接続し、I2Cで通信を行います。
圧力センサ
FSR402は、円形の部分に圧力を加えると抵抗値が減少する圧力センサです。力を加えていない時は10MΩ、指で押した時は10k~100kΩ程度になります。この性質を利用して、抵抗分圧回路を作り押した強さに応じた電圧を出力します。
1.3. 筐体のデザイン
読み取りたい物の上に乗せ、側面を握り、吸い取った色を上から確認できるようにします。全体はシンプルなボックス型で、底面にカラーセンサ、側面に圧力センサ、上面にM5Stackを配置します。素材は、厚さ4mmのシナベニヤです。レーザー加工機で切断し、木工用ボンドで接着します。
1.4. 部品リスト
使用する物品をまとめました。購入先URLは執筆時点のものです。
| 品名 | URL | 使用数 |
| M5Stack Basic | https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5VYW | 1個 |
| カラーセンサユニット | https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5CLN | 1個 |
| 加速度センサユニット | https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5PJN | 1個 |
| ハブユニット | https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5K6P | 1個 |
| 圧力センサ | https://akizukidenshi.com/catalog/g/gP-04002/ | 1個 |
| 抵抗器 100kΩ | https://akizukidenshi.com/catalog/g/gR-25104/ | 1個 |
| ミニブレッドボード | https://akizukidenshi.com/catalog/g/gP-05155/ | 1個 |
| ジャンパワイヤ | https://akizukidenshi.com/catalog/g/gC-05371/ | 5本 |
| なべネジ M3 15mm | 4個 | |
| ナット M3 | 4個 | |
| シナベニヤ（350mm x 210mm ） | 1枚 | |
| 両面テープ | 適宜 |
1.5. 配布ファイル
作成例を作るために必要なデータを以下のリンクからダウンロードしてください。
>> 配布ファイル
2. 電子回路の作成
2.1. 配線図
加速度センサユニットとカラセンサーユニットは、付属のケーブルで接続し、I2Cで通信します。M5Stack Basic にはコネクタが1つしかないので、ハブユニットで分岐させます。I2Cはそれぞれのデバイスにアドレスが設定されているので、異なるアドレスであれば、複数のデバイスを並列に接続して使用することができます。
圧力センサは押す力によって抵抗値が変わります。押していない時は10MΩ程度、指で押したときは10kΩ程度になります。この性質を利用し、押した強さに応じた電圧を抵抗分圧回路によって取り出します。抵抗分圧回路とは、2つの抵抗の比に応じて電圧が分割される回路です。出力電圧は次の式で求められます。
Vout = R2 / R1+R2 * Vcc
今回の回路では、Vcc=3.3V、R1 = 10MΩ（押していない）、10kΩ（押している）、R2 = 100kΩなので、押していない時は約0.03V、押している時は約3.0Vが出力されます。
2.2. センサユニットの接続
センサユニットを付属のケーブルで接続しましょう。M5Stack Basic にはGROVEコネクタが1つしか無いので、ハブユニットを使い2つのセンサユニットを接続します。ハブユニットには3つのコネクタがありますが、どこに繋いでも大丈夫です。
2.3. 圧力センサ
圧力センサはそのままではブレッドボードに挿せないので、ジャンパワイヤをハンダ付けします。熱を加えすぎるとセンサのフィルムが溶けてしまうので、手早く作業しましょう。はんだ付けが済んだら、接触を避けるために、熱収縮チューブまたはビニールテープを巻いてください。
配線図に従って、圧力センサと抵抗器をブレッドボードに接続してください。AD、3.3V、GNDに接続する3本のジャンパワイヤは、M5Stack Basicの左側面のオスのピンに接続するため、オス-メスタイプを使用してください。オス-オスタイプのジャンパワイヤしかない場合は、M5Stack Basicの右側面のピンに接続してください。
3. 動作テスト
3.1. 開発環境の準備
M5Stackの開発には「Arduino IDE」または「UIFlow」を使用するのが一般的です。「Arduino IDE」は、Arduino Foundationが提供するコードベースの開発環境です。これまでArduino UNOなどを使った事がある人は、こちらが使いやすいでしょう。「UIFlow」は、M5stack社が提供する開発環境で、ブロックを積み上げるようにプログラムすることができます。
今回は「Arduino IDE」を使って開発をおこないます。公式サイトのチュートリアル を参考に、以下の作業進めてください。「Hello World」がM5stack Basic の画面に表示されたら準備完了です。
- ドライバのインストール（Driver Installation）
- Arduino-IDEのダウンロード（Arduino-IDE）
- ボードマネージャへの登録（M5Stack’s board management）
- 最初のプログラム実行（Hello World）
3.2. サンプルプログラムの実行
接続した3つのセンサが動作していることを確かめるためにサンプルプログラムを実行します。配布ファイルの「testSketchM5.ino」をArduino IDEで開き、書き込みをおこなってください。
M5Stack Basic のディスプレイに、このようにセンサの値が表示されていれば成功です！
pressureは圧力センサです。指で摘んで値が変化するか確認してください。r, g, bはカラーセンサの値です。赤、黄色、青など、はっきりした色を読み取り、反応しているか確認してください。背景色は読み取った色で塗っていますが、まだキャリブレーションをしていないのでズレているかもしれません。accX, accY, accZは加速度センサの値です。センサを傾けて連動しているか確認してください。
今回は、M5Stackの開発環境のセットアップと、センサの配線をおこない、サンプルプログラムを試してみました。次回の後編は、レーザー加工機で筐体を作り、Wi-Fiでデータを送り、TouchDesignerで水が流れるようなビジュアルを作ります。お楽しみに！
今回の連載の流れ
前編：M5Stackとセンサで作るカラーリキッド（今回）
後編：M5Stackとセンサで作るカラーリキッド
