From d3501cc3615c3cdc69491a329b7b3c0fc877d24d Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Thu, 15 Aug 2024 01:39:21 +0200
Subject: [PATCH] test.html: naming

---
 test.html | 78 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 44 insertions(+), 34 deletions(-)
diff --git a/test.html b/test.html
index 3c6cd5c..3dfc69a 100644
--- a/test.html
+++ b/test.html
@@ -14,7 +14,8 @@
 </head>
 <body>
     <script>
-        // LCG using GCC's constants
+        /* LCG using GCC's constants */
+
         // https://en.wikipedia.org/wiki/Linear_congruential_generator
         const LCG = (seed) => {
             let state = seed
@@ -28,13 +29,15 @@
             }
         }
 
-        const generatePattern = (patternSize, gridSize, randomSeed) => {
+        /* Pattern generation */
+
+        const generatePattern = (halfPatternSize, gridSize, randomSeed) => {
             const random = LCG(randomSeed)
-            const matrix = Array(patternSize * 2).fill(null)
-                .map(() => Array(patternSize * 2).fill(0))
+            const matrix = Array(halfPatternSize * 2).fill(null)
+                .map(() => Array(halfPatternSize * 2).fill(0))
 
             const put = (x, y, value) => {
-                const last = patternSize * 2 - 1
+                const last = halfPatternSize * 2 - 1
                 matrix[x][y] = value
                 matrix[y][x] = value
 
@@ -48,8 +51,8 @@
                 matrix[last - x][last - y] = value
             }
 
-            for (let i = 0; i < patternSize; i++) {
-                for (let j = 0; j < patternSize; j++) {
+            for (let i = 0; i < halfPatternSize; i++) {
+                for (let j = 0; j < halfPatternSize; j++) {
                     if ((i % gridSize === 0) || (j % gridSize === 0)) {
                         put(i, j, 1)
                     } else {
@@ -60,6 +63,26 @@
             return matrix
         }
 
+        /* Canvas */
+
+        const getCanvas = (size) => {
+            const canvas = document.createElement('canvas')
+            canvas.width = size
+            canvas.height = size
+
+            Object.entries({
+                'position': 'fixed',
+                'top': '0%',
+                'left': '50%',
+                'margin': '0 auto',
+                'transform': 'translateY(-50%) translateX(-50%) rotate(45deg)',
+                'filter': 'drop-shadow(0px 0px 10px rgba(60,60,60,0.5))',
+                'zIndex': '9999',
+            }).forEach(([key, value]) => { canvas.style[key] = value })
+
+            return canvas
+        }
+
         // https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas
         function scaleImageData(imageData, scale, ctx) {
             const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale)
@@ -83,52 +106,39 @@
             return scaled
         }
 
-        const getCanvas = (size) => {
-            const canvas = document.createElement('canvas')
-            canvas.width = size
-            canvas.height = size
-
-            Object.entries({
-                'position': 'fixed',
-                'top': '0%',
-                'left': '50%',
-                'margin': '0 auto',
-                'transform': 'translateY(-50%) translateX(-50%) rotate(45deg)',
-                'filter': 'drop-shadow(0px 0px 10px rgba(60,60,60,0.5))',
-                'zIndex': '9999',
-            }).forEach(([key, value]) => { canvas.style[key] = value })
-
-            return canvas
-        }
-
-        const matrixToCanvas = (matrix, size, scaleFactor) => {
+        const matrixToCanvas = (matrix, halfPatternSize, scaleFactor) => {
             const flatMatrix = matrix.flat()
+            const canvasSize = halfPatternSize * 2
 
-            const canvas = getCanvas(size * scaleFactor)
+            const canvas = getCanvas(canvasSize * scaleFactor)
             const ctx = canvas.getContext('2d')
-            const imageData = ctx.createImageData(size, size)
-
 
+            const imageData = ctx.createImageData(canvasSize, canvasSize)
             for (let i = 0; i < flatMatrix.length; i++) {
                 const value = flatMatrix[i] * 255
                 const index = i * 4
                 imageData.data[index + 0] = value // Red
                 imageData.data[index + 1] = value // Green
                 imageData.data[index + 2] = value // Blue
-                imageData.data[index + 3] = value ? 255 : 0 // Alpha (fully opaque)
+                imageData.data[index + 3] = value ? 255 : 0 // Alpha
             }
-            ctx.putImageData(scaleImageData(imageData, scaleFactor, ctx), 0, 0)
+
+            const scaledImageData = scaleImageData(imageData, scaleFactor, ctx)
+            ctx.putImageData(scaledImageData, 0, 0)
+
             return canvas
         }
 
+        /* Main */
 
         const gridSize = 3
-        const patternSize = 16
+        const halfPatternSize = 16
         const scaleFactor = 16
         const randomSeed = new Date()
 
-        const pattern = generatePattern(patternSize, gridSize, randomSeed)
-        const miljeCanvas = matrixToCanvas(pattern, patternSize * 2, scaleFactor)
+        const pattern = generatePattern(halfPatternSize, gridSize, randomSeed)
+        const miljeCanvas = matrixToCanvas(pattern, halfPatternSize, scaleFactor)
+
         document.body.appendChild(miljeCanvas)
     </script>
 </body>
