マウスに追従するノイズをつくりたい【canvas2D】

完成イメージ

ノイズの集合がマウスについてきてくれて楽しい。
noiseの大きさとかcolorパターンを操作すれば使い所もありそう
（さりげなく背景演出に仕込みたいですね〜）

円形にノイズを配置する

getRandomNoise = (radius) => {
 //set pos
 let x = this.getRandomNum(radius, radius * -1);
 let ymax = Math.sqrt(Math.pow(radius, 2) - Math.pow(x, 2));
 let ymin = ymax * -1;
 let y = this.getRandomNum(ymax, ymin);
 //set alpha
 let alpha = radius / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) - 1;
 //set rgb
 let rgb =
    this.noiseColorArr[
       Math.floor(Math.random() * this.noiseColorArr.length)
    ];
 return { x: x, y: y, alpha: alpha, rgb: rgb };
};

三平方の定理使う時いちいち図を書かないといけないので、もっと慣れていきたいです。（ど文系）
中心から遠くなるほど透過率が高くなるようにしてます

マウスに追従させる

/*===============================================
mouse follower
===============================================*/
this.mouseFollow = (e) => {
 if (!e) return;
 gsap.to(this.noiseParams, {
    x: e.offsetX,
    y: e.offsetY,
    duration: follow.duration,
    ease: follow.ease,
 });
};
/*===============================================
touch follower
===============================================*/
this.touchFollow = (e) => {
 if (!e) return;
 gsap.to(this.noiseParams, {
    x: e.changedTouches[0].clientX,
    y: e.changedTouches[0].clientY,
    duration: follow.duration,
    ease: follow.ease,
 });
};

fpsのたびに描画させてるので、マウスムーブでposを変化させてあげれば、移動してくれます。
スマホの場合はタッチスタートに仕込んでみてます。

初期化

const noiseFollower = new NoiseFollower(document.getElementById("js_canvas"), {
  fps: 5,
  noise: {
    size: 2,
    num: 10000,
    radius: 80,
    colorArr: [
      { r: 255, g: 0, b: 0 },
      { r: 0, g: 255, b: 0 },
      { r: 0, g: 0, b: 255 }
    ]
  },
  follow: {
    duration: 10,
    ease: "power2.out"
  },
  spread: { vol: 2, duration: 1, ease: "power2.out" }
});
noiseFollower.init();

カラーのパターン、fpsなどなど結構自由に使いまわせるようにしました。

お気に入りポイント

this.spreadAnim = () => {
 gsap.to(this.noiseParams, {
    radius: this.noiseParams.radius * spread.vol,
    duration: spread.duration,
    ease: spread.ease,
 });
};

ここで拡大できるようになってるとこが好み。
遷移アニメーションとかに仕込んだりしたい。

まとめ

直近で似たような演出をする案件があったので、汎用性高いように作ってみました。
二度と使うことはないかもだけど、、笑
まあ、やっぱり使い所の分からん演出つくるのが一番楽しいですね！