logo

#p5.jsの検索結果

97件
image

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

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

開発中 visibility 58 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 52 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 48 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 75 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 69 thumb_up_alt 0 comment 0
image

M5Stackを使った野球ゲーム

大学の研究室のハッカソンで制作した作品です。M5Stackを持って投球動作を行い、PC画面上で投球が行…

完成 visibility 95 thumb_up_alt 0 comment 0
image

フラッシュナンバー

10秒内に表示される10の数字が何番目に表示されるかを当てるゲームです. 何番目かに表示された数字…

完成 visibility 98 thumb_up_alt 0 comment 0
image

サッカーしようぜ!M5stackとp5.jsを使ってPK勝負

M5stackとp5.jsを使ったサッカーゲームです。キーパーはランダムで三方向(左・正面・右)のうち一つ…

完成 visibility 127 thumb_up_alt 1 comment 0
image

距離センサを利用した2人用対戦ゲーム

お題として表示された距離となるべく近い数値を距離センサで計測できた方が勝ち。

完成 visibility 160 thumb_up_alt 4 comment 0
image

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

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

開発中 visibility 75 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 74 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 67 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 67 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 52 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 54 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 54 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 65 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 133 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 134 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 353 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 55 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 91 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 249 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 49 thumb_up_alt 0 comment 0
image

p5.js で描画した回転しつつ動く同心円を WEBGLモード上で歪めて表示させてみる

p5.js で描画した回転しつつ動く同心円(元は 2D描画だったもの)を、WEBGLモード上で三次元的に歪め…

開発中 visibility 85 thumb_up_alt 0 comment 0
image

p5.js の WEBGLモードの sphere() と三角関数を使った描画:生成過程を視点を変えて

p5.js の WEBGLモードの sphere() と三角関数を使った描画をやっていて、生成過程をアニメーションで…

開発中 visibility 70 thumb_up_alt 0 comment 0
image

p5.js の WEBGL モードで Box がたくさん並んだ中を走るアニメーションを 2視点で見る

p5.js の WEBGL モードで、Box がたくさん並んだ中を走る見た目のアニメーションを、走る物体の後ろ…

開発中 visibility 74 thumb_up_alt 0 comment 0
image

p5.js で WebAR(ARマーカーに紐付く 3つの描画領域を立体的に配置してみるテスト)

p5.js・AR.js・A-Frame を組み合わせた WebAR の試作で、ARマーカーを認識したら立体的な位置関係の …

開発中 visibility 136 thumb_up_alt 0 comment 0
image

p5.js用ライブラリ p5.simpleAR を使って過去に作った同心円などを使った作品で AR

p5.js で作った作品を簡単に ARマーカー上に出せるライブラリ「p5.simpleAR」を使って、過去に作った…

開発中 visibility 168 thumb_up_alt 0 comment 0
image

p5.js用ライブラリ p5.simpleAR で過去に作ったパーティクル作品をマーカー上に呼び出す

p5.js で作った作品を簡単に ARマーカー上に出せるライブラリ「p5.simpleAR」を使って、過去に作った…

開発中 visibility 187 thumb_up_alt 0 comment 0