インタラクティブな多段階の光学迷彩／透明マントエフェクトが体験できるWebアプリ
p5.js と MediaPipe を組み合わせて、インタラクティブな多段階の光学迷彩／透明マントエフェクトが体験できるWebアプリを作りました
動物（ウサギ・ネコ・犬）を描き出すインタラクティブなパーティクル（Webアプリ）
パーティクルが動物の輪郭を描き出す仕組みを作り、その位置や色を手のジェスチャーでインタラクティブに変化させる仕組みを足した Webアプリです
未来の健康体験がここに！「AR BALANCE GAME」
スマホ一つで誰でも楽しめる、ARフィットネスゲーム！１日３分の習慣化で楽しみながら健康づくりができます！
PuRimo
離れた場所にいる家族や友人を同一画面内にリアルタイムに合成することで、まるで隣にいるかのような感覚で一緒に集合写真が撮れるテレビ電話アプリ
「片手／両手の親指と人差し指でつまむ動作」で流体の見た目を操るインタラクション【元ネタあり】
PavelDoGreat/WebGL-Fluid-Simulationのリポジトリで公開されている流体の見た目を、p5.jsのキャンバスで動かした試作に、AIによる両手の認識を使った機能を加えました
ブラウザ上でAI・機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」- 【2025】
両手の親指と人差し指で囲まれた領域で「光学迷彩・透明マント的なエフェクト」を出す、インタラクティブな体験型展示です。カメラ画像に対するAI・機械学習処理と描画ライブラリによる描画で実装しました。
ジャグリングゲーム「JUGGLE (ジャグル)」
音ゲー的なノリでジャグリングをしたい人へ。動画認識技術によってカメラインプットのみからジャグリングの技を判定するゲームです。ジェスチャーのみで操作可能！
ハッコム
デジタルとアナログの融合！箱に手を突っ込んで画面内の小人を助ける新体験のインタラクティブアート！
Geocussion
砂を叩き押し固めてオブジェクトを作り出し、音を大きく鳴らしたいならば大きなオブジェクトを作り、形を変えれば異なるを鳴らせる砂場上の楽器。
ぐーぽんっ！
旅行者と地元民のマッチングと、話すきっかけや話題を提供するアプリ。 二人でグータッチ写真を撮影すると、ガチャが回せます。 一期一会からその先へ、人のつながりで旅をもっと楽しく！
EyeGuardAlert
VDT症候群予防webアプリケーション
シンクロ・ヴォックス シミュレータ
唯一無二のアニメーション技法、シンクロ・ヴォックス（Syncro-Vox, Synchro-Vox）方式のアニメーションを体験しよう！
#p5play の物理演算や #p5js の描画 #MediaPipe を組み合わせた試作
#p5play の物理演算エンジンを #p5js の描画に適用しつつ、さらに #MediaPipe で認識した手でインタラクションが行える仕組みの試作です
万華鏡写輪眼が開眼できる Webアプリ（p5.js ＋ MediaPipe）
MediaPipe の JavaScript版を使って、カメラ映像から虹彩を検出し、そこに p5.js のベジエ曲線などを用いて描いた万華鏡写輪眼の絵を重畳しています
AIで手話を認識するアプリ～JSL～
JSLは聴覚障がい者、難聴者におけるコミュニケーションを支援するアプリです。手話をリアルタイムでチャットテキストに変換することで、情報共有と社会参画の機会を提供する新たな通話プラットフォームです。
MediaPipe「手のジェスチャー認識」と p5.js での引力が働くオブジェクトの描画の組合せ
MediaPipe「手のジェスチャー認識」と p5.js での描画を組み合わせました。描画の内容は、相互に引力が働く動くオブジェクトの描画（※ Mutual Attraction）です。
人の動き(画像認識)に合わせてDMX照明機器を操作してみた
現実空間の人の動き(画像認識)に合わせてムービングライトを動かすことを目標に、Art-Net経由でDMX照明機器を制御してみます。
Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の組み合わせ v2
Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。ジェスチャー認識で円の動きの切り替えを行う仕組みを入れています
Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の描画と組み合わせ
Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。p5.js で描画した連なる円の動きの部分ではイージングも組み合わせています
エンジニアのための掛け声
カメラから取得した映像を元に、デスクワーク中の姿勢を判定していい感じに声を掛けてくれる（通知してくれる）サービスです。これで孤独なリモートワーク中でも、姿勢を保って健康的にお仕事ができます。
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」
「両手の親指と人差し指で囲まれた領域は、人の後ろの背景が見える」という光学迷彩・透明マント的なエフェクトを、カメラ画像に対する機械学習処理と描画ライブラリによる描画で実装しました
背景ぼかしと自動フレーミング
Mediapipeが提供するFaceTrackingとSelfie Segmentationを利用して背景ぼかし、さらに顔を画面の中心に表示。
【指先付近のみに焦点があうカメラ映像】p5.js と MediaPipe Hands で実装
人差し指の先を起点に、その周りだけ焦点が合う（その点から遠いとブラーフィルタのぼかしが強くなる）という仕組みを、カメラ画像に対する機械学習処理と描画ライブラリによる描画で実装してみました
ミャクミャクAR
Webブラウザとカメラがあれば誰でもミャクミャクに！GoogleのmediapipeによるSelfieSegmentationとFace Detectionを活用しています。
イラスト風ARフィルタ
Googleのmediapipe.jsによるSelfie SegmentationとOpenCV.jsによるエッジ検出を使った簡易フィルタ
ARライトセイバー
googleのmediapipe.jsによるハンドトラッキングとOpenCV.jsを活用し、親指を立てた時にライトセイバーが表示されるWebコンテンツ。Webブラウザがあれば体験できます！
【2本の指で作る小さな透明マント的エフェクト】p5.js と MediaPipe Hands で実装
親指と人差し指で囲まれた領域は、人の後ろの背景が見えるという、透明マント的なエフェクトをカメラ画像に対する機械学習処理と描画ライブラリによる描画で実装してみました
某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（かもしれない）Webアプリ V3
10本の指全てに強力な火炎系呪文を宿す！？某アニメの悪役が使うあの危険な禁呪よりも、さらに強力な呪文があなたの手に... このWebアプリがあれば、あなたも大魔道士に！（シリーズのバージョン3）
パワーポイントのウィンドウをブラウザで取り込んで手の動きなどで操る
mediaDevices.getDisplayMedia、MediaPipe Hands、p5.js を組み合わせて、ブラウザでのパワポウィンドウのキャプチャしたり、手の動きで大きさ・位置を変えたり
上半身で演奏
体の座標に合わせて音が鳴るやつです。p5.jsでMediaPipe Pose使ってます。
