福野泰介の一日一創

さばえまつり事務局から、かわいい広報用の素材が公開されたので、MediaPipeを使ってインタラクティブな告知アプリを作ってみました！（元アプリ、CyberSakura開催記念アプリ intercept）

「さばえまつり告知アプリ - intercept with MediaPipe Pose」 src on GitHub
MediaPipeの骨格推定と物体識別を組み合わせて作った骨格複数推定クラス PoseMulti.js を使って、顔にさばえまつりのかわいい宣材「目」を合成しました。

さばえまつり 2024/10/19-20 11:00-17:30 西山公園芝生広場

links
- 全国中高生のサイバーセキュリティ技術ナンバーワンを決める「CyberSakura」優勝は奈良高専チーム

「AR Maze」 src on GitHub or ss.sabae.cc
5x5の手頃な大きさの巨大迷路を楽しめます。PCではカーソルキーの上下左右で歩けます。
ハッシュでサイズ変更に対応。10x10、20x20など、お好きなの巨大迷路をどうぞ！

迷路を3D化するコードはこちら。 const createMaze = () => { const maze = new Maze(mazew, mazeh); const grp = new THREE.Group(); const wall = (x, y, rot) => { const w = createWall(); if (rot) w.rotation.y = Math.PI / 2; w.position.x = x; w.position.z = y; grp.add(w); }; const w2 = wallw / 2; for (const i of maze.grid) { const x = i.x * wallw; const y = i.y * wallw; if (i.walls.top) wall(x, y - w2, false); if (i.walls.bottom) wall(x, y + w2, false); if (i.walls.left) wall(x - w2, y, true); if (i.walls.right) wall(x + w2, y, true); } return grp; }; Maze.js で生成し、4面の壁の有無に合わせて3Dの壁を生成して返しています。

links
- 2012-10-08 迷路作成
- 2018-08-15 426byteの迷路ゲーム、ローカル対戦＆IchigoSodaでネット対戦への改造法
- 2019-12-09 遊んで学ぶアルゴリズム 迷路棒倒し法をIchigoJamでつくろう - クリスマスイベント by コプリ / PCN大阪
- 2024-09-24 JavaScriptで迷路づくり

「迷路作成」 src on ss.sabae.cc
大きさを指定して4面の壁の有無を表すセルを持って、迷路をつくるMazeクラス。スマホでも見やすいサイズの迷路を永遠作るデモ付きです。パラメータをいじって、いろんな迷路を作ってみましょう！

links
- 2012-10-08 迷路作成
- 2018-08-15 426byteの迷路ゲーム、ローカル対戦＆IchigoSodaでネット対戦への改造法
- 2019-12-09 遊んで学ぶアルゴリズム 迷路棒倒し法をIchigoJamでつくろう - クリスマスイベント by コプリ / PCN大阪

「棒人間 - MediaPipe Pose」 src on GitHub
上記を開いてしばらく待って現れる丸はあなたの顔。手を上げたり、全身を映してみたりしてみましょう！

「Pose - mediapipe」
無料で使えるオープンソースなAIライブラリ、MediaPipe Poseは、識別した人体を32点の3次元座標で返してくれます。こちらの座標からいい感じに棒人間になるよう計算して表示するライブラリ drawStickFig.js を作って組み込んでできあがり！

AIに作ってもらった全身像を外部カメラで撮影してみて動作確認。

歩行姿勢の解析や、運動のチェック、モーションキャプチャーなどなど、いろいろと遊べそうなAIライブラリ「MediaPipe」いろいろ活用してみましょう！