Voronoi Shatter: single-file interactive power-diagram shatter

0225bb9ee770fb08425505fa2d02aa7b63bc9b26 · 2026-07-24 23:30:47 -0700 · Steve

Files touched

M index.html

Diff

commit 0225bb9ee770fb08425505fa2d02aa7b63bc9b26
Author: Steve <steve@designerwallcoverings.com>
Date:   Fri Jul 24 23:30:47 2026 -0700

    Voronoi Shatter: single-file interactive power-diagram shatter
---
 index.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/index.html b/index.html
index f12343e..fbbfc7e 100644
--- a/index.html
+++ b/index.html
@@ -218,11 +218,20 @@
   // -------- canvas sizing ----------------------------------------------------
   function resize() {
     DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
+    var prevW = W, prevH = H;
     W = window.innerWidth;
     H = window.innerHeight;
     canvas.width = Math.round(W * DPR);
     canvas.height = Math.round(H * DPR);
     ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+    // keep the composition proportional so cells never drift off-canvas
+    if (prevW && prevH && (prevW !== W || prevH !== H) && sites.length) {
+      var sx = W / prevW, sy = H / prevH;
+      for (var i = 0; i < sites.length; i++) {
+        sites[i].x *= sx;
+        sites[i].y *= sy;
+      }
+    }
   }
 
   // -------- easing -----------------------------------------------------------

← 7bc7a7a Voronoi Shatter: interactive weighted-Voronoi shatter effect · back to Voronoi Shatter · chore: guard centroid() against empty polygon (session close 062b607 →