logo

#p5.jsの検索結果

59件
image

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

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

開発中 visibility 67 thumb_up_alt 0 comment 0
image

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

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

完成 visibility 353 thumb_up_alt 7 comment 0
image

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

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

開発中 visibility 67 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 65 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 51 thumb_up_alt 2 comment 0
image

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

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

開発中 visibility 45 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 93 thumb_up_alt 0 comment 0
image

AI Zoo Keeper

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

完成 visibility 264 thumb_up_alt 2 comment 0
image

p5.js で複数の円をランダムに動かす(大きさ依存で複数のパターンがある緩急のついた動き)

p5.js で複数の円をランダムに動かしているのですが、その動く速さは大きさに依存していて、なおかつ…

開発中 visibility 69 thumb_up_alt 0 comment 0
image

p5.js で描画した円の横方向の動きと LEDテープの点灯した LED の移動を連動させる試作

micro:bit につないだ LEDテープの点灯位置を、p5.js側の円の横方向の座標と連動させました。Web Ser…

開発中 visibility 88 thumb_up_alt 0 comment 0
image

SVGフィルタを使った溶けるようなエフェクトとパス上を動く複数の球体のアニメーション +3D の動き

五〜十二芒星のパス上を動く複数の球体に、SVGフィルターの溶けるようなエフェクトを適用したり、3D…

開発中 visibility 78 thumb_up_alt 0 comment 0
image

SVGフィルタを使った溶けるようなエフェクトを 3D空間上のオブジェクトに適用したアニメーション

SVGフィルタを使った溶けるようなエフェクト(feGaussianBlur・feColorMatrix の組み合わせ)を、3D…

開発中 visibility 92 thumb_up_alt 0 comment 0
image

SVGフィルタを使った溶けるようなエフェクトとパス上を動く複数の球体のアニメーションの組み合わせ

五〜十二芒星のパス上を動く複数の球体に、SVGフィルターの溶けるようなエフェクト(feGaussianBlur…

開発中 visibility 57 thumb_up_alt 0 comment 0
image

動く 3D の立方体にグローエフェクトを適用してみる(p5.js での実装)

p5.js で実装したグローエフェクト(ブラーフィルターと合成を活用した方法)を、WEBGLモードで描画…

開発中 visibility 52 thumb_up_alt 0 comment 0
image

p5.js でグローエフェクトと伴う図形の描画アニメーション(イージングで動きに変化をつける)

p5.js で作ったグローエフェクト(ブラーフィルターと合成を活用した方法)と anime.js によるイージ…

開発中 visibility 75 thumb_up_alt 0 comment 0
image

特定の組み合わせで面白い見え方:「五・十二芒星のパス上を動く 1〜16個の球体のアニメーション」

「五芒星・十二芒星のパス上を動く、1〜16個の球体のアニメーション」を p5.js の標準機能で作りまし…

開発中 visibility 45 thumb_up_alt 0 comment 0
image

「五芒星〜十芒星のパス上を動く 8個の球体のアニメーション」を p5.js で実装

「五芒星〜十芒星のパス上を動く 8個の球体のアニメーション」を p5.js の標準機能のみで作りました…

開発中 visibility 84 thumb_up_alt 0 comment 0
image

七芒星の上を動く複数の 3D球体のアニメーション【p5.js の標準機能のみを利用】

「七芒星の上を動く、複数の 3D球体のアニメーション」を p5.js の標準機能のみで作りました。動いて…

開発中 visibility 68 thumb_up_alt 0 comment 0
image

p5.js で動画とカメラ映像の合成を試す(海の動画素材との色合いを調整)

p5.js を使って、海の動画とカメラ映像とを合成してみました(海の動画とカメラ映像の色合いが違った…

開発中 visibility 93 thumb_up_alt 0 comment 0
image

金魚救い

〜ポイを投擲(ポイ)して金魚をすくえ〜 お前に金魚が救えるか?Planet Of Intelligenceの力を信じ…

完成 visibility 397 thumb_up_alt 4 comment 1
image

p5.js で画像とカメラ映像の合成を試す(窓ガラスと雨の水滴の写真素材を使って)

Photoshop の本で見かけた「曇りガラスと別の画像を合成する方法」を、p5.js の処理に置きかえて試し…

開発中 visibility 172 thumb_up_alt 0 comment 0
image

p5.js で VFX: Canvas の filter(hue-rotate) で色違いの炎を作る

CanvasRenderingContext2D.filter の hue-rotate() で色相の値を変化させて、映像エフェクト用の赤い…

開発中 visibility 154 thumb_up_alt 0 comment 0
image

ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」

「両手の親指と人差し指で囲まれた領域は、人の後ろの背景が見える」という光学迷彩・透明マント的な…

完成 visibility 1250 thumb_up_alt 13 comment 0
image

多方向に光が拡散するテキスト用エフェクトを作ってみた: p5.js で実装した画像処理

元々、ブラーフィルタと p5.js での画像合成を組み合わせてグローエフェクトを試作していたものがあ…

開発中 visibility 82 thumb_up_alt 0 comment 0
image

光る軌跡でパーティクル発光: ブラーフィルターと合成処理を使った p5.js でのグローエフェクト

p5.js を使った描画処理で、ブラーフィルターと合成処理を組み合わせたグローエフェクトを試作してい…

開発中 visibility 96 thumb_up_alt 0 comment 0
image

【指先付近のみに焦点があうカメラ映像】p5.js と MediaPipe Hands で実装

人差し指の先を起点に、その周りだけ焦点が合う(その点から遠いとブラーフィルタのぼかしが強くなる…

開発中 visibility 165 thumb_up_alt 0 comment 0
image

p5.js と OpenCV.js(画像処理)の組み合わせ: エッジ検出と線分検出をお試し

p5.js でカメラ映像取得・描画処理を行う構成で、画像処理部分に OpenCV.js を使ってみるテストで、C…

開発中 visibility 380 thumb_up_alt 0 comment 0
image

p5.js の描画と 100円ショップの透明下敷きで擬似ホログラム(ペッパーズ・ゴーストの仕組みで)

擬似ホログラムなどとも紹介されたりする「ペッパーズ・ゴースト」という視覚トリックを用いた仕組み…

開発中 visibility 251 thumb_up_alt 2 comment 0
image

【2本の指で作る小さな透明マント的エフェクト】p5.js と MediaPipe Hands で実装

親指と人差し指で囲まれた領域は、人の後ろの背景が見えるという、透明マント的なエフェクトをカメラ…

開発中 visibility 884 thumb_up_alt 1 comment 0
image

【VFX】空間を燃やしたり手から稲妻を出したり:ブラウザ上で動く p5.js 実装のアプリ

After Effects などでの VFX用に配布されてる素材データを使い、ブラウザ上で動く p5.js 実装の処理…

開発中 visibility 338 thumb_up_alt 2 comment 0