最近、ml5.jsやp5.jsを使って、カメラから手や指を認識する仕組みをいろいろ試しています。

手を映すと、

「ここが親指」 「ここが人差し指」 「ここが指先」

みたいな位置がリアルタイムで取れます。

へぇー、すごい。

……で終わればいいんですが。

5本の指先が全部取れる画面を見ていて思いました。

これ、あの魔法撃てるんじゃね？

ということで作りました。

これ。知ってますか？

↓↓↓

画像の編集は拙作のツールを使っています。意外と便利。

↓↓↓

画像を貼ってモザイク・黒塗り・文字入れ｜無料・登録不要画像を貼り付けてモザイク・黒塗り・文字入れ。EXIF・GPSを確認し、コピー・保存時に自動削除できる全機能無料・登録不要の画像編集ツールです。リンク先を開く

5本指を立てると炎が出ます

カメラに手のひらを向けて、指を立てます。

指先が認識されると炎が出ます。

1本。（メ）

2本。（ラ）

3本。（ゾ）

4本。（オ）

そして5本。（マ）

ふぃんがーふせおＪ；おいＳＤＦ！！！

全部そろうと魔法陣が出て、画面が光って、揺れて、発動します。

5本指を立てたら魔法が撃てた｜カメラで炎魔法を撃つ無料ゲーム｜LYNROADカメラに手のひらを向け、5本の指を立てると炎魔法が発動。指先の炎、魔法陣、爆発で遊べる無料のブラウザゲームです。指を閉じればもう一度撃てます。登録不要。点滅・画面の揺れがあります。リンク先を開く

中身はちゃんと機械学習です

完全にネタですが、中身ではml5.jsを使って手の位置を認識しています。

手首や指の関節、指先などの位置から、

「この指は立っているのか？」

を判定しています。

5本全部立ったら発動。

一度手を閉じれば、また撃てます。

登録もインストールもいりません。

ブラウザとカメラがあれば遊べます。

カメラ映像は送っていません

手の認識はブラウザ内で行っています。

カメラ映像や手の位置データを、このアプリからサーバーへ送信したり保存したりする処理はありません。

カメラを使うので少し怪しく見えるかもしれませんが、映像を集めるためのものではありません。気になる場合は、ブラウザの開発者ツールのNetworkなどから通信内容を確認できます。

カメラ映像や手の位置データを、このアプリからサーバーへ送信したり保存したりする処理はありません。なお、ライブラリや認識モデルの読み込み、アクセス解析には通信を使用します。

ただし、手の認識処理を端末側で行うので、スマートフォンでは少し重いことがあります。

明るい場所で、手全体がカメラに入るようにすると認識しやすいです。

子供のころは出なかった

子供のころ、こういうの真似しませんでした？指を一本ずつ立てて、例の技名を叫ぶやつ。

当然ですが、当時はいくらやっても指先から炎は出ませんでした。

でも今は2026年。機械学習があります。

本物の魔法は無理ですが、ブラウザの中ならそれっぽいものは出せました。

技術の使い方として正しいのかは知りません。

ほかにどんな魔法出そうか考え中です。

なんかおもろいもの作れんかなぁ？

機械学習を勉強していたはずなんですが、最近こういうくだらないものばかり作っています。

でも、実際に動くものを作ると、

「手の座標ってどう取る？」 「指が伸びているってどう判定する？」 「誤認識をどう減らす？」

みたいなことを考えるので、意外と勉強になります。

将来ちゃんと役に立つものを作るために、こういう無駄なものも必要なんじゃないかと思っています。

たぶん。

無料で遊べます。

何発でもどうぞ。

5本指を立てたら魔法が撃てた｜カメラで炎魔法を撃つ無料ゲーム｜LYNROADカメラに手のひらを向け、5本の指を立てると炎魔法が発動。指先の炎、魔法陣、爆発で遊べる無料のブラウザゲームです。指を閉じればもう一度撃てます。登録不要。点滅・画面の揺れがあります。リンク先を開く

※炎、明るいフラッシュ、画面の揺れを含む演出があります。光の刺激や画面の動きが苦手な方は利用を控えてください。