💽👙 Checkpoint

Glitch (glitch-hello-website) · Glitch (glitch-hello-website) · commit 71d7b3105930 · 2024-09-04T20:12:18.000Z
./script.js:411873/4548
./style.css:411873/19
./voronoi.js:411873/71
./index.html:411873/14
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
     <link rel="stylesheet" href="/style.css" />
 
     <!-- The website JavaScript file -->
-    <script src="/script.js" defer></script>
+    <script type="module" src="/script.js" defer></script>
   </head>
   <body>
     <div id="fullpage">
diff --git a/script.js b/script.js
@@ -1 +1,63 @@
-import { Voronoi } from "./voronoi.min.js";
+import { Voronoi } from "./voronoi.js";
+
+const randomInt = () => {
+    const ranges = [
+      { min: 500, max: 700 },
+      { min: 1000, max: 5000 },
+      { min: 5000, max: 7000 },
+    ];
+    const { min, max } = ranges[Math.floor(Math.random() * ranges.length)];
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
+const numPoints = randomInt();
+
+const points = [];
+
+function drawVoronoi(canvasId,nPoints) {
+  const canvas = document.getElementById(canvasId);
+  const ctx = canvas.getContext("2d");
+  const canvasWidth = canvas.clientWidth;
+  const canvasHeight = canvas.clientHeight;
+  
+  // Set canvas size
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  
+  for (let i = 0; i < nPoints; i++) {
+    points.push({
+      x: Math.random() * canvasWidth,
+      y: Math.random() * canvasHeight,
+    });
+  }
+  
+  const voronoi = new Voronoi();
+  const bbox = { xl: 0, xr: canvasWidth, yt: 0, yb: canvasHeight };
+  const diagram = voronoi.compute(points, bbox);
+
+  // Draw Voronoi cells
+  diagram.cells.forEach((cell) => {
+    ctx.beginPath();
+    ctx.moveTo(
+      cell.halfedges[0].getStartpoint().x,
+      cell.halfedges[0].getStartpoint().y
+    );
+
+    cell.halfedges.forEach((edge) => {
+      const startPoint = edge.getStartpoint();
+      ctx.lineTo(startPoint.x, startPoint.y);
+    });
+
+    ctx.closePath();
+
+    const r = ([cell.site.voronoiId] * 3) % 255;
+    const g = [cell.site.voronoiId * 5 + 1] % 255;
+    const b = ((r * g) / (r + g)) % 255;
+    ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 1)`;
+    ctx.stroke();
+  });
+}
+
+window.addEventListener("resize", drawVoronoi("background",numPoints));
+
+// Initialize on page load
+window.addEventListener("load", drawVoronoi("background",numPoints));
diff --git a/style.css b/style.css
@@ -23,7 +23,6 @@ canvas#background{
   height:100%;
   width:100%;
   border:1px solid black;
-  background: red;
   grid-area:  1 / 1 / 4 / 4;
   z-index: -1;
   
diff --git a/voronoi.js b/voronoi.js
@@ -1718,7 +1718,3 @@ Voronoi.prototype.compute = function(sites, bbox) {
     };
 
 /******************************************************************************/
-
-if ( typeof module !== 'undefined' ) {
-    module.exports = Voronoi;
-}
