2018年9月18日火曜日

M5StackとNeoPixelで光る帽子を作ってみた


Maker Faire Tokyo 2018 に出展する作品として、M5Stack Gray と NeoPixel を使って光る帽子を作ってみました。

光る帽子の要件

  1. 帽子全体がフルカラーで光るようにLEDを配置した上で制御ができること
  2. 帽子を雑に扱っても怪我をしにくいこと
  3. 帽子は子供が被れるくらいの重さであること
  4. 帽子を落としてもなるべく壊れにくいこと、もしくはすぐに修復できること
  5. 自分がなるべく開発しやすい環境であること

光る帽子を作る上でどんなことを大事にするかリストアップしてみました。Maker Faire の展示ということで故障しにくいことや故障しても復旧が容易であることを重視しています(過去にイベント開始数時間で故障してそのまま終了を迎えるという痛い目にあっているので…)。他にも光る帽子は来場者が被って写真を撮ってもらうことをイメージしていたので帽子の重さや触るときに怪我をしないといったことも重要なポイントでした。

M5Stack を選んだポイント

  • 基板がむき出しではないこと
    • 落としたときでも壊れにくそう
    • 来場者が作品を触ったときに怪我をしにくそう
  • 外部ピンがケースの開け締めなく接続できる
    • 帽子に無理な力がかかったときもケーブルが抜けるだけで基板本体へのダメージが少なくてすみそう
  • バッテリーを内蔵していること
    • NeoPixel用の電源を別途用意する必要がない
  • ESP32を搭載していて、Arduinoの開発環境が使えること
    • 自分が慣れている環境で開発できる
  • (M5Stack Grayのみ)9軸センサを備えていて、帽子の動きにあわせてNeoPixelを制御できること
要件に挙げた内容からM5Stackを選んだ理由がこちらです。M5Stackの特徴から、上記のような効果が見込まれると想定した結果、M5Stackを利用することに決めました。開発環境は人それぞれだと思うので、Arduino IDE 以外に Micro Pythonでも開発できるのはM5Stackの大きな利点かもしれません。また、今回は帽子の動きにあわせてNeoPixelを制御しようと考えたので9軸センサ付きのM5Stack Grayにしましたが、こちらが不要であれば M5Stack Basic でも NeoPixel の制御は可能です。
NeoPixelを選んだ理由は多数のフルカラーLEDを同時に制御する場合のディファクトスタンダードだからでしょうか、ライブラリも用意されていて先行事例も豊富にあるのは非常に心強いです。

M5StaskとNeoPixelの購入

M5StaskとNeoPixelの購入にはスイッチサイエンスさんと秋月電子さんを利用しました。下記URLから同じ製品を購入することができます。

M5Stack Gray(9軸IMU搭載)
https://www.switch-science.com/catalog/3648/

SK6812使用マイコン内蔵フルカラーテープLED 1m 60LED IP20
http://akizukidenshi.com/catalog/g/gM-12982/

LEDが60個では帽子全体を光らせるには光量不足だったのでM5Stack GrayとNeoPixelを3個ずつ購入しています。1個のM5Stackで180個のNeoPixelを制御することも可能ではあると思いますが、電流や電力消費を考えると危険だと判断して1個のM5Stackで60個のNeoPixelを制御する構成を3セット用意することにしました。

M5Staskを使ったNeoPixelの制御方法

まずはハード側、M5StackとNeoPixelを接続してみます。NeoPixelの3pin(緑・赤・黒)をそれぞれ5番、3.3V、Gに接続します。配線はこれだけです。

NeoPixel にある電源用の出線は使いません

次にソフト側を設定します。M5Stackの中身はESP32なので、AdafruitのNeopixel Libraryを使うことができます(参照元:https://qiita.com/tomorrow56/items/fcf5ea7bfd2056e8f88f)。

https://github.com/adafruit/Adafruit_NeoPixel
上記のライブラリのページからZipファイルをダウンロードして解凍、Arduino IDE でライブラリをインポートすると、スケッチ例を読み込むことができるようになります。試しに使うならスケッチ例の Adafruit Neopixel -> simple が理解しやすいと思います。以下、simple を参照しながら開発を進めます。

M5Stackはピン配置がArduinoとは異なるので、simple をそのままM5Stackで実行してもNeoPixelを光らせることはできません。スケッチ例11行目の
#define PIN            6

#define PIN            5 
に修正することで制御が可能になります。また、NeoPixel を制御する個数はスケッチ例16行目の
#define NUMPIXELS      16
 を編集することで変更することができます。上記例では16個までのNeoPixel を制御しています。

インタラクティブにLEDを制御する

決まった光り方を繰り返すだけでは面白くないと思ったので、M5Stackのセンサの値を使ってNeoPixelの色や明るさを制御することにしました。M5Stack Gray は加速度、ジャイロ、磁気を計測できるMPU9250を搭載しているので、ジャイロのX軸, Y軸, Z軸の各値をNeoPixelのR, G, B に対応させて制御することにしました(ジャイロの値そのままではNeoPixelの設定値には大きすぎるので1/10にして設定しています)。
スケッチ例の M5Stack -> module -> MPU9250 -> MPU9250BasicAHRS に加速度、ジャイロ、磁気の各値を取得するプログラムがあるので参照。

帽子にM5StackとNeoPixelを装着する

動作確認ができたら帽子にM5StackとNeoPixelを装着します。最初にNeoPixelを巻き付けてイメージ通りに巻くことができたら結束バンドで固定していきます。最初はNeoPixelの固定にグルーガンを使う予定でしたが、展示後にNeoPixelを再利用することを考えて部品を傷つけない結束バンドを使うことにしました。

結束バンドで固定するためにメッシュ素材の帽子を探しました

NeoPixelを固定した後は帽子の真ん中にM5Stackを設置して、NeoPixelと同じく結束バンドで固定します。M5Stackをどこに固定するかは非常に迷いましたが帽子を被る上で一番邪魔にならなさそうな頭上の溝の部分に配置することにしました。

帽子の溝にピタリとハマるM5Stack


光る帽子完成

無事光る帽子を完成させることができました。ジャイロの値でNeoPixel を制御しているので、帽子を置いているときはNeoPixelが消灯していて、帽子を被っているときはカラフルに光るようになりました。

暗闇に光る180個のLED

所感と今後の展望

Maker Faire Tokyo 2018 に出展するにあたり、自分で展示物を身に着けてモバイル展示をしたいと思い立ったところから光る帽子の製作が始まりました。途中、帽子が光っている様子を自分自身では確認できないことに気が付いて心が折れかけたりしましたが、簡易にプロトタイピングができるM5StackやNeoPixelを使うことで無事完成させることができました。また、Web上に記載されている数多くの先人たちの知恵を借りることでトライアンドエラーの回数を大幅に減らすことができました。
今回の製作では動きに合わせて帽子を光らせるというところまでだったので、次の試作では

  • NeoPixelの数をさらに増やして帽子全面が光るようにする
  • NeoPixelの光るパターンを増やす
  • NeoPixelの電源を外部から取得して、M5Stack1台でNeoPixelを制御する
  • 8pinoなど小型Arduino互換機を使って軽量化する

といったことに挑戦してみようと考えています。

2018年9月5日水曜日

「素敵」を「素数」に変換する Chrome Extension 「素数は素敵」を公開しました

なんでこんなことをしたのか自分でもよくわかりませんが、「素敵」を「素数」に変換するChrome Extension を作りました。

素数は素敵
https://chrome.google.com/webstore/detail/%E7%B4%A0%E6%95%B0%E3%81%AF%E7%B4%A0%E6%95%B5/kpdjnehaegbaneklaigbfjfopgakhfcj


日常を素数と共に過ごしたい方におすすめです。

2018年5月23日水曜日

VRChat を始めるにあたっての備忘録(アバターのアップロード)

無事VRChatを始めることができたものの、標準で用意されているアバターしか選べないというのは面白くないのでオリジナルのアバターをアップロードする。
もちろん一般に公開されている3Dモデルをアバターとしてアップロードすることも可能だが、ライセンスがどのように設定されているかを確認してそのライセンスに沿った利用をする必要がある。
利用が許可されているモデルについての情報はこちらにまとめられているので参照、またアップロードできるのは2万ポリゴンまでのモデルとのこと。

アバターのアップロードについては下記を見ながら進めた。
全くの3DCG初心者が1日でVRChatアバターをBlenderで作ってログインする話-1-
http://vr-san-o.hatenablog.com/entry/2018/01/10/040039
全くの3DCG初心者が1日でVRChatアバターをBlenderで作ってログインする話-2-
http://vr-san-o.hatenablog.com/entry/2018/01/12/041349
全くの3DCG初心者が1日でVRChatアバターをBlenderで作ってログインする話-3-
http://vr-san-o.hatenablog.com/entry/2018/01/25/055756

環境構築

ソフトウェアの入手

VRChatのWebサイトにログインする。
https://www.vrchat.net/home

CONTENT CREATIONの項に
・DOWNLOAD UNITY
・DOWNLOAD SDK
のリンクがあるので、2つともクリックして、特定バージョンのUnityとSDKをダウンロードする。
Unityはインストール&ログインも実施、Unityのアカウントを作っていなければSteamやVRChatと同じメールアドレスを使ってアカウントを作成すると良いらしい。

SDKの取り込み

Unityを起動、ログインし、空のプロジェクトを作成してからVRChat SDK をインポートする。

3Dモデルの取り込み

アップロードするFBXファイルをUnityのAssetsへD&Dして取り込む。Assetsへ取り込んだFBXファイルをクリックするとInspector画面にAnimation Type が表示されるので、
・Generic
・Humanoid
のどちらかを選択しておく(アップロードするアバターが人型であればHumanoidを選択する)。
一旦環境をセーブしてからAssetsにあるFBXファイルをHierarchyの画面にD&Dし、画面に3D モデルが表示されるのを確認する。

3Dモデルへの情報付加

Hierarchy画面で取り込んだ3D モデルを選択し、Inspector画面でAdd Componentのボタンをクリック。検索窓でVRC_Avatar Descriptorを検索して選択。
新しく追加されたメニューの中で、View Position(球)をアバターの目の少し先に設定されるように変更する。

3D モデルのアップロード

Unityのメニュー→VRChat SDK→Settingsを選択、VRChatのアカウントを入力する箇所があるので入力しログインする。
さらに、Unityのメニュー→VRChat SDK→Show Build Control Panelを選択すると、VRChatウィンドウが起動、VRChatウィンドウのBuild&Publishボタンをクリックすると3D モデルのアバターがアップロードされる。
アップロード時に3D モデルの説明を記載する箇所があるので適時記入。

2018年5月19日土曜日

VRChat を始めるにあたっての備忘録(初期設定)

VRChat を始めるにあたってやったことなどをメモ。
viveとか持っておらずデスクトップモードで利用しているので
VRデバイスのセットアップ手順は無し。

基本的に
初心者ガイド (やる事まとめ)
http://vrchatjp.playing.wiki/d/%bd%e9%bf%b4%bc%d4%a5%ac%a5%a4%a5%c9%20%28%a4%e4%a4%eb%bb%f6%a4%de%a4%c8%a4%e1%29
を参照しながらセットアップをすすめた。

アプリのセットアップ

Steamのダウンロード&インストール

https://store.steampowered.com/about/

VRChatをダウンロードするためにまずはSteamをダウンロード&インストール。
(アカウントは事前に作成していたので省略)

VRChatのダウンロード&インストール

Steamを起動して、検索窓にVRChatと入力してVRChatを探す。
見つかったらそのままインストールする。

VRChatのアカウント作成

https://www.vrchat.net/
VRChatのアカウントを作成する(VRChatにログインするだけならSteamのアカウントでもよいらしい)

VRChatの起動&ログイン

VRChatのアプリを起動、起動後ログインが求められるので作成したVRChatのアカウントを入力する。

その他最初にやったこと

Discordのダウンロード&インストール

https://discordapp.com/
情報収集&コミュニケーション用にDiscordをダウンロード&インストール。
VRChat
https://discordapp.com/invite/VRChat

VRChatJP(こちらからリクエストする)
のチャンネルに加入。

Blenderのダウンロード&インストール

自分でアバターを作りたいと思っているのでモデリングのアプリをダウンロード&インストール。
VRChatと同じくSteamを起動して、検索窓にBlenderと入力してBlenderを探す。
見つかったらそのままインストールする。
まだ全然使ってないのでもしかしたらほかのアプリを使うかもしれない。


2018年5月6日日曜日

2018/04/26 おうちハック 小ネタLT大会 に参加

おうちハック 小ネタLT大会にNPなんとかしたいよ(NP帰宅困難)というネタでLT参加してきました。また二か月後くらいに開催予定とのことなので、NP帰宅困難の進捗を発表できればと思っています。

基本的な情報やログはこちら。

イベントページ
https://ouch-hack.connpass.com/event/83917/

togetterまとめ
https://togetter.com/li/1221795


以下、撮影していた写真(ギリギリまでスライドを作っていたので少なめ)。

データの統計大事
 
おうちハックにHUISは欠かせない
 
おうち最後のフロンティア、ダクトレールのハック!
 
R-1グランプリの開催告知

旦那さんは帰る連絡をしてほしい… 

VR勢もおうちハックやってる人多いですね、おうたんもVtuberに?