Javascriptでブラックホール風エフェクト

2024年10月18日

ブラックホールみたいなJavaScriptエフェクトを作成したよ。
マウスカーソルを画面の一定の位置で止めていると、そこに周辺から無数の点が集まって来るんだ。
遊んでみて！

掃除機みたいにドンドン吸い込むわね。

・JavaScriptで描画やアニメーションを行うためにcanvas要素を使いました。

・Particleクラスを作り、粒子（点）の初期位置、サイズ、色、速度をランダムに設定しました。

・マウスの位置に対して粒子が引き寄せられるようにし、マウスを動かすと「ブラックホール」が動きました。

・canvas.getBoundingClientRect()を使用して、キャンバスの画面上の位置を取得し、それを使ってevent.clientXやevent.clientYからオフセットを引くことで、正確なマウス位置を取得しマウス位置のズレを修正しました。

・requestAnimationFrameを使ってフレームレートを30fpsに制限し、描画頻度を減らし負荷を軽くしました。

・ブラックホールから500ピクセル以上離れた粒子は描画をスキップし、不要な計算を省略しました。

・粒子の色やサイズは初期化時に一度だけ計算し、それを使い回すことで毎フレームの計算を減らしました。

・スマートフォンのタッチ動作に対応。

おすすめ記事