LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ufoo68inIoTLT

M5StickC Plusで６つのストーンが光るガントレットを製作する

Last updated at Posted at 2023-12-04

はじめに

IoTLTの2023年アドベントカレンダーに向けて書いた記事です。Internet要素が皆無ですが、M5StickC Plusを使ったので良しとして下さいw

作ったもの

XのPostを見てもらうと早いと思います。

手に力を込めると、某映画でお馴染みの６つのストーンが光るガントレットを作りました。

材料一覧

主に使ったマイコンや電子部品などです。押入れから引っ張り出してきたあまり部品も使ったので全部は載せていません。

製作過程

ここから工作ブログっぽくなりますが、実際の製作過程について簡単にまとめてみます。

まずはガントレット購入

ゼロからガントレットを作るのは大変なので、コスプレ用に売っているものを買って改造することにしました。さきほどの材料一覧で載せたのですが、Amazonでちょうどいい感じのものが4000円ほどで売っていたのでポチりました。

さてここで課題が、、、指が曲がらない！！
指が開いた形でがっちり固定されていて自由に動かせない。。。これでは某エンドゲームの指パッチンのマネができないのです。

ガントレットを少し改造する

当初はガントレット製作に関しては既製品を使って追加の電子工作だけをやろうと思っていたのですが、ガントレットのハード部分も改造することにしました。

↑とりあえず指は一旦切り落として↓手袋に貼り付けて指を曲げられるように改造しました。

指に感圧センサーを仕込む

ここから電子工作パートです。とりあえずガントレットで何かしらインタラクティブなことをしたいと思っていたので、某映画で印象的な指パッチンの動作をトリガーにしようと思いました。
そこから思いついたのが指に感圧センサーを仕込むという方針でした。感圧センサーはハンダ付けなしで手軽に使えるGroveのタイプのものを選びました。マイコンについては、ウェアラブルなものが作りやすそうだなという理由から腕時計アクセサリー付きのM5StickC Plusを使うことにしました（別に性能面で考えるとPlusにする理由はなかったのですが、たまたま積み基板していたものがあったので使ってみました）。

感圧メーターを可視化

まずは肩慣らしと圧センサーのテストを兼ねてプログラミングをしてみます。
開発環境はPlatformIOでやりました。M5StickC Plusでの開発環境の構築方法については↓で解説されている記事があります。

とりあえず開発環境を構築後、感圧センサーの値を可視化するコードをChatGPTに相談しながら書いていきました。実際に書いてみたコードが↓です。

#include <M5StickCPlus.h>

#define ANALOG_PIN 33  // アナログセンサーのピン番号

// 関数の宣言
void drawMeter(int value);

void setup() {
  M5.begin();
}

void loop() {
  // アナログセンサーの値を取得
  int sensorValue = analogRead(ANALOG_PIN);

  // メーター表示
  drawMeter(sensorValue);

  delay(100);
}

void drawMeter(int value) {
  M5.Lcd.fillScreen(TFT_BLACK);  // 背景を黒でクリア

  // メーターの描画
  M5.Lcd.drawRoundRect(60, 20, 20, 200, 5, TFT_WHITE);  // メーターの外側の枠

  // メーターの値に基づいて色を変更
  uint16_t color = TFT_GREEN;
  if (value < 300) {
    color = TFT_RED;
  } else if (value < 700) {
    color = TFT_YELLOW;
  }

  // メーターのバーを描画
  int barHeight = map(value, 0, 4095, 0, 200);
  M5.Lcd.fillRect(60, 220 - barHeight, 20, barHeight, color);

  // 数値を表示
  M5.Lcd.setTextSize(2);
  M5.Lcd.setTextColor(TFT_WHITE);
  M5.Lcd.setCursor(5, 5);  // 数値を表示する位置を調整
  M5.Lcd.printf("%d", value);
}

とりあえずM5StickC Plusでも問題なく感圧センサーが使えることがわかりました。

LED点灯を制御

次に指先の感圧センサーの動きと連動して６つのストーンが光るようにしてみました。
実は改造前の状態でも各ストーンの中にLEDが仕込まれていたのですが、現状だと６つのストーンの光り方をまとめて制御することが難しかったので新たにLEDを仕込んでマイコンから制御することにしました。
LEDの光を制御するために外部電源としてCR2032（なるべくコンパクトにしたかったのでボタン電池に）を使ってトランジスタを使ってスイッチング回路を組みました。

トランジスタで使ったのはKSC1815という2SC1815の互換品です。2SC1815を使ったスイッチング回路の組み方については↓で解説されていたのでそれを参考にしました。

感圧センサーの値とLEDの光り方を連動させるためにコードを拡張しました↓

#include <M5StickCPlus.h>

#define ANALOG_PIN 33   // アナログセンサーのピン番号
#define LED_PIN 32      // LEDのPWMピン番号
#define PWMCH 1         // PWMチャンネル番号

// 関数の宣言
void drawMeter(int value);

void setup() {
  M5.begin();
  pinMode(LED_PIN, OUTPUT);
  ledcSetup(PWMCH, 12000, 8);
  ledcAttachPin(LED_PIN, PWMCH);
}

void loop() {
  // アナログセンサーの値を取得
  int sensorValue = analogRead(ANALOG_PIN);

  // メーター表示
  drawMeter(sensorValue);

  // LEDの制御
  int brightness = map(sensorValue, 0, 4095, 0, 256);
  ledcWrite(PWMCH, brightness);
  delay(100);
}

void drawMeter(int value) {
  M5.Lcd.fillScreen(TFT_BLACK);  // 背景を黒でクリア

  // メーターの描画
  M5.Lcd.drawRoundRect(60, 20, 20, 200, 5, TFT_WHITE);  // メーターの外側の枠

  // メーターの値に基づいて色を変更
  uint16_t color = TFT_GREEN;
  if (value < 300) {
    color = TFT_RED;
  } else if (value < 700) {
    color = TFT_YELLOW;
  }

  // メーターのバーを描画
  int barHeight = map(value, 0, 4095, 0, 200);
  M5.Lcd.fillRect(60, 220 - barHeight, 20, barHeight, color);

  // 数値を表示
  M5.Lcd.setTextSize(2);
  M5.Lcd.setTextColor(TFT_WHITE);
  M5.Lcd.setCursor(5, 5);
  M5.Lcd.printf("%d", value);
}

これで指にかけた圧と連動して、ストーンの光が変わるようになりました。

さいごに

以上までが某ガントレット製作の進捗状況となります。まだまだ課題はあると思っていて、

  • 一部のLEDの点灯が弱い
    • 多分動画でも緑と青のストーンの光り方が弱いなーというのが見てわかるかと、、
    • 並列で複数のLEDを並べてしまうと緑や青のLEDが黄色や赤に比べて光りにくくなるようです
  • 指パッチン関係ない
    • 現状のガントレットの仕様は指先に力を入れるだけで光ってしまう
    • でも現状の指の力で光の強弱を変えるという仕様も割と気に行っている
  • 音を鳴らしたい
    • 本当はM5StickC Plus用 Speaker 2 HATも購入している
    • 「指パッチンをしたら実際の指パッチンの音が出る」みたいなことをやりたいのだが、音の再生が思うように行かない。。。

IoTLTAdvent Calendar 2023

Day 5
3
1
0

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
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?