Snow Particles

概要

しんしんと降る雪をイメージしたエフェクトサンプルです。

Snow Particles は Canvas 上に複数の粒子を描画し、ゆっくり落下させることで雪や星空のような演出を表現しています。

雪だけでなく、星空・ホコリ・泡・光粒子などにも応用できます。

tsx

見出しの下に変更箇所のコードを載せています。

数値を増やすと密度が上がります。

tsx

const numStars = 150;

tsx

speed: Math.random() * 0.5 + 0.1,

tsx

size: Math.random() * 2 + 0.5,

大きくする場合は5 + 1など。

tsx

opacity: Math.random() * 0.5 + 0.5,

薄くする場合は0.3 + 0.2など。

tsx

star.opacity = 0.5 + Math.sin(Date.now() * 0.002 + star.x) * 0.3;

0.002が点滅速度です。速くするなら0.005、遅くする0.001など。

tsx

ctx.fillStyle = `rgba(255,255,255,${star.opacity})`;

青系

tsx

ctx.fillStyle = `rgba(120,180,255,${star.opacity})`;

金色

tsx

ctx.fillStyle = `rgba(255,220,120,${star.opacity})`;

現在は画面下へ出ると下記コードで上へ戻しています。

tsx

if (star.y > canvas.offsetHeight)

上端ではなく少し上から出したい場合

tsx

star.y = -20;