100均の空気ポンプや太鼓型のコントローラーで toio を動かす（ブラウザでの処理）
小さなロボットの toio を、ブラウザ経由で制御する際に、100均の空気ポンプや太鼓型のコントローラ…
太鼓の達人用コントローラーを叩くほど自分の姿が透明になっていく...
太鼓の達人用コントローラーを叩くほど、自分の姿がだんだんと透明になっていく...という作品を作り…
p5.js でシェーダーを使った画像フィルターと何かの外枠を作って Webカメラ映像と組み合わせる
p5.js でシェーダーを使った画像フィルター（シェーダーの処理は自前で実装）と、何かの外枠を作って…
100均で売っている空気が吹き出るアイテムを入力インターフェースにする（マイクを利用）
100均で売っている「空気ポンプ」や「ピコピコハンマー」の空気の吹き出し口にマイクをあて、それら…
Nintendo Switch の Joy-Con の傾きを p5.js の描画と連動させる
Nintendo Switch の Joy-Con の傾きを WebHID API で取得して、それを p5.js の線の描画の向きと連動…
Vanta.js の BIRDS の描画を p5.js に取り込んでカメラ画像の描画などと組み合わせ
Vanta.js というライブラリのエフェクトの1つ「BIRDS」を p5.js でのカメラ画像の描画などと組み合わ…
p5play の物理演算エンジンと p5.js のカスタムシェーダーでのグローエフェクト
p5play の物理演算エンジンを使って行った p5.js の描画で、円弧の形状の床の上を転がる円に createF…
炎を召喚したり操ったりする能力を身につけた気になれるWebアプリ：p5.jsでカスタムシェーダー
p5.jsの「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎の見た目を作り、さらにカメ…
p5.js のカスタムシェーダーによる炎の描画を規則的に配置して時間変化させる
p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画を、規則的に配置して時間…
p5.js のカスタムシェーダーによる炎の描画にブラーフィルター・2重表示などを組み合わせる
p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画に、ブラーフィルター・2…
太陽を召喚する能力を得た気分になれる Webアプリ（Babylon.js ＋ p5.js で実装）
Babylon.js の Particle Helper を使った描画を p5.js の WEBGLモードのキャンバスに描画し、p5.js側…
手から炎を出す能力を身につけた気になれるかもしれないWebアプリ：p5.jsでカスタムシェーダー
p5.jsのフィルター用シェーダー「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎みた…
p5.js の WEBGLモードのキャンバスで三角関数の揺れなどを加えた舞い散る雪のアニメーション
p5.js の WEBGLモードのキャンバスで、y方向の重力・y方向と垂直な方向の風の影響と、y方向に垂直な …
【2024年 🎍正月向け】p5.js のアニメーションで干支の切り替わり ＠ 大晦日ハッカソン
p5.js で、読み込んだ画像をたくさんのパーツにスライスして分解するような表示をさせ、その個々のパ…
指でつまんだ場所から空間をちょっと歪められる Webアプリの試作（ #p5js で実装 ）
指でつまんだ場所から空間をちょっと歪めるエフェクトを、p5.js と PixiJS の Filter を組み合わせて…
p5.js でグラデーションのかかったグローエフェクトを適用した複数のカラーオブジェクトの描画
p5.js でのグローエフェクトで、グラデーションを利用した明るさ調整（時間経過で回転）などを行った…
p5.js でグローエフェクトと明るさ・カラーのグラデーションを組み合わせる描画の試作
p5.js でグローエフェクトを適用するオブジェクトで、そのエフェクトの明るさ調整やカラーのグラデー…
#p5play の物理演算や #p5js の描画 #MediaPipe を組み合わせた試作
#p5play の物理演算エンジンを #p5js の描画に適用しつつ、さらに #MediaPipe で認識した手でインタ…
万華鏡写輪眼が開眼できる Webアプリ（p5.js ＋ MediaPipe）
MediaPipe の JavaScript版を使って、カメラ映像から虹彩を検出し、そこに p5.js のベジエ曲線などを…
p5.js で魔法陣を作る：ルーン文字と円を描画してグローエフェクトを適用する
p5.js で円をユニコード文字のルーン文字を描画して、グローエフェクトを適用して魔法陣っぽいものを…
p5.js で手から複数の光る魔法陣を生成するアニメーションを作る
p5.js で手から複数の光る魔法陣が出てくるアニメーションを作りました。動きに緩急をつけるために、…
p5.js の vertex で形状変化のアニメーション（円と矩形）：複数のパラメータ違いの図形で
p5.js の vertex で円と矩形を使った形状変化のアニメーションを作りました。複数の異なるパラメータ…
p5.js で 3つの三角関数（sin・cos・tan）を使った円を動かす（グローエフェクト付）
p5.js でタンジェントを含む 3つの三角関数（sin・cos・tan）を使って円を動かしました（図形移動に…
p5.js で作るシンプルなロック解除パズルゲーム
ネットで見かけたロック解除パズルゲームの一番シンプルなステージを、p5.js でシンプルに実装してみ…
p5.js でカメラ映像中から toio のマットの領域を判別（ピクセルごとの色ベースでの判別）
p5.js でカメラ映像中から toio のマットの領域を判別してみたものです。ピクセルごとの色ベースの処…
p5.js で剣の色を変化させる（残像を残しつつ）：ピクセルごとの色ベースでの判別処理
元は緑ベースの色の剣を、カメラ映像に対するピクセルの色ベースの判別処理で、赤や青に変化させます…
p5.js でマウスを使ったインタラクション：イージングを適用した動きをする円を誘導する
p5.js を使った実装で、マウスカーソルを動かすと、その位置に向かって円が集まる（動きにはイージン…
MediaPipe「手のジェスチャー認識」と p5.js での引力が働くオブジェクトの描画の組合せ
MediaPipe「手のジェスチャー認識」と p5.js での描画を組み合わせました。描画の内容は、相互に引力…
Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の組み合わせ v2
Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。ジェ…
Googleさんの MediaPipe の「手のジェスチャー認識」と p5.js の描画と組み合わせ
Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。p5.j…
