複数台の StackChan(スタックチャン)を手の動きで操る Webアプリ
複数台の StackChan を手の動きで操る Webアプリを試作してみました。2本の指を近づけたところを起点に、アナログジョイスティック的なものが出てきて、それを使って操作します。
両手を使ってインタラクティブに大型・小型花火を出せる体験型Webアプリ
p5.js や MediaPipe、シェーダー描画を組み合わせたインタラクティブな Webアプリで、拍手をすると花火を出せたり、両手の人差し指を近接させることで小型花火を連続で出せたりします
インタラクティブに空間を歪ませるエフェクトを出せるWebアプリ
片手の親指・人差し指をくっつける動作をしたり、両手を画面内で動かしたりする動作により、インタラクティブに空間を歪ませるエフェクトを出せるWebアプリです
ガジェット・Webアプリを使った体験型展示(複合版)【2026/5】
ガジェット・Webアプリを使った体験型展示をまとめて体験できる構成にしたものです
ガジェット・Webアプリを使った体験型展示(複合版)【2026/7】
ガジェット・Webアプリを使った体験型展示をまとめて体験できる構成にしたものです
複数台の toio が p5.js での処理上で衝突しないように動きが計算されて動作する展示
複数台の toio の動きを p5.js での処理で計算して、その結果を toio の専用マットを使った絶対位置座標を扱う仕組みで実際に反映させるものです(お互いが衝突しないように動こうとします)
BorderBreakStudies
AR学習アプリBorderBreakStudiesです。習い事のDX化を目指して作成しました。このアプリはweb上に公開されており誰でも遊ぶことが可能です。
インタラクティブな多段階の光学迷彩/透明マントエフェクトが体験できるWebアプリ
p5.js と MediaPipe を組み合わせて、インタラクティブな多段階の光学迷彩/透明マントエフェクトが体験できるWebアプリを作りました
ガジェット・Webアプリを使った体験型展示(複合版)【2026/3 @ 広島・松戸】
ガジェット・Webアプリを使った体験型展示をまとめて体験できる構成にしたものです
足位置の視覚的提示による電子オルガンのペダル鍵盤演奏学習支援システムの提案
「p5.simpleAR」を用いて足の座標を取得し、電子オルガンの演奏姿勢を保ったまま足の位置を視認できるシステム
しりとリリック
しりとりをビジュアル化する新感覚ゲーム 発した言葉をリアルタイムで音声認識し、リリックビデオ風のエフェクトとともに画面に描画します 徐々に早くなるリズムに合わせて、何回言葉をつなげられるかチャレンジ!
ごっくんナビ
「嚥下の瞬間をエンタメに!」──服薬時の嚥下タイミングを楽しくサポートし、苦手意識を和らげる新感覚アプリです。
「片手/両手の親指と人差し指でつまむ動作」で流体の見た目を操るインタラクション【元ネタあり】
PavelDoGreat/WebGL-Fluid-Simulationのリポジトリで公開されている流体の見た目を、p5.jsのキャンバスで動かした試作に、AIによる両手の認識を使った機能を加えました
ブラウザ上でAI・機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」- 【2025】
両手の親指と人差し指で囲まれた領域で「光学迷彩・透明マント的なエフェクト」を出す、インタラクティブな体験型展示です。カメラ画像に対するAI・機械学習処理と描画ライブラリによる描画で実装しました。
コミャクになる弾幕避け
コミャク様から出してくる弾に当たったら自分もコミャク様になってしまう弾幕避けゲーム。 ゲームオーバー条件は弾に当たることだけなので生き延びる道はなし。ひどいね。
シークワーサー・リスニング ― 日常の音が実を結ぶ ―
シークワーサー育成ゲーム
リングコン・サオコン・toio・パーティクル描画を組み合わせた体験型展示【2025/10】
リングコン・サオコン・toio・パーティクル描画を組み合わせた体験型展示です
p5.js Web Editor上で流体の見た目を両手で操るインタラクションの試作【元ネタあり】
PavelDoGreat/WebGL-Fluid-Simulationのリポジトリで公開されている流体の見た目を、p5.jsのキャンバスで動かした試作に、AIによる両手の認識を使った機能を加えました
p5.js Web Editor上で流体の見た目のやつを動かしてみる【元ネタあり】
元ネタでPavelDoGreat/WebGL-Fluid-Simulationというリポジトリで公開されているものがあり、その処理をp5.js Web Editor上のsketch.jsで動かしました
ルーレットコントローラー 2台を同時にブラウザで扱う: Web HID API + p5.js
人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画を、ブラウザ上の JavaScript のみでやってみつつ、それを 2台同時にやってみたものです
ルーレットコントローラーをブラウザで扱う:Web HID API で取得して p5.js で可視化
人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画をブラウザ上の JavaScript のみでやってみた、というものです(数字の取得は Web HID)
MacBook の画面の開閉を可視化:Web HID API で取得して p5.js で可視化する
X で見た MacBook のパネルのヒンジの角度を Macアプリで使うという作品について、コードを見たら HID で取得する実装のようだったので、ブラウザの Web HID API で使ってみました
サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示
サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示です
サオコン・太鼓型コントローラー・100均の空気ポンプの入力に反応するパーティクル:p5.jsでの描画
サオコンや太鼓の達人用コントローラー、100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画しています。
【2025年】 minacoding Day21「枠線などの線だけでの描画」をルーレット型デバイスで
毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、21日目のお題「枠線などの線だけでの描画」の作品として投稿したものです
【2025年】 minacoding Day29「思いきりカラフルに」をリングコンで
毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、29日目のお題「思いきりカラフルに」の作品として投稿したものです
サオコン + Joy-Con を p5.js の描画と連動させてみた:Gamepad API を利用
サオコン + Joy-Con を p5.js の描画と連動させてみた試作です。Gamepad API を利用してブラウザとの連動を実現しています。
PixTuneBox
思い出から音楽を奏でる、終わらないオルゴール。 カメラから画像を読み取り、ピクセル情報に応じて音を奏でます。直前の演奏から次の数秒間ドラム音を作成することを繰り返し、常に変わり続ける音楽となります。
【2025年】 minacoding Day17「梅雨をコードで表現」を p5js で作る
毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、17日目のお題「梅雨をコードで表現」の作品として投稿したものです
【2025年】 minacoding Day6「架空の生き物」を p5js で作る
毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、6日目のお題「架空の生き物」の作品として投稿したものです

