<div class="text">
  <h1>CLICK!!</h1>
  <p>Holding & Moving the Mouse</p>
</div>
<canvas id="canvas1">
</canvas>

body {
  height: 95vh;
  width: 95vw;
  display: grid;
}
#canvas1 {
  position: absolute;
  /* background-color: blue; */
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.text {
  align-self: center;
  justify-self: center;
  color: pink;
  font-family: sans-serif;
  font-size: 1.5rem;
}
h1,
p {
  text-align: center;
  text-shadow: 0 1em 1em rgba(255, 255, 255, 1);
  animation: click 0.5s infinite;
  transition: all 1s ease-in-out;
}

@keyframes click {
  0%,
  100% {
    transform: scale(1.02);
  }
  50% {
    transform: scale(1);
  }
}

const canvas = document.querySelector("#canvas1");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// ctx.globalCompositeOperation = 'overlay'

const edge = 30;
let drawing = false;

const mouse = {
  x: null,
  y: null
};

window.addEventListener("mousemove", function (e) {
  mouse.x = e.x;
  mouse.y = e.y;
});

class Root {
  constructor(x, y, color, centerX, centerY) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;
    this.centerX = centerX;
    this.centerY = centerY;
  }
  draw() {
    this.speedX += (Math.random() - 0.5) / 2;
    this.speedY += (Math.random() - 0.5) / 2;
    this.x += this.speedX;
    this.y += this.speedY;

    const distanceX = this.x - this.centerX;
    const distanceY = this.y - this.centerY;
    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
    const radius = ((-distance / edge + 1) * edge) / 2;

    if (radius > 0) {
      requestAnimationFrame(this.draw.bind(this));
      ctx.beginPath();
      ctx.arc(this.x, this.y, radius, 0, 2 * Math.PI);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.strokeStyle = "pink";
      ctx.stroke();
    }
  }
}

function branchOut() {
  if (drawing) {
    const centerX = mouse.x;
    const centerY = mouse.y;
    for (let i = 0; i < 4; i++) {
      const root = new Root(mouse.x, mouse.y, "yellow", centerX, centerY);
      root.draw();
    }
  }
}

window.addEventListener("resize", function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

window.addEventListener("mousemove", function () {
  ctx.fillStyle = "rgba(0,255,255,0.02)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  branchOut();
});

window.addEventListener("mousedown", () => {
  drawing = true;
});
window.addEventListener("mouseup", () => {
  drawing = false;
});