42件
image

Nintendo Switch の Joy-Con の傾きを p5.js の描画と連動させる

Nintendo Switch の Joy-Con の傾きを WebHID API で取得して、それを p5.js の線の描画の向きと連動…

開発中 visibility 54 thumb_up_alt 0 comment 0
image

Vanta.js の BIRDS の描画を p5.js に取り込んでカメラ画像の描画などと組み合わせ

Vanta.js というライブラリのエフェクトの1つ「BIRDS」を p5.js でのカメラ画像の描画などと組み合わ…

開発中 visibility 106 thumb_up_alt 0 comment 0
image

p5play の物理演算エンジンと p5.js のカスタムシェーダーでのグローエフェクト

p5play の物理演算エンジンを使って行った p5.js の描画で、円弧の形状の床の上を転がる円に createF…

開発中 visibility 129 thumb_up_alt 0 comment 0
image

炎を召喚したり操ったりする能力を身につけた気になれるWebアプリ:p5.jsでカスタムシェーダー

p5.jsの「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎の見た目を作り、さらにカメ…

開発中 visibility 76 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーによる炎の描画を規則的に配置して時間変化させる

p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画を、規則的に配置して時間…

開発中 visibility 63 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーによる炎の描画にブラーフィルター・2重表示などを組み合わせる

p5.js の createFilterShader() を使ったカスタムシェーダーによる炎の描画に、ブラーフィルター・2…

開発中 visibility 71 thumb_up_alt 0 comment 0
image

太陽を召喚する能力を得た気分になれる Webアプリ(Babylon.js + p5.js で実装)

Babylon.js の Particle Helper を使った描画を p5.js の WEBGLモードのキャンバスに描画し、p5.js側…

開発中 visibility 107 thumb_up_alt 1 comment 0
image

手から炎を出す能力を身につけた気になれるかもしれないWebアプリ:p5.jsでカスタムシェーダー

p5.jsのフィルター用シェーダー「createFilterShader()」でのカスタムシェーダーで、ゆらめく炎みた…

開発中 visibility 139 thumb_up_alt 0 comment 0
image

p5.js の WEBGLモードのキャンバスで三角関数の揺れなどを加えた舞い散る雪のアニメーション

p5.js の WEBGLモードのキャンバスで、y方向の重力・y方向と垂直な方向の風の影響と、y方向に垂直な …

開発中 visibility 58 thumb_up_alt 0 comment 0
image

【2024年 🎍正月向け】p5.js のアニメーションで干支の切り替わり @ 大晦日ハッカソン

p5.js で、読み込んだ画像をたくさんのパーツにスライスして分解するような表示をさせ、その個々のパ…

開発中 visibility 81 thumb_up_alt 0 comment 0
image

指でつまんだ場所から空間をちょっと歪められる Webアプリの試作( #p5js で実装 )

指でつまんだ場所から空間をちょっと歪めるエフェクトを、p5.js と PixiJS の Filter を組み合わせて…

開発中 visibility 96 thumb_up_alt 0 comment 0
image

p5.js でグラデーションのかかったグローエフェクトを適用した複数のカラーオブジェクトの描画

p5.js でのグローエフェクトで、グラデーションを利用した明るさ調整(時間経過で回転)などを行った…

開発中 visibility 152 thumb_up_alt 0 comment 0
image

p5.js でグローエフェクトと明るさ・カラーのグラデーションを組み合わせる描画の試作

p5.js でグローエフェクトを適用するオブジェクトで、そのエフェクトの明るさ調整やカラーのグラデー…

開発中 visibility 140 thumb_up_alt 0 comment 0
image

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

#p5play の物理演算エンジンを #p5js の描画に適用しつつ、さらに #MediaPipe で認識した手でインタ…

開発中 visibility 172 thumb_up_alt 0 comment 0
image

万華鏡写輪眼が開眼できる Webアプリ(p5.js + MediaPipe)

MediaPipe の JavaScript版を使って、カメラ映像から虹彩を検出し、そこに p5.js のベジエ曲線などを…

開発中 visibility 254 thumb_up_alt 1 comment 0
image

p5.js で魔法陣を作る:ルーン文字と円を描画してグローエフェクトを適用する

p5.js で円をユニコード文字のルーン文字を描画して、グローエフェクトを適用して魔法陣っぽいものを…

開発中 visibility 174 thumb_up_alt 0 comment 0
image

p5.js で手から複数の光る魔法陣を生成するアニメーションを作る

p5.js で手から複数の光る魔法陣が出てくるアニメーションを作りました。動きに緩急をつけるために、…

開発中 visibility 144 thumb_up_alt 0 comment 0
image

p5.js の vertex で形状変化のアニメーション(円と矩形):複数のパラメータ違いの図形で

p5.js の vertex で円と矩形を使った形状変化のアニメーションを作りました。複数の異なるパラメータ…

開発中 visibility 169 thumb_up_alt 0 comment 0
image

p5.js で 3つの三角関数(sin・cos・tan)を使った円を動かす(グローエフェクト付)

p5.js でタンジェントを含む 3つの三角関数(sin・cos・tan)を使って円を動かしました(図形移動に…

開発中 visibility 140 thumb_up_alt 0 comment 0
image

p5.js で作るシンプルなロック解除パズルゲーム

ネットで見かけたロック解除パズルゲームの一番シンプルなステージを、p5.js でシンプルに実装してみ…

開発中 visibility 161 thumb_up_alt 0 comment 0
image

p5.js でカメラ映像中から toio のマットの領域を判別(ピクセルごとの色ベースでの判別)

p5.js でカメラ映像中から toio のマットの領域を判別してみたものです。ピクセルごとの色ベースの処…

開発中 visibility 81 thumb_up_alt 0 comment 0
image

p5.js で剣の色を変化させる(残像を残しつつ):ピクセルごとの色ベースでの判別処理

元は緑ベースの色の剣を、カメラ映像に対するピクセルの色ベースの判別処理で、赤や青に変化させます…

開発中 visibility 99 thumb_up_alt 0 comment 0
image

p5.js でマウスを使ったインタラクション:イージングを適用した動きをする円を誘導する

p5.js を使った実装で、マウスカーソルを動かすと、その位置に向かって円が集まる(動きにはイージン…

開発中 visibility 125 thumb_up_alt 0 comment 0
image

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

MediaPipe「手のジェスチャー認識」と p5.js での描画を組み合わせました。描画の内容は、相互に引力…

開発中 visibility 231 thumb_up_alt 0 comment 0
image

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

Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。ジェ…

開発中 visibility 227 thumb_up_alt 0 comment 0
image

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

Googleさんの MediaPipe の新機能「手のジェスチャー認識」を p5.js の描画と組み合わせました。p5.j…

開発中 visibility 639 thumb_up_alt 0 comment 0
image

p5.js で SVGフィルターを使わない溶ける見た目のエフェクト(Goony Effect)

よく事例を見かける SVGフィルターを使って溶ける見た目のエフェクト(Goony Effect)を実現するので…

開発中 visibility 123 thumb_up_alt 0 comment 0
image

p5.js で数万個のパーティクルの描画を高速化(PIXI.ParticleContainer で)

p5.js で数万個のパーティクルの描画を高速化するために、PixiJS の PIXI.ParticleContainer を組み…

開発中 visibility 221 thumb_up_alt 0 comment 0
image

p5.js を使った色が変化しつつ波打つ曲線のアニメーション描画

p5.js を使った線の描画で、色が変化しつつ波打つような曲線のアニメーションを描画してみたものです

開発中 visibility 788 thumb_up_alt 0 comment 0
image

p5.js の WEBGLモードで 3D空間内を跳ね回る球体のパーティクル

以前作っていた、2D平面上で円のパーティクルが跳びはねて消える(重力方向に力を受けつつ跳ね回る)…

開発中 visibility 139 thumb_up_alt 0 comment 0