logo

#p5.jsの検索結果

81件
image

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

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

開発中 visibility 27 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 26 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 34 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 52 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 34 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 37 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 41 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 28 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 57 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 45 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 46 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 72 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 99 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 84 thumb_up_alt 0 comment 0
image

p5.js で blendMode()・tint() などを組み合わせたグラデーションのランダム描画

p5.js で blendMode()・tint()・translate()・rotate()・ellipse() 等を使ったグラデーションの描画…

開発中 visibility 74 thumb_up_alt 0 comment 0
image

p5.js で norm()・dist()・三角関数などを使った描画

Twitter で見かけた Processing の作品の処理を理解するために、p5.js に書きかえてから、内容に手を…

開発中 visibility 50 thumb_up_alt 0 comment 0
image

ChatGPT API のサーバー送信イベント経由のデータを p5.js で画面上に随時表示させる

ChatGPT API(gpt-3.5-turbo)で「stream: true」にした際の、Server-Sent Events のデータを、p5.js…

開発中 visibility 157 thumb_up_alt 0 comment 0
image

ChatGPT との音声対話を ChatGPT API と p5.js で試す

ChatGPT API を使ったテキストのやりとりに、音声認識・音声合成を組み合わせて、ChatGPT とのやりと…

開発中 visibility 259 thumb_up_alt 1 comment 0
image

【2023年 正月🎍】トラの画像が粒子状になりウサギの画像に変化:p5.js・PixiJS で実装

JavaScript を使ったアニメーションで、2023年のお正月ネタ🎍 を作ってみました(描画ライブラリの…

開発中 visibility 187 thumb_up_alt 0 comment 0
image

「画像とテキストが細かく分解されて霧散する」という演出を p5.js で作成【試作版】

「画像とテキストが細かく分解されて霧散する」という見た目の演出を、 p5.js を利用した描画で作っ…

開発中 visibility 276 thumb_up_alt 0 comment 0
image

「テキストが細かく分解されて飛び散る(またはその逆)」という演出を p5.js で作成【試作版】

「テキストが細かく分解されて飛び散る」という見た目の演出を、 p5.js を利用した描画で作ってみる…

開発中 visibility 376 thumb_up_alt 2 comment 4
image

DualShock 4 と p5.js の組み合わせ(gamecontroller.js を利用)

DualShock 4 での操作と p5.js Web Editor上での描画を組み合わせました(Gamepad API用のライブラリ…

開発中 visibility 85 thumb_up_alt 0 comment 0
image

p5.js とハーフミラーで作る手作りスマートミラー(まだ着手してみたばかりの段階)

ハーフミラーを使ったスマートミラー的な作品を見かけることがありますが、それをいつか作ってみたい…

開発中 visibility 191 thumb_up_alt 0 comment 0
image

TacticBoardVR:VRサッカー作戦盤システム

サッカー作戦盤のVR版システムをヘッドマウントディスプレイ(HMD)を用いて開発しました。タブレット…

完成 visibility 471 thumb_up_alt 8 comment 1
image

カメラ映像の注目してほしい箇所に、視線を集められるかもしれないやつを p5.js で作った!

p5.js を使ってカメラ映像上にマンガで用いられる表現の「集中線」を表示させられるものです。放射上…

開発中 visibility 139 thumb_up_alt 0 comment 0
image

すごく恐ろしいものの片鱗を味わったときの強い驚きをカメラ映像上で伝えられるかもしれない Webアプリ

すごく恐ろしいものの片鱗を味わったときに出るかもしれないセリフを使い、カメラ映像上で強い驚きを…

開発中 visibility 125 thumb_up_alt 0 comment 0
image

ブラウザでの音声認識結果を物理演算を適用して落下させてみるテスト

p5js(描画) + Matter.js(物理演算)+ p5.speech(Web Speech API のラッパー)の組み合わせで、…

開発中 visibility 68 thumb_up_alt 2 comment 0
image

ハロウィン仕様のアニメーションを Webフォントと p5.js で作ってみた(色付けバージョン)

とあるイベントでのハンズオンで、 CSSアニメーションを用いたハロウィン仕様のアニメーションを作っ…

開発中 visibility 56 thumb_up_alt 0 comment 0
image

ハロウィン仕様のモノクロのアニメーションを Webフォントと p5.js で作ってみた

とあるイベントでのハンズオンで、 CSSアニメーションを用いたハロウィン仕様のアニメーションを作っ…

開発中 visibility 233 thumb_up_alt 0 comment 0
image

AI Zoo Keeper

画像生成AI(Stable Diffusion)でどうぶつに変身して、インターネット上に公開されているAIどうぶつ…

完成 visibility 570 thumb_up_alt 2 comment 0