material

p5.js

image

ガジェット・Webアプリを組み合わせた体験型展示【2026/3】

ガジェット・Webアプリを組み合わせた体験型展示です

開発中 visibility 23 thumb_up_alt 0 comment 0
image

足位置の視覚的提示による電子オルガンのペダル鍵盤演奏学習支援システムの提案

「p5.simpleAR」を用いて足の座標を取得し、電子オルガンの演奏姿勢を保ったまま足の位置を視認できるシステム

開発中 visibility 76 thumb_up_alt 3 comment 0
image

しりとリリック

しりとりをビジュアル化する新感覚ゲーム 発した言葉をリアルタイムで音声認識し、リリックビデオ風のエフェクトとともに画面に描画します 徐々に早くなるリズムに合わせて、何回言葉をつなげられるかチャレンジ!

完成 visibility 165 thumb_up_alt 10 comment 1
image

ごっくんナビ

「嚥下の瞬間をエンタメに!」──服薬時の嚥下タイミングを楽しくサポートし、苦手意識を和らげる新感覚アプリです。

完成 visibility 191 thumb_up_alt 5 comment 0
image

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

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

開発中 visibility 59 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 65 thumb_up_alt 0 comment 0
image

コミャクになる弾幕避け

コミャク様から出してくる弾に当たったら自分もコミャク様になってしまう弾幕避けゲーム。 ゲームオーバー条件は弾に当たることだけなので生き延びる道はなし。ひどいね。

完成 visibility 45 thumb_up_alt 2 comment 0
image

シークワーサー・リスニング ― 日常の音が実を結ぶ ―

シークワーサー育成ゲーム

開発中 visibility 63 thumb_up_alt 0 comment 0
image

リングコン・サオコン・toio・パーティクル描画を組み合わせた体験型展示【2025/10】

リングコン・サオコン・toio・パーティクル描画を組み合わせた体験型展示です

開発中 visibility 15 thumb_up_alt 0 comment 0
image

p5.js Web Editor上で流体の見た目を両手で操るインタラクションの試作【元ネタあり】

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

開発中 visibility 215 thumb_up_alt 1 comment 0
image

p5.js Web Editor上で流体の見た目のやつを動かしてみる【元ネタあり】

元ネタでPavelDoGreat/WebGL-Fluid-Simulationというリポジトリで公開されているものがあり、その処理をp5.js Web Editor上のsketch.jsで動かしました

開発中 visibility 235 thumb_up_alt 0 comment 0
image

ルーレットコントローラー 2台を同時にブラウザで扱う: Web HID API + p5.js

人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画を、ブラウザ上の JavaScript のみでやってみつつ、それを 2台同時にやってみたものです

開発中 visibility 71 thumb_up_alt 0 comment 0
image

ルーレットコントローラーをブラウザで扱う:Web HID API で取得して p5.js で可視化

人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画をブラウザ上の JavaScript のみでやってみた、というものです(数字の取得は Web HID)

開発中 visibility 119 thumb_up_alt 1 comment 0
image

MacBook の画面の開閉を可視化:Web HID API で取得して p5.js で可視化する

X で見た MacBook のパネルのヒンジの角度を Macアプリで使うという作品について、コードを見たら HID で取得する実装のようだったので、ブラウザの Web HID API で使ってみました

開発中 visibility 84 thumb_up_alt 1 comment 0
image

サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示

サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示です

開発中 visibility 159 thumb_up_alt 0 comment 0
image

サオコン・太鼓型コントローラー・100均の空気ポンプの入力に反応するパーティクル:p5.jsでの描画

サオコンや太鼓の達人用コントローラー、100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画しています。

開発中 visibility 187 thumb_up_alt 1 comment 0
image

【2025年】 minacoding Day21「枠線などの線だけでの描画」をルーレット型デバイスで

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、21日目のお題「枠線などの線だけでの描画」の作品として投稿したものです

完成 visibility 193 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day29「思いきりカラフルに」をリングコンで

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、29日目のお題「思いきりカラフルに」の作品として投稿したものです

完成 visibility 143 thumb_up_alt 0 comment 0
image

サオコン + Joy-Con を p5.js の描画と連動させてみた:Gamepad API を利用

サオコン + Joy-Con を p5.js の描画と連動させてみた試作です。Gamepad API を利用してブラウザとの連動を実現しています。

開発中 visibility 229 thumb_up_alt 0 comment 0
image

PixTuneBox

思い出から音楽を奏でる、終わらないオルゴール。 カメラから画像を読み取り、ピクセル情報に応じて音を奏でます。直前の演奏から次の数秒間ドラム音を作成することを繰り返し、常に変わり続ける音楽となります。

開発中 visibility 284 thumb_up_alt 5 comment 1
image

【2025年】 minacoding Day17「梅雨をコードで表現」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、17日目のお題「梅雨をコードで表現」の作品として投稿したものです

完成 visibility 163 thumb_up_alt 1 comment 2
image

【2025年】 minacoding Day6「架空の生き物」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、6日目のお題「架空の生き物」の作品として投稿したものです

完成 visibility 142 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day5「朝一番にコードを描く」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、5日目のお題「朝一番にコードを描く」の作品として投稿したものです

完成 visibility 111 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day4「ランダムを使ったコード」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、4日目のお題「ランダムを使ったコード」の作品として投稿したものです

完成 visibility 114 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day2「自分なりのケーキ」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、2日目のお題「自分なりのケーキ」の作品として投稿したものです

完成 visibility 118 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day1「円だけを使った描画」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、1日目のお題「円だけを使った描画」の作品として投稿したものです

完成 visibility 166 thumb_up_alt 2 comment 0
image

太鼓型のコントローラーの入力に反応する輝くパーティクル(p5.jsでの描画) 【試作版】

太鼓の達人用コントローラーや100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画していて、作品展示に向けて試作していたものです。

開発中 visibility 230 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーでインタラクティブなパーティクル:円状に拡がるアニメーション描画

p5.js のカスタムシェーダーでインタラクティブなパーティクルの描画を作ったものです。中心から円状に拡がるアニメーションをシェーダーで描きました。

開発中 visibility 250 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーでインタラクティブな光るパーティクル・拡がる円のエフェクト描画

p5.js のカスタムシェーダーでインタラクティブな光るパーティクルの描画を作っていたのですが、そこに馴染むように拡がる円のエフェクトをシェーダーでの描画に加えてみました

開発中 visibility 270 thumb_up_alt 0 comment 0
image

太鼓型のコントローラーや100均の空気ポンプでの入力に反応する輝くパーティクル(p5.jsでの描画)

太鼓の達人用コントローラーや100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画しています。

開発中 visibility 454 thumb_up_alt 1 comment 0