昨年に引き続き、#大晦日ハッカソン に参加したのですが、軽く流れをメモしておければと、この記事を書きました。

最終的にできたもの

最終的には、以下のツイートの内容を、大晦日ハッカソンで作った作品として #Protopedia というサイトに登録しました。

最初にやったこと

この時は実家に帰省していたのですが、年末年始の帰省中に micro:bit絡みの試作等をする話を抱えていたため、このようなセットを持っていました。

そして、作品を何にするか決める前に、とりあえず LEDテープを派手に光らせた様子をツイートしてみたり。

最初の試作

とりあえず、LEDテープを光らせた様子をツイートした後、それを使って何か作ろうと思いました。
少し考えてみて、過去に作ったり記事を書いたりしていた、以下をもとにしたものを試作してみようと思いました。

上記の中に登場していた「MediaPipe Hands によるカメラ画像からの手や指の検出」と「Web Serial API を用いたブラウザと micro:bit との USB接続での通信（シリアル通信）」に、micro:bit を使った LEDテープの制御を混ぜ込んだようなものです。
開発環境には「p5.js Web Editor」を使っていました。

とりあえず作ってはみたものの、これだと「手が開いたとか、特定の指が曲げた状態から伸びた状態になった」というのを「物理的なセンサーを使って検知する」というやり方でもできたり、あまりカメラ映像内での検出を使った意味がない感じがしました。

LEDテープを制御していたプログラム

この時、LEDテープを制御していた micro:bit を動かすプログラムは、ブロックプログラミング環境の MakeCode で作っていました。

方針変更後の試作

それで方針変更をしようと少し考えていたら、「指の動きで LED の点灯する位置が動く」という内容を思いつきました。
その後は、いきなり MediaPipe Hands と連動させるのではなく、p5.js Web Editor上でのマウス操作と連動させるような試作をしてみました。

試した感じだと、シリアル通信の値を受けとって LEDテープの点灯位置が都度変化する部分の反応速度は、良い感じでした。

LEDテープを制御していたプログラム

この時、LEDテープを制御していた micro:bit を動かすプログラムは、先ほどまでと同じ MakeCode でした。

最終の仕上げ

あとは、MediaPipe Hands で取得できている指先の位置座標を使い、LEDテープの点灯位置を連動させるような処理をするだけでした。
しかし、ここで「何かのアクションで、LED の色を変化させられると面白いかも」と思い、「1本指・2本指が伸ばされている時に、それぞれ異なる色になる」というものをやってみることにしました。

それで出来上がったものが、冒頭に掲載していたものでした。

LEDテープを制御していたプログラム

最終版も、LEDテープを制御する部分は MakeCode で作っていました。

なお、色を変化させる部分は、最初はシリアル通信を2回使って（位置の送信と色指定の送信を 1回ずつ）やってみたり、文字列として位置・色指定の情報を連結したものを、受信側で分離するというものも試してみました。
しかし、自分が実装した形では、LED の位置変化の速度が明らかに遅くなってしまっており、単純に数字 1つを送って色の出し分けもできるような内容にしました。

余談

ちなみに、大晦日ハッカソンには昨年も参加していて、その時は以下のものを作っていました。