add hex animation

README.org

@@ -0,0 +1,5 @@
+* JavaScript Animations
+
+** HexGrid
+Animation which fades in and out a small hex patterned across the screen.
+demo: hexgrid.html

js/hex_animation.js

@@ -0,0 +1,79 @@
+// script.js
+var canvas = document.getElementById('hexmap');
+var ctx = canvas.getContext('2d');
+
+function resizeCanvas() {
+    var headerHeight = document.querySelector('header').clientHeight;
+    var headerWidth = document.querySelector('header').clientWidth;
+    canvas.width = headerWidth;
+    canvas.height = headerHeight;
+}
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+const hexagonAngle = Math.PI / 6; // 30 degrees in radians
+const sideLength = 15;
+const hexHeight = Math.sin(hexagonAngle) * sideLength;
+const hexRadius = Math.cos(hexagonAngle) * sideLength;
+const hexRectangleHeight = sideLength + 2 * hexHeight;
+const hexRectangleWidth = 2 * hexRadius;
+
+ctx.strokeStyle = "#CCCCCC";
+ctx.lineWidth = 1;
+
+let opacityValues = [];
+
+function initializeOpacityValues() {
+    for (let i = 0; i < Math.ceil(canvas.height / (hexHeight * 1.5)); i++) {
+        let row = [];
+        for (let j = 0; j < Math.ceil((canvas.width - (i % 2) * hexRadius) / hexRectangleWidth); j++) {
+            row.push(Math.random());
+        }
+        opacityValues.push(row);
+    }
+}
+
+function drawHexagon(x, y, opacity) {
+    ctx.beginPath();
+    for (let i = 0; i < 6; i++) {
+        let angle = Math.PI / 3 * i;
+        ctx.lineTo(
+            x + hexRadius * Math.cos(angle),
+                   y + hexRadius * Math.sin(angle)
+        );
+    }
+    ctx.closePath();
+    ctx.globalAlpha = opacity;
+    ctx.stroke();
+    ctx.globalAlpha = 1; // Reset global alpha after drawing
+}
+
+function drawBoard() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (let i = 0; i < opacityValues.length; i++) {
+        let offset = (i % 2) * hexRadius;
+        for (let j = 0; j < opacityValues[i].length; j++) {
+            drawHexagon(
+                j * hexRectangleWidth + offset,
+                i * (hexHeight * 1.5),
+                        opacityValues[i][j]
+            );
+        }
+    }
+}
+
+function animate() {
+    for (let i = 0; i < opacityValues.length; i++) {
+        for (let j = 0; j < opacityValues[i].length; j++) {
+            opacityValues[i][j] += Math.random() * 0.1 - 0.05;
+            if (opacityValues[i][j] > 1) opacityValues[i][j] = 1;
+            if (opacityValues[i][j] < 0) opacityValues[i][j] = 0;
+        }
+    }
+    drawBoard();
+    requestAnimationFrame(animate);
+}
+
+initializeOpacityValues();
+animate();