From 46e5103155f523b04453cf737dc998e434eb688b Mon Sep 17 00:00:00 2001
From: Soham Saha <127578105+Soham-Saha@users.noreply.github.com>
Date: Sun, 14 Jul 2024 12:52:39 +0530
Subject: [PATCH] Update Pulse.html
---
ProceduralArt/Pulse/Pulse.html | 27 +++++++++++++++++----------
1 file changed, 17 insertions(+), 10 deletions(-)
diff --git a/ProceduralArt/Pulse/Pulse.html b/ProceduralArt/Pulse/Pulse.html
index 91af65e..9612e77 100644
--- a/ProceduralArt/Pulse/Pulse.html
+++ b/ProceduralArt/Pulse/Pulse.html
@@ -2,6 +2,17 @@
Pulse
+
@@ -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);