Random canvas worms 🐛

/*Downloaded from https://www.codeseek.co/jh3y/random-canvas-worms-andx1f41b-vrxwaL */
    canvas
  position fixed
  height 100vh
  width 100vw

/*Downloaded from https://www.codeseek.co/jh3y/random-canvas-worms-andx1f41b-vrxwaL */
    const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const floored = (r) => Math.floor(Math.random() * r)
const UPPER_LIMIT = 5
const particles = new Array(20).fill().map((p) => {
  let y = floored(canvas.height)
  return {
    x: -10,
    y,
    vx: floored(UPPER_LIMIT) + 1,
    vy: -(floored(UPPER_LIMIT) + 1),
    travel: 100,
    size: (floored(Math.random() * (window.innerHeight * 0.01))) + 10,
    start: y,
    color: `rgba(${floored(255)},${floored(255)}, ${floored(255)}, ${Math.random()})`
  }
})
let FRAME_COUNT = 0
const draw = () => {
  if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  // context.fillStyle = 'black'
  // context.fillRect(0, 0, canvas.width, canvas.height)
  for (const particle of particles) {
    context.fillStyle = particle.color
    particle.x += particle.vx
    particle.y += particle.vy
    FRAME_COUNT++
    if (FRAME_COUNT % 11 === 0 && Math.random() > 0.5) {
      particle.vx = Math.random() > 0.5 ? Math.max(1, particle.vx - 1) : Math.min(particle.vx + 1, 5)
    }
    if (FRAME_COUNT % 13 === 0 && Math.random() > 0.5) {
      particle.vy = Math.random() > 0.5 ? Math.max(-5, particle.vy - 1) : Math.min(particle.vy + 1, -1)
    }
    if (particle.x > canvas.width) particle.x = 0
    if (particle.y < 0) particle.y = canvas.height + 10
    context.fillRect(particle.x, particle.y, particle.size, particle.size)
  }
  requestAnimationFrame(draw)
}
requestAnimationFrame(draw)