![image](/pic/647f6510-f7da-427c-a4ab-5b6656492f12.png)
チームhp 誰もが抱える闇を吐き出せる掲示板「吐き溜め」
誰もが抱える闇を吐き出せる掲示板「吐き溜め」 心の奥底に潜む、誰もに言えない憎悪、妬み、嫉妬を…
![image](/pic/4dcd5bf9-5e6e-4620-b919-1b4e592e1862.jpg)
100均で売っている空気が吹き出るアイテムを入力インターフェースにする(マイクを利用)
100均で売っている「空気ポンプ」や「ピコピコハンマー」の空気の吹き出し口にマイクをあて、それら…
![image](/pic/e60c74b7-a764-4cc3-acaa-d6db41605933.jpg)
Nintendo Switch の Joy-Con の傾きを p5.js の描画と連動させる
Nintendo Switch の Joy-Con の傾きを WebHID API で取得して、それを p5.js の線の描画の向きと連動…
![image](/pic/a3b214d1-611c-492d-8086-488a692e9baf.jpg)
Vanta.js の BIRDS の描画を p5.js に取り込んでカメラ画像の描画などと組み合わせ
Vanta.js というライブラリのエフェクトの1つ「BIRDS」を p5.js でのカメラ画像の描画などと組み合わ…
![image](/pic/d73352f7-a87c-49cb-8781-ad3774584d47.jpg)
音を奏でて toio を動かす!(p5.js・ml5.js・p5.toio を用いたバージョン)
以前 2020年に、つくばや東京のメーカーフェアに出展した「音で toio を操る作品」の、実装をある AP…
![image](/pic/c58e52e0-7390-4e9b-af22-880d48858bea.jpg)
p5play の物理演算エンジンと p5.js のカスタムシェーダーでのグローエフェクト
p5play の物理演算エンジンを使って行った p5.js の描画で、円弧の形状の床の上を転がる円に createF…
![image](/pic/9cb4d43c-4c94-49f3-9925-6ff22fdd9f56.jpg)
炎を召喚したり操ったりする能力を身につけた気になれるWebアプリ:p5.jsでカスタムシェーダー
p5.jsの「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎の見た目を作り、さらにカメ…
![image](/pic/bba545e1-b1dd-42fe-8566-4335fcf8f355.jpg)
p5.js のカスタムシェーダーによる炎の描画を規則的に配置して時間変化させる
p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画を、規則的に配置して時間…
![image](/pic/773b5d2a-53b4-4902-9edd-ad7df69e74f9.jpg)
p5.js のカスタムシェーダーによる炎の描画にブラーフィルター・2重表示などを組み合わせる
p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画に、ブラーフィルター・2…
![image](/pic/dab85cf5-3913-4578-b257-e0566326cc6f.jpg)
太陽を召喚する能力を得た気分になれる Webアプリ(Babylon.js + p5.js で実装)
Babylon.js の Particle Helper を使った描画を p5.js の WEBGLモードのキャンバスに描画し、p5.js側…
![image](/pic/981babd8-9fd4-46cd-9b64-6f0a4ac0fc29.jpg)
手から炎を出す能力を身につけた気になれるかもしれないWebアプリ:p5.jsでカスタムシェーダー
p5.jsのフィルター用シェーダー「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎みた…
![image](/pic/aec31951-d90a-4fb9-abca-2bfd29b3945b.jpg)
p5.js の WEBGLモードのキャンバスで三角関数の揺れなどを加えた舞い散る雪のアニメーション
p5.js の WEBGLモードのキャンバスで、y方向の重力・y方向と垂直な方向の風の影響と、y方向に垂直な …
![image](/pic/81ecd6ee-1d9f-45a4-b198-cd321deb7cc3.jpg)
【2024年 🎍正月向け】p5.js のアニメーションで干支の切り替わり @ 大晦日ハッカソン
p5.js で、読み込んだ画像をたくさんのパーツにスライスして分解するような表示をさせ、その個々のパ…
![image](/pic/052b1bed-79dd-48e4-9e63-9f279c32c865.jpg)
ブラウザのウィンドウの動きが p5.js の描画に影響を及ぼすものをシンプルな実装で試す
ブラウザのウィンドウの動きが p5.js の描画に影響を及ぼすものをシンプルな実装で試しました
![image](/pic/9c33082e-2495-4252-9a01-01274dc79a7c.jpg)
2つのブラウザのウィンドウのうち一方を動かすと他方が影響を受ける仕組みを p5.js で雑に試す
「1つのブラウザをスクリーン上で動かした際に、それを画面内の描画に影響させる」、「2つのブラウザ…
![image](/pic/aa47ecfc-abfd-44ef-8ed0-1b75d6f42de1.png)
くだものプール
腕を動かしてくだものを合体させて育てるゲームです。PCブラウザで体験できます。(最初の読み込みに…
![image](/pic/c1f5eead-8390-45cd-9e38-34f89c0e2f3e.jpg)
指でつまんだ場所から空間をちょっと歪められる Webアプリの試作( #p5js で実装 )
指でつまんだ場所から空間をちょっと歪めるエフェクトを、p5.js と PixiJS の Filter を組み合わせて…
![image](/pic/6d11598e-44d5-463f-bf2b-4cf47c582bda.jpg)
p5.js でグラデーションのかかったグローエフェクトを適用した複数のカラーオブジェクトの描画
p5.js でのグローエフェクトで、グラデーションを利用した明るさ調整(時間経過で回転)などを行った…
![image](/pic/9747619d-f49f-4add-9d37-2c8a29a15c83.jpg)
p5.js でグローエフェクトと明るさ・カラーのグラデーションを組み合わせる描画の試作
p5.js でグローエフェクトを適用するオブジェクトで、そのエフェクトの明るさ調整やカラーのグラデー…
![image](/pic/ccabeebd-7c64-4402-a5b1-a2ff3163f5bc.jpg)
#p5play の物理演算や #p5js の描画 #MediaPipe を組み合わせた試作
#p5play の物理演算エンジンを #p5js の描画に適用しつつ、さらに #MediaPipe で認識した手でインタ…
![image](/pic/98a2817d-5cb0-40b0-a2bd-ac44ad38e534.jpg)
万華鏡写輪眼が開眼できる Webアプリ(p5.js + MediaPipe)
MediaPipe の JavaScript版を使って、カメラ映像から虹彩を検出し、そこに p5.js のベジエ曲線などを…
![image](/assets/img/noimage.gif)
M5Stackを使った野球ゲーム
大学の研究室のハッカソンで制作した作品です。M5Stackを持って投球動作を行い、PC画面上で投球が行…
![image](/pic/6d6aa72b-84eb-45f0-a3c6-6c5c2c1b0adb.jpg)
フラッシュナンバー
10秒内に表示される10の数字が何番目に表示されるかを当てるゲームです. 何番目かに表示された数字…
![image](/pic/beab26b7-b647-40aa-b3dd-552e4776f2b2.jpg)
サッカーしようぜ!M5stackとp5.jsを使ってPK勝負
M5stackとp5.jsを使ったサッカーゲームです。キーパーはランダムで三方向(左・正面・右)のうち一つ…
![image](/pic/c3ee1133-75c7-47cc-adf8-1a4c678187ca.png)
距離センサを利用した2人用対戦ゲーム
お題として表示された距離となるべく近い数値を距離センサで計測できた方が勝ち。
![image](/pic/3f25be65-113b-480e-a707-0e757b7c5add.jpg)
p5.js で魔法陣を作る:ルーン文字と円を描画してグローエフェクトを適用する
p5.js で円をユニコード文字のルーン文字を描画して、グローエフェクトを適用して魔法陣っぽいものを…
![image](/pic/061e146a-7af6-4bc7-b46f-5a0a89044ad5.jpg)
p5.js で手から複数の光る魔法陣を生成するアニメーションを作る
p5.js で手から複数の光る魔法陣が出てくるアニメーションを作りました。動きに緩急をつけるために、…
![image](/pic/8934902f-4388-4b64-a6fb-f2caebccb6c8.jpg)
p5.js の vertex で形状変化のアニメーション(円と矩形):複数のパラメータ違いの図形で
p5.js の vertex で円と矩形を使った形状変化のアニメーションを作りました。複数の異なるパラメータ…
![image](/pic/26b65557-6755-4ac9-9c3b-e0a4701b10e7.jpg)
p5.js で 3つの三角関数(sin・cos・tan)を使った円を動かす(グローエフェクト付)
p5.js でタンジェントを含む 3つの三角関数(sin・cos・tan)を使って円を動かしました(図形移動に…
![image](/pic/cfd5a65f-d2b8-4390-87e9-46504ec6d74f.jpg)
p5.js で作るシンプルなロック解除パズルゲーム
ネットで見かけたロック解除パズルゲームの一番シンプルなステージを、p5.js でシンプルに実装してみ…