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に?

2018/03/25 NT京都2018 を見てきた

NT京都2018 を見学してきました。
日本の Maker Faire では展示できないネタも多く、毎年盛り上がっていて一度行ってみたかったニコニコ技術部のイベントです。

イベントページ
http://wiki.nicotech.jp/nico_tech/index.php?NT%E4%BA%AC%E9%83%BD2018

togetter まとめ
https://togetter.com/li/1212485
https://togetter.com/li/1213823

室内(通常と暗い部屋)、室外(境内と屋上)にびっしり、中には過激な展示もあってNTに参加される人がよく言う Make Tokyo Meeting 感がこれかと懐かしい気持ちになりました。そして作りたいもののアイデアがいろいろと湧いてくるのでNTにも出てみたくなりますね。。


以下、写真。

テスラコイル


一発ネタかと思いきや本格的なゲーム!

X1


デジタル日時計、移り変わりを見ているのが楽しい

時刻は20分単位

ミクさんキター


ジャパリコインだ

キノコで演奏

FF6で見たやつ!


外にも会場が



でかいIC

レールガン、音も破壊力もすごい

クソゲーム(良いクソゲーム)

折り紙の再現度高い

メトロイド折り紙







2018年5月3日木曜日

2018/04/13 アイデア供養祭を開催

4月13日の金曜日、アイデア供養祭を開催しました(と言ってもアイデア出しをしただけですが)、クラッピー判別というネタで発表もしています。

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

イベントページ
https://mashupawards.connpass.com/event/81848/

中継の様子その1
https://www.facebook.com/mashupawards/videos/1727854070571379/

中継の様子その2
https://www.facebook.com/mashupawards/videos/1727912913898828/

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

MAのイベントレポート
http://mashupaward.jp/2018/04/event_kuyo/

ネガティブめな趣旨のイベントだった為か参加者は思ったほど伸びず、聴講者よりも発表者の方が多いという形になってしまいましたが、アットホームな雰囲気の中でおこなわれる発表は終始楽しいものでした。人の失敗談を聞くというのはなかなかできないけど、人の成功より失敗からの方は学びが大きいはずだし、何とかして第二回も開催したいとタイミングを狙っていきたいと思います。東京以外ででも開催したい場合は木魚とおりんはいつでも貸し出し可能です笑


自動木魚叩き機

雰囲気のある会場

MA新規体制後初のイベント!

2018年3月24日土曜日

英語学習を60日続けてみてのまとめ

今年の1月に今さんの呼びかけに乗っかって英語学習を開始して60日が経過したので、現時点でのまとめ。

今さんのエントリ
元オンライン英会話サービスCTOのオレが考える最強の英語学習方法
http://konyu.hatenablog.com/entry/2018/01/19/111405


自分のモチベーションと現在の英語能力について
・英語学習の結果、なりたい姿(なぜ私は英語学習をするのか?優先順位順)
 -海外のMaker Faire に参加 or 出展したとき、コミュニケーションで困らないようになりたい
 -英語のニュースとか技術情報とかをもっとすらすら読めるようになりたい
 -シンガポールとか家族で海外旅行にも行きたい
 -中国語とか他の外国語を学ぶ第一ステップにしたい

・現在の英語能力
 -TOEICはMAX550点(ECCに通ってた時で。。)
 -英語のニュース記事内で読めない単語の意味を検索している間に力尽きる
 -一人で英語圏に行くのは無理め

・なりたい姿と現在の能力から、英語学習で何をするべきか?
 -英文を読むことに慣れる
 -単語力の強化

ここまで書いたものの、こういった試行は過去にも何度か挑戦して挫折しているわけで、直近数か月の目標としては
・英語学習を習慣化する
 →習慣化できる英語学習法を見つける
がメイン。本当はブログエントリにもあるように、いくつかのことを平行したやった方がよいと思うけど、まずは続けることに重きを置いたところ。

で、どのような学習スタイルで始めたかというと、
・いつどこで学習していたか
 -夜、帰宅途中の電車内
・何で学習していたか
 -Newsela アプリ
  https://newsela.com/
・どのように学習していたか
 -Newsela アプリで気になる記事を見つけたら一番低レベルに設定して最後まで読み切って付属のクイズに回答する
 -クイズに回答したら画面をスクショしてみんチャレに報告
 -文章内でわからない単語があったら翻訳にかけてその単語をクリップする

というもの。でもこれは長期間続かず。。その理由としては
・帰宅時の電車で寝ちゃう
 →朝の通勤中にやることで解決
・Newsela アプリで一番低レベルに設定しても知らない単語が多すぎる
 →翻訳とクロップに時間がかかりすぎて途中でくじける
 →致命的

の2つで、まずは致命的な単語力の強化に集中することにした。
単語力強化ということで、DUOの本を買ったりしたけど、物理的な本を読むのがしんどくてこちらも続かず。スマホアプリでできることが自分にとっては重要なんだなーという気付きを得た。(DUOのアプリ欲しい…)

で、現在の学習スタイルがどうなったかというと、
・いつどこで学習しているか
 -朝、通勤途中の電車内
・何で学習しているか
 -NHKゴガク アプリのボキャブライダー
  https://www2.nhk.or.jp/gogaku/app/
 -mikan の中学英単語
  http://mikan.link/
・どのように学習しているか
 -ボキャブライダー:火~土曜日はデイリークイズの基本と応用を回答する
 -ボキャブライダー:日曜日は週のまとめクイズを回答する
 -ボキャブライダー:月曜日は前週の不正解のクイズを再回答する
 -ボキャブライダーのクイズに回答したら画面をスクショしてみんチャレに報告
 -mikan:毎日気が済むまで中学英単語のクイズに答える

という感じ。このスタイルになってまだ2週間くらいだけど安定して続いていて、学習にかけている時間は一日30分くらい。

とはいえ現在も課題がないわけではなく、
・土日の学習時間の捻出
 -通勤時間のない土日にどうやって学習するか模索中、決まった時間に決まった場所でやれれば理想
・mikanの学習量を一定にする
 -やりすぎてもやらなさすぎても続かないと思うので、適量を見定めたい
・Newsela アプリ復活のタイミング
 -mikanで高校単語を一通りやったくらいかなー
辺りを今後何とかしていきたいところ。

自分の場合、こういった自身に合ったスタイルを確立するまでの試行錯誤をしている間に習慣化に失敗するのが今までの流れだったように思うけれども、みんチャレで頑張っている人の姿を見る&少なくとも何かしら手を動かし続ける、という効果でくじけずに続いたような気がする。

まとめ
・自分に合った学習スタイルを見つけるまでが結構大変
・みんチャレは偉大
・こういうエントリを書いて学習を挫折しないためのプレッシャーにしたい
・きっかけをくれた今さん&同じチームのみなさまありがとうございます!