heartbeat with afterglow

Largo · Feb 2, 2024 · b588b44 · b588b44
1 parent c612bb4
commit b588b44
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/heartbeat.html b/heartbeat.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Heartbeat Monitor Animation with Afterglow Effect</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="browser.script.iife.js"></script>
+    <script type="text/ruby">
+        require 'js'
+
+        # Create a canvas element
+        canvas = JS.global[:document].createElement("canvas")
+
+        # Set canvas size
+        canvas[:width] = 800
+        canvas[:height] = 200
+
+        # Append the canvas to the document body
+        JS.global[:document][:body].appendChild(canvas)
+
+        # Get the 2D drawing context of the canvas
+        ctx = canvas.getContext("2d")
+
+        # Initialize parameters for the heartbeat line
+        @x = 0
+        @height = canvas[:height].to_i / 2
+        @step = 4 # Change in x, speed of the line
+
+        def draw_heartbeat(ctx)
+          ctx[:fillStyle] = "rgba(0, 0, 0, 0.03)"
+          ctx.fillRect(0, 0, ctx[:canvas][:width], ctx[:canvas][:height])
+
+          # Correct the comparison by converting to integer
+          if @x >= ctx[:canvas][:width].to_i
+            @x = 0
+          else
+            # Continue with your drawing logic...
+            ctx.beginPath()
+            ctx.moveTo(@x, @height)
+            @x += @step
+
+            if rand < 0.1
+              ctx.lineTo(@x, @height - 50)
+              @x += @step
+              ctx.lineTo(@x, @height + 50)
+              @x += @step
+            end
+
+            ctx.lineTo(@x, @height)
+            ctx[:strokeStyle] = "red"
+            ctx.stroke()
+          end
+        end
+
+        # Update the heartbeat animation every 50 milliseconds
+        JS.global.setInterval(lambda { draw_heartbeat(ctx) }, 50)
+    </script>
+</head>
+<body>
+    <h3>Heartbeat Monitor Animation with Afterglow</h3>
+</body>
+</html>