Update Pulse.html

Soham-Saha · Jul 14, 2024 · 46e5103 · 46e5103
1 parent 0181407
commit 46e5103
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/ProceduralArt/Pulse/Pulse.html b/ProceduralArt/Pulse/Pulse.html
@@ -2,6 +2,17 @@
 <html>
 <head>
     <title>Pulse</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background: black;
+        }
+    </style>
 </head>
 <body>
     <canvas id='canv'></canvas>
@@ -10,15 +21,15 @@
         const HEIGHT = window.innerHeight;
         const NUM_POINTS = 500;
         const RADIUS = Math.min(WIDTH, HEIGHT) / 3;
+        const CANVAS_SIZE = 2 * RADIUS;
 
-        document.body.style.background = 'black';
         const canv = document.getElementById('canv');
         const ctx = canv.getContext('2d');
-        canv.width = WIDTH;
-        canv.height = HEIGHT;
+        canv.width = CANVAS_SIZE;
+        canv.height = CANVAS_SIZE;
 
         ctx.fillStyle = 'black';
-        ctx.fillRect(0, 0, WIDTH, HEIGHT);
+        ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
 
         const pts = new Float32Array(NUM_POINTS * 2);
         for (let i = 0; i < NUM_POINTS; i++) {
@@ -43,7 +54,6 @@
         reset()
 
         let vert = targets.map(x => x % 2);
-
         function updatePoints() {
             for (let i = 0; i < NUM_POINTS; i++) {
                 const x = pts[2 * i];
@@ -57,19 +67,17 @@
                 }
             }
         }
-
         let ct = 0;
         const clearOut = false;
-
         function updateScreen() {
             ct += 1;
             updatePoints();
             ctx.fillStyle = 'rgba(0,0,0,0.05)';
-            ctx.fillRect(0, 0, WIDTH, HEIGHT);
+            ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
             if (!clearOut) {
                 ctx.fillStyle = 'white';
                 for (let i = 0; i < NUM_POINTS; i++) {
-                    ctx.fillRect(pts[i * 2] + WIDTH / 2, pts[i * 2 + 1] + HEIGHT / 2, 1, 1);
+                    ctx.fillRect(pts[i * 2] + RADIUS, pts[i * 2 + 1] + RADIUS, 1, 1);
                 }
             }
             requestAnimationFrame(updateScreen);
@@ -78,7 +86,6 @@
                 ct = 0;
             }
         }
-
         requestAnimationFrame(updateScreen);
     </script>
 </body>