Разноцветные разводы образующиеся от курсора

Разноцветные разводы образующиеся от курсора

HTML

<script>
  window.canvasOptions = {
      //- autoClear: true,
      autoCompensate: false,
      autoPushPop: true,
      canvas: true,
      //- centered: true,
      width: null,
      height: null
  };
  
</script>
<!-- Combining these:-->
<!-- https://codepen.io/Alca/pen/qKvEmQ-->
<!-- https://codepen.io/justjspr/pen/RYVKpP-->
<svg id="weirdFilter">
  <filter id="svgFilter">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.009" numOctaves="5"></feTurbulence>
    <feDisplacementMap id="displacement" in="SourceGraphic" scale="200"></feDisplacementMap>
  </filter>
</svg>

CSS

body {
  margin: 0;
  overflow: hidden;
  background-color: #141414;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

canvas {
  -webkit-filter: blur(5px) url(#svgFilter);
          filter: blur(5px) url(#svgFilter);
}

#weirdFilter {
  display: none;
}

JS

// Idea based on "flowers" by Gerard Ferrandez: https://codepen.io/ge1doot/pen/dKaZoZ

let particles = [];
let _e;
let last;
let grad;

function setup() {
    onresize();
}

function onresize() {
    let center = Vector.center();
    grad = createRadialGradient(
            center.x, center.y, 0,
            center.x, center.y, hypot(width, height) * 0.4
        );
    grad.addColorStop(0.0, hsl(340, 100, 50));
    grad.addColorStop(0.3, hsl(310, 100, 50));
    grad.addColorStop(0.7, hsl(240, 100, 50));
    grad.addColorStop(1.0, hsl(210, 100, 50));
}

function draw(e) {
    _e = e;
    let center = Vector.center();
    let time = e * 0.001;
    let sTime = sin(time * 0.8);
    // push();
    // // filter(`blur(${map(sTime, -1, 1, 10, 2)}px)`);
    // filter(`blur(1px)`);
    // drawImage(canvas, 0, 0, width, height);
    // pop();
    background(hsl(0, 0, 8, map(sTime, -1, 1, 0.05, 0.2)));
    if(mouseIn) {
        last = null;
        let v = mousePos.copy().sub(mousePosPrev);
        if(v.mag() > 2) {
            let vel_ = v.limit(80);
            for(let i = 0; i < 10; i++) {
                let pos = lerp(mousePosPrev, mousePos, random());
                let vel = vel_.copy().mult(random(0.05, 0.3));
                let p = new Particle(pos, vel, e);
                particles.push(p);
            }
        }
    }
    else {
        let mn = min(width_half, height_half) * 0.45;
        let count = 4;
        let timeC = time * 3.75;
        let timeS = time * 2.5;
        for(let i = 0; i < count; i++) {
            let t = i / count * EIGHTH_PI;
            let pos = createVector(
                    cos(timeC + t),
                    sin(timeS + t)
                ).mult(mn).add(center);
            if(last) {
                let vel = pos.copy().sub(last);
                let p = new Particle(pos, vel, e);
                particles.push(p);
            }
            last = pos.copy();
        }
    }
    particles = particles.filter(p => p.e + p.life > e);
    beginPath();
    particles.forEach(p => {
        let life = (e - p.e) / p.life;
        let r = (1 - life) * 10;
        // circle(p.pos.x, p.pos.y, r);
        push();
        translate(p.pos);
        let v = p.pos.copy().sub(p.lastPos);
        let heading = v.heading();
        let mag = v.mag();
        rotate(heading);
        moveTo(0, r);
        arc(0, 0, r, HALF_PI, -HALF_PI);
        arc(mag, 0, r, -HALF_PI, HALF_PI);
        closePath();
        pop();
        p.update();
    });
    fill(grad);
}

class Particle {
    constructor(pos, vel, e) {
        this.pos = pos.copy();
        this.lastPos = this.pos.copy();
        this.vel = vel.copy();
        this.e = e;
        this.life = random(200, 600);
    }
    update() {
        let dir = floor(this.life + _e * 0.003) % 2 ? 1 : -1;
        let rot = dir * this.life * 0.0003;
        this.lastPos = this.pos.copy();
        this.pos.add(this.vel.mult(0.95).rotate(rot));
    }
}