leporello-js/docs/examples/canvas_animation_bubbles/bubbles.js

// Original source:
// https://www.freecodecamp.org/news/how-to-create-animated-bubbles-with-html5-canvas-and-javascript/

const canvas = document.createElement("canvas")
canvas.style.backgroundColor = "#00b4ff"
document.body.appendChild(canvas)
canvas.width = window.innerWidth
canvas.height = window.innerHeight

const context = canvas.getContext("2d")

context.font = "30px Arial"
context.textAlign = "center"
context.fillStyle = "white"
context.fillText("Click to spawn bubbles", canvas.width / 2, canvas.height / 2)

let circles = []

function draw(circle) {
  context.beginPath()
  context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI)
  context.strokeStyle = `hsl(${circle.hue} 100% 50%)`
  context.stroke()

  const gradient = context.createRadialGradient(
    circle.x,
    circle.y,
    1,
    circle.x + 0.5,
    circle.y + 0.5,
    circle.radius,
  )

  gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.3)")
  gradient.addColorStop(0.95, "#e7feff")

  context.fillStyle = gradient
  context.fill()
}

function move(circle, timeDelta) {
  circle.x = circle.x + timeDelta * circle.dx
  circle.y = circle.y - timeDelta * circle.dy
}

let intervalId

function startAnimation() {
  if (intervalId == null) {
    intervalId = setInterval(animate, 20)
  }
}

function stopAnimation() {
  if (intervalId != null) {
    clearInterval(intervalId)
    intervalId = null
  }
}

let prevFrameTime

const animate = () => {
  const now = Date.now()
  const timeDelta = prevFrameTime == null ? 0 : now - prevFrameTime
  prevFrameTime = now

  if (circles.length == 0) {
    return
  }

  context.clearRect(0, 0, canvas.width, canvas.height)

  circles.forEach(circle => {
    move(circle, timeDelta)
    draw(circle)
  })
}

const createCircles = event => {
  startAnimation()

  circles = circles.concat(
    Array.from({ length: 50 }, () => ({
      x: event.pageX,
      y: event.pageY,
      radius: Math.random() * 50,
      dx: Math.random() * 0.3,
      dy: Math.random() * 0.7,
      hue: 200,
    })),
  )
}

canvas.addEventListener("click", createCircles)

window.onfocus = startAnimation
window.onblur = stopAnimation