image

インタラクティブな Webアプリ 2つの展示(拍手で花火、空間を歪ませる波紋)【NT函館2026】

NT函館2036の飛び入り展示「展示体験ポジティブブース」に出展した時のものです

開発中 visibility 24 thumb_up_alt 0 comment 0
image

複数台の StackChan(スタックチャン)を手の動きで操る Webアプリ

複数台の StackChan を手の動きで操る Webアプリを試作してみました。2本の指を近づけたところを起点に、アナログジョイスティック的なものが出てきて、それを使って操作します。

開発中 visibility 60 thumb_up_alt 1 comment 0
image

HANA-NO-MIYACO

あなたの鼻に、京都が建つ。 Web カメラで顔を映すと、PLATEAU の実 3D 都市データから抽出した京町家・神社仏閣・京都タワーが鼻に建つ、漫画風 Web AR 体験。

完成 visibility 181 thumb_up_alt 0 comment 0
image

両手を使ってインタラクティブに大型・小型花火を出せる体験型Webアプリ

p5.js や MediaPipe、シェーダー描画を組み合わせたインタラクティブな Webアプリで、拍手をすると花火を出せたり、両手の人差し指を近接させることで小型花火を連続で出せたりします

開発中 visibility 67 thumb_up_alt 0 comment 0
image

インタラクティブに空間を歪ませるエフェクトを出せるWebアプリ

片手の親指・人差し指をくっつける動作をしたり、両手を画面内で動かしたりする動作により、インタラクティブに空間を歪ませるエフェクトを出せるWebアプリです

開発中 visibility 67 thumb_up_alt 0 comment 0
image

ガジェット・インタラクティブな Web アプリの複合的な展示【つくろがや!4(2026/5)】

ガジェット・Webアプリを使った体験型展示をまとめて体験できる構成にしたものです

開発中 visibility 108 thumb_up_alt 0 comment 0
image

ガジェット・Webアプリを使った体験型展示(複合版)【2026/7、内容検討中】

【内容検討中】2026年7月の展示に向けて検討中の、ガジェット・Webアプリを使った体験型展示です

開発中 visibility 94 thumb_up_alt 0 comment 0
image

動物(ウサギ・ネコ・犬)を描き出すインタラクティブなパーティクル(Webアプリ)

パーティクルが動物の輪郭を描き出す仕組みを作り、その位置や色を手のジェスチャーでインタラクティブに変化させる仕組みを足した Webアプリです

開発中 visibility 85 thumb_up_alt 1 comment 0
image

ガジェット・Webアプリを使った体験型展示(複合版)【2026/3 @ 広島・松戸】

ガジェット・Webアプリを使った体験型展示をまとめて体験できる構成にしたものです

開発中 visibility 252 thumb_up_alt 3 comment 0
image

波動拳を打ってみよう

PCカメラを使って自分の手でキャラクターを操作する、1対1の格闘ゲームです。敵の体力をゼロにして倒します。自分の体力が先にゼロになると負けです。ガード・打撃・気弾・波動の4つの技が使えます。

完成 visibility 364 thumb_up_alt 5 comment 0
image

つららキャッチ

画面上から落ちてくるつららを骨格検知した手でキャッチします。重力加速度で難易度が変えられます。

完成 visibility 514 thumb_up_alt 7 comment 0
image

「片手/両手の親指と人差し指でつまむ動作」で流体の見た目を操るインタラクション【元ネタあり】

PavelDoGreat/WebGL-Fluid-Simulationのリポジトリで公開されている流体の見た目を、p5.jsのキャンバスで動かした試作に、AIによる両手の認識を使った機能を加えました

開発中 visibility 115 thumb_up_alt 0 comment 0
image

ブラウザ上でAI・機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」- 【2025】

両手の親指と人差し指で囲まれた領域で「光学迷彩・透明マント的なエフェクト」を出す、インタラクティブな体験型展示です。カメラ画像に対するAI・機械学習処理と描画ライブラリによる描画で実装しました。

開発中 visibility 130 thumb_up_alt 0 comment 0
image

Ice Ascent with Hands

Webカメラを使って自分の「手」で操作する、ボルダリングゲームです。自分自身の手を使い、画面上の「手」のカーソルを操作して、ホールドを掴んで登ります。自分の動きが反映され、没入感のある体験ができます。

完成 visibility 484 thumb_up_alt 9 comment 0
image

Geocussion

砂を叩き押し固めてオブジェクトを作り出し、音を大きく鳴らしたいならば大きなオブジェクトを作り、形を変えれば異なるを鳴らせる砂場上の楽器。

開発中 visibility 416 thumb_up_alt 14 comment 1
image

#p5play の物理演算や #p5js の描画 #MediaPipe を組み合わせた試作

#p5play の物理演算エンジンを #p5js の描画に適用しつつ、さらに #MediaPipe で認識した手でインタラクションが行える仕組みの試作です

開発中 visibility 367 thumb_up_alt 0 comment 0
image

AIで手話を認識するアプリ~JSL~

JSLは聴覚障がい者、難聴者におけるコミュニケーションを支援するアプリです。手話をリアルタイムでチャットテキストに変換することで、情報共有と社会参画の機会を提供する新たな通話プラットフォームです。

完成 visibility 12772 thumb_up_alt 436 comment 30
image

Webカメラで手書き文字認識

カメラで人差し指の位置をトラッキングし、空中で書いた文字を認識させるテスト。 (動画では顔がイラストで隠れててますが、本番ではキチンと表示されます。)

完成 visibility 518 thumb_up_alt 0 comment 0
image

MediaPipe「手のジェスチャー認識」と p5.js での引力が働くオブジェクトの描画の組合せ

MediaPipe「手のジェスチャー認識」と p5.js での描画を組み合わせました。描画の内容は、相互に引力が働く動くオブジェクトの描画(※ Mutual Attraction)です。

開発中 visibility 414 thumb_up_alt 0 comment 0
image

人の動き(画像認識)に合わせてDMX照明機器を操作してみた

現実空間の人の動き(画像認識)に合わせてムービングライトを動かすことを目標に、Art-Net経由でDMX照明機器を制御してみます。

開発中 visibility 704 thumb_up_alt 3 comment 1
image

Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の組み合わせ v2

Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。ジェスチャー認識で円の動きの切り替えを行う仕組みを入れています

開発中 visibility 420 thumb_up_alt 0 comment 0
image

Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の描画と組み合わせ

Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。p5.js で描画した連なる円の動きの部分ではイージングも組み合わせています

開発中 visibility 1044 thumb_up_alt 0 comment 0
image

teARai

体調管理の基本として、大人はもちろんのことですが、子供達にもきちんと手洗いをしてもらいたいものです。そこで、子供達にも手洗いの重要性を認識してもらうために開発したアプリがteARaiです。

完成 visibility 545 thumb_up_alt 0 comment 0
image

Twilioで遠隔お酌

リアル飲み会が減って、社内コミュニケーション取りずらいですね、遠隔お酌を使ってコミュニケーション向上を図りましょう。

開発中 visibility 435 thumb_up_alt 0 comment 0
image

Psychic Hand AR

超能力バトルごっこができるカメラアプリ

完成 visibility 918 thumb_up_alt 9 comment 6
image

Key-log 自動マニュアル作成サービス

ウェアラブル IoT カメラから、人間の動作を解析して画像を生成することにより、動作をマニュアルにまとめるサービス

開発中 visibility 1552 thumb_up_alt 13 comment 0
image

ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」

「両手の親指と人差し指で囲まれた領域は、人の後ろの背景が見える」という光学迷彩・透明マント的なエフェクトを、カメラ画像に対する機械学習処理と描画ライブラリによる描画で実装しました

完成 visibility 2461 thumb_up_alt 17 comment 0
image

【指先付近のみに焦点があうカメラ映像】p5.js と MediaPipe Hands で実装

人差し指の先を起点に、その周りだけ焦点が合う(その点から遠いとブラーフィルタのぼかしが強くなる)という仕組みを、カメラ画像に対する機械学習処理と描画ライブラリによる描画で実装してみました

開発中 visibility 442 thumb_up_alt 0 comment 0
image

ARライトセイバー

googleのmediapipe.jsによるハンドトラッキングとOpenCV.jsを活用し、親指を立てた時にライトセイバーが表示されるWebコンテンツ。Webブラウザがあれば体験できます!

完成 visibility 1028 thumb_up_alt 8 comment 0
image

【2本の指で作る小さな透明マント的エフェクト】p5.js と MediaPipe Hands で実装

親指と人差し指で囲まれた領域は、人の後ろの背景が見えるという、透明マント的なエフェクトをカメラ画像に対する機械学習処理と描画ライブラリによる描画で実装してみました

開発中 visibility 2184 thumb_up_alt 1 comment 0