株式会社mofmofのkomaです。
mofmofでは、毎週水曜日に「水曜日の個人開発」というイベントを行なっています。
この記事では、そのイベントで作っている「Web水見式(β)」を紹介します。
このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
Webで水見式？
水見式とは、HUNTER×HUNTERという漫画の中に出てくる”念”という能力の系統を判定する方法です。
Web上でハンドトラッキングを活用して、さらに最近気になっていたp5.jsを使ったクリエイティブコーディングなどを組み合わせて水見式の判定結果を表現できたら面白いのでは？と思い、作ることにしました。
ハンター文字で表示されていますが、カーソルを当てるとひらがなで表示されます(読みづらい)。
何で作っているか
- Preact
- Vite
- p5.js
- handsfree.js
- GitHub Pages
- GitHub Actions
このアプリの肝となるハンドトラッキングとp5.jsによる描画は、以下の記事を参考に作っています。
ハンター文字のフォントは以下のサイトからダウンロードして使わせてもらっています。
もっとこうしたいと思っている点
ジェスチャーの認識精度の向上
登録したジェスチャーをトリガーとして判定を行うようになっていますが、ジェスチャーがうまく認識されない場合があります。
判定結果によってインタラクティブなエフェクトをcanvasに描画する
こんな感じ↓のイメージで系統ごとにインタラクティブなエフェクトを鋭意作成中。
判定結果をユーザーごとに保存する
毎回ランダムな判定結果でも良いのですが、作中では本来その人の性質によって決定されるものなので、一度判定した結果は保存しておきたいですね(社内フィードバックより)。
最後に
このイベントが始まって2ヶ月という区切りを迎えたので、β版として公開しました！
よかったら遊んでみてください〜(下の方で水見式のジェスチャーをすると認識されやすいです！)