![見出し画像](https://assets.st-note.com/production/uploads/images/68932370/rectangle_large_type_2_e0c0abf8165db0cab5d4e3de24bb140d.png?width=1200)
#大晦日ハッカソン 2021 の記録
昨年に引き続き、#大晦日ハッカソン に参加したのですが、軽く流れをメモしておければと、この記事を書きました。
最終的にできたもの
最終的には、以下のツイートの内容を、大晦日ハッカソンで作った作品として #Protopedia というサイトに登録しました。
#大晦日ハッカソン の方針変更後。
— you (@youtoy) December 31, 2021
ツイートしてた試作動画( #p5js Web Editor上のマウスの動き + Web Serial API での通信 + micro:bit での LEDテープ制御を利用)に関し、#MediaPipe Hands による指の位置・本数の検出を利用した形に一部置きかえ!
⇒ LEDテープの点灯する色・位置を指で制御 pic.twitter.com/g9oqK8vEm9
最初にやったこと
この時は実家に帰省していたのですが、年末年始の帰省中に micro:bit絡みの試作等をする話を抱えていたため、このようなセットを持っていました。
#大晦日ハッカソン 用ではなく、某案件の検討のために持ち帰ってた物品だけど、
— you (@youtoy) December 31, 2021
大晦日ハッカソン用にも普通に使えそうだなw pic.twitter.com/jGG5fZ861X
そして、作品を何にするか決める前に、とりあえず LEDテープを派手に光らせた様子をツイートしてみたり。
とりあえず派手に光らせてみる。#大晦日ハッカソン https://t.co/4UxEP1P8g4 pic.twitter.com/Hk8npJkyXJ
— you (@youtoy) December 31, 2021
最初の試作
とりあえず、LEDテープを光らせた様子をツイートした後、それを使って何か作ろうと思いました。
少し考えてみて、過去に作ったり記事を書いたりしていた、以下をもとにしたものを試作してみようと思いました。
上記の中に登場していた「MediaPipe Hands によるカメラ画像からの手や指の検出」と「Web Serial API を用いたブラウザと micro:bit との USB接続での通信(シリアル通信)」に、micro:bit を使った LEDテープの制御を混ぜ込んだようなものです。
開発環境には「p5.js Web Editor」を使っていました。
#大晦日ハッカソン の件、
— you (@youtoy) December 31, 2021
micro:bit + フルカラーLEDテープと、 #p5js Web Editor上で動かしている #MediaPipe Hands に、Web Serial API (Chrome と micro:bit を USB で直接通信させるために利用)を組み合わせたもの、
うまく動いたけど、動画にしてみると思ってのと何か違うという感がw pic.twitter.com/J5WAkmPasE
とりあえず作ってはみたものの、これだと「手が開いたとか、特定の指が曲げた状態から伸びた状態になった」というのを「物理的なセンサーを使って検知する」というやり方でもできたり、あまりカメラ映像内での検出を使った意味がない感じがしました。
LEDテープを制御していたプログラム
この時、LEDテープを制御していた micro:bit を動かすプログラムは、ブロックプログラミング環境の MakeCode で作っていました。
#MediaPipe Hands や Web Serial API は JavaScript での実装で、
— you (@youtoy) December 31, 2021
micro:bit の処理(シリアル通信の受信と、フルカラーLEDテープの制御)は添付画像のとおりの MakeCode でのブロックプログラミングでできてます。#大晦日ハッカソン pic.twitter.com/lMu8zPH3cC
方針変更後の試作
それで方針変更をしようと少し考えていたら、「指の動きで LED の点灯する位置が動く」という内容を思いつきました。
その後は、いきなり MediaPipe Hands と連動させるのではなく、p5.js Web Editor上でのマウス操作と連動させるような試作をしてみました。
#大晦日ハッカソン はちょっと方針変更。
— you (@youtoy) December 31, 2021
そのためのテストで、#p5js Web Editor上のマウスの X座標を、micro:bit につないだフルカラーLEDテープの横方向の位置に連動させてみた。
先ほどと同じく Web Serial API を使って、Chrome から USB経由で、座標の値を micro:bit へ送っています。 pic.twitter.com/pXlPGIOPpY
試した感じだと、シリアル通信の値を受けとって LEDテープの点灯位置が都度変化する部分の反応速度は、良い感じでした。
LEDテープを制御していたプログラム
この時、LEDテープを制御していた micro:bit を動かすプログラムは、先ほどまでと同じ MakeCode でした。
MakeCodeのプログラムは、先ほどよりシンプルになっている。#大晦日ハッカソン pic.twitter.com/4RNNNsowJ4
— you (@youtoy) December 31, 2021
最終の仕上げ
あとは、MediaPipe Hands で取得できている指先の位置座標を使い、LEDテープの点灯位置を連動させるような処理をするだけでした。
しかし、ここで「何かのアクションで、LED の色を変化させられると面白いかも」と思い、「1本指・2本指が伸ばされている時に、それぞれ異なる色になる」というものをやってみることにしました。
それで出来上がったものが、冒頭に掲載していたものでした。
LEDテープを制御していたプログラム
最終版も、LEDテープを制御する部分は MakeCode で作っていました。
#大晦日ハッカソン で作った最終版、micro:bit で LEDテープを制御していた部分は、このような内容に。 pic.twitter.com/VB8PAHVWZL
— you (@youtoy) December 31, 2021
なお、色を変化させる部分は、最初はシリアル通信を2回使って(位置の送信と色指定の送信を 1回ずつ)やってみたり、文字列として位置・色指定の情報を連結したものを、受信側で分離するというものも試してみました。
しかし、自分が実装した形では、LED の位置変化の速度が明らかに遅くなってしまっており、単純に数字 1つを送って色の出し分けもできるような内容にしました。
余談
ちなみに、大晦日ハッカソンには昨年も参加していて、その時は以下のものを作っていました。
これは 108回、鳴らせてしまいそうな予感。#toio #大晦日ハッカソン pic.twitter.com/h3MIEif68g
— you (@youtoy) December 31, 2020
この記事が気に入ったらサポートをしてみませんか?