この技術の概算見積を試算見積試算無料で相談する

デモの使い方

テキストを粒子で形成し、マウスに近づけると粒子が拡散し、止めると文字に再集合するデモです。

パーティクルテキストピクセル化 Canvas描画

操作手順

画面中央に粒子で描かれたテキストが表示されるのを確認
「マウスを動かして粒子を拡散させてください」の通り、マウスを粒子に近づけて動かす
マウスを離すと粒子が元の位置に戻りテキストに再集合するのを観察

活用シーン

getImageDataによるテキストのピクセルスキャンと粒子生成の学習
マウスインタラクションによるパーティクル挙動制御の実装例
LPやイベント画面でのインタラクティブ演出の参考実装

Tech Demo: Interactive Particles

マウスを動かして粒子を拡散させてください。
止まると文字に戻ります。