deploy: leporello-js/app@a6e3f1b36f

docs/examples/canvas_animation_bubbles/bubbles.js

@@ -1,8 +1,8 @@
-// Original source: 
+// 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'
+const canvas = document.createElement("canvas")
+canvas.style.backgroundColor = "#00b4ff"
 document.body.appendChild(canvas)
 canvas.width = window.innerWidth
 canvas.height = window.innerHeight
@@ -10,9 +10,9 @@ 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)
+context.textAlign = "center"
+context.fillStyle = "white"
+context.fillText("Click to spawn bubbles", canvas.width / 2, canvas.height / 2)
 
 let circles = []
 
@@ -28,7 +28,7 @@ function draw(circle) {
     1,
     circle.x + 0.5,
     circle.y + 0.5,
-    circle.radius
+    circle.radius,
   )
 
   gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.3)")
@@ -39,20 +39,20 @@ function draw(circle) {
 }
 
 function move(circle, timeDelta) {
-  circle.x = circle.x + timeDelta*circle.dx
-  circle.y = circle.y - timeDelta*circle.dy
+  circle.x = circle.x + timeDelta * circle.dx
+  circle.y = circle.y - timeDelta * circle.dy
 }
 
 let intervalId
 
 function startAnimation() {
-  if(intervalId == null) {
+  if (intervalId == null) {
     intervalId = setInterval(animate, 20)
   }
 }
 
 function stopAnimation() {
-  if(intervalId != null) {
+  if (intervalId != null) {
     clearInterval(intervalId)
     intervalId = null
   }
@@ -65,31 +65,31 @@ const animate = () => {
   const timeDelta = prevFrameTime == null ? 0 : now - prevFrameTime
   prevFrameTime = now
 
-  if(circles.length == 0) {
+  if (circles.length == 0) {
     return
   }
 
-	context.clearRect(0, 0, canvas.width, canvas.height)
+  context.clearRect(0, 0, canvas.width, canvas.height)
 
-	circles.forEach(circle => {
-		move(circle, timeDelta)
-		draw(circle)
-	})
+  circles.forEach(circle => {
+    move(circle, timeDelta)
+    draw(circle)
+  })
 }
 
-const createCircles = (event) => {
+const createCircles = event => {
   startAnimation()
 
-	circles = circles.concat(Array.from({length: 50}, () => (
-     {
+  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)