text: const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  
  const colorArray = [
    "#9139B4",
    "#FE3E6D",
    "#DA6D73",
    "#DCB687",
    "#42A6D8",
    "#9b111e",
  ];
  
  addEventListener("resize", () => {
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    init();
  });
  
  //refresh
  document.addEventListener("keydown", (event) => {
    if (event.code === "Space") {
      ctx.clearRect(0, 0, canvas.width, canvas.height); //refresh canvas;
    }
  });
  
  function getRandomInt(min, max) {
    let randomInt = Math.floor(Math.random() * (max - min + 1) + min);
  
    if (randomInt === 0) {
      getRandomInt(min, max); //need to improve this
    } else {
      return randomInt;
    }
  }
  
  function getRandomColor(colorsArray) {
    return colorArray[Math.floor(Math.random() * colorArray.length)];
  }
  
  function getDistance(x1, y1, x2, y2) {
    const xDististance = x2 - x1;
    const yDististance = y2 - y1;
  
    return Math.hypot(xDististance, yDististance);
  }
  
  class Particle {
    constructor(x, y, directionX, directionY, radius, color) {
      this.x = x;
      this.y = y;
      this.directionY = directionY;
      this.directionX = directionX;
      this.radius = radius;
      this.color = color;
    }
  
    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.strokeStyle = this.color;
      ctx.stroke();
      ctx.closePath();
    }
  
    update() {
      let step = getRandomInt(1, 4); //random step
  
      if (step === 1) {
        this.y += this.directionY;
      }
      if (step === 2) {
        this.x += this.directionX;
      }
      if (step === 3) {
        this.y -= this.directionY;
      }
      if (step === 4) {
        this.x -= this.directionX;
      }
  
      this.draw();
    }
  }
  
  // Implementation
  let particlesArray;
  function init() {
    particlesArray = [];
    for (let i = 0; i < 800; i++) {
      let radius = 0.1;
      let x = getRandomInt(20, canvas.width - radius);
      let y = getRandomInt(0, canvas.height - radius);
      let directionX = getRandomInt(-3, 3);
      let directionY = getRandomInt(-3, 3);
      particlesArray.push(
        new Particle(
          x,
          y,
          directionX,
          directionY,
          radius,
          getRandomColor(colorArray)
        )
      );
    }
  }
  
  // Animation Loop
  function animate() {
    requestAnimationFrame(animate);
    particlesArray.forEach((ptcl) => {
      ptcl.update();
    });
  }
  
  init();
  animate();
  