Hex grid

2023-12-02 23:52:10 -08:00 · 2023-12-02 23:52:10 -08:00 · 0687acde19
commit 0687acde19
parent caf53e4239
3 changed files with 71 additions and 0 deletions
--- a/src/hexgrid/app.ts
+++ b/src/hexgrid/app.ts
@ -0,0 +1,49 @@
+const canvas = document.querySelector("#mainCanvas");
+const ctx = canvas.getContext("2d");
+
+console.log("hexgrid");
+
+const screenWidth = canvas.width = window.innerWidth;
+const screenHeight = canvas.height = window.innerHeight;
+
+const angle = 2 * Math.PI / 6;
+
+ctx.lineWidth = 3;
+ctx.strokeStyle = "black";
+
+// x and y are center point
+const drawHexagon = (x: number, y: number, radius: number) => {
+    ctx.beginPath();
+    for (let i = 0; i < 6; i++) {
+        ctx.lineTo(x + radius * Math.cos(angle * i), y + radius*Math.sin(angle * i));
+    }
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+};
+
+const drawGrid = (width: number, height: number, radius: number) => {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+
+    let total = 0;
+
+    for (let gridY = 0; gridY < height; gridY++) {
+        for (let gridX = 0; gridX < width; gridX++) {
+            const x = radius + gridX * radius * (1 + cos);
+            const y = radius + ((gridX % 2 === 0) ? 0 : radius*sin) + 2*radius*sin*gridY;
+            if (x >= screenWidth) {
+                break;
+            }
+            if (y >= screenHeight) {
+                break;
+            }
+            ctx.fillStyle = "#1c133f";
+            drawHexagon(x, y, radius);
+            total += 1;
+        }
+    }
+    console.log(total);
+}
+
+drawGrid(200, 20, 20);
--- a/src/hexgrid/index.html
+++ b/src/hexgrid/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Hexgrid</title>
+        <script type="module" src="app.ts"></script>
+        <style>
+            canvas {
+                display: block;
+            }
+            body {
+                background: black;
+                margin: 0px;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="mainCanvas"></canvas>
+    </body>
+</html>
+
--- a/src/index.html
+++ b/src/index.html
@ -15,6 +15,7 @@
            <li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
            <li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
            <li> <a href="./starfield/index.html">Starfield</a>
+            <li> <a href="./hexgrid/index.html">Hexgrid</a>
        </ul>

        <h2>Reference Animations</h2>