Add files via upload

html/boxdraw.js

@@ -0,0 +1,100 @@
+function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
+ 
+    // Get a reference to the canvas element
+    var canvas = document.getElementById('pixelCanvas');
+
+    // Get the canvas context
+    var ctx = canvas.getContext('2d');
+
+    // Set the width and height of the canvas
+    if (window.innerHeight < window.innerWidth) {
+        canvas.width = Math.floor(window.innerHeight * 0.98);
+    }
+    else{
+        canvas.width = Math.floor(window.innerWidth * 0.98);
+    }
+    //canvas.height = window.innerWidth;
+
+    let pixelSize = Math.floor(canvas.width/widthPixels);
+
+    //Set the canvas height to fit the right number of pixelrows
+    canvas.height = (pixelSize * heightPixels) + 10
+    
+    //Iterate through the matrix
+    for (let y = 0; y < heightPixels; y++) {
+        for (let x = 0; x < widthPixels; x++) {
+
+            // Calculate the index of the current pixel
+            let i = (y*widthPixels) + x;
+            
+            //Gets the RGB of the current pixel
+            let pixel = inputPixelArray[i];
+
+            let pixelColor = 'rgb(' + pixel[0] + ', ' + pixel[1] + ', ' + pixel[2] + ')';
+            let r = pixel[0];
+            let g = pixel[1];
+            let b = pixel[2];
+            let pos = pixel[4];
+
+            let textColor = 'rgb(128,128,128)';
+
+            // Set the fill style to the pixel color
+            ctx.fillStyle = pixelColor;
+
+            //Draw the rectangle
+            ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+
+            // Draw a border on the box
+            ctx.strokeStyle = '#888888';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+
+            //Write text to box
+            ctx.font = "10px Arial";
+            ctx.fillStyle = textColor;
+            ctx.textAlign = "center";
+            ctx.textBaseline = 'middle';
+            ctx.fillText((pos + 1), (x * pixelSize) + (pixelSize /2), (y * pixelSize) + (pixelSize /2));
+        }
+    }
+}
+
+function drawBackground() {
+    const grid = document.createElement("div");
+    grid.id = "grid";
+    grid.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 20px);
+        grid-template-rows: repeat(auto-fill, 20px);
+        grid-gap: 0px;
+    `;
+  
+    const boxSize = 20;
+    const boxCount = Math.ceil(window.innerWidth / boxSize) * Math.ceil(window.innerHeight / boxSize);;
+
+    for (let i = 0; i < boxCount; i++) {
+      const box = document.createElement("div");
+      box.classList.add("box");
+      box.style.backgroundColor = getRandomColor();
+      grid.appendChild(box);
+    }
+    grid.style.zIndex = -1;
+    document.body.appendChild(grid);
+  }
+  
+  function getRandomColor() {
+    const letters = "0123456789ABCDEF";
+    let color = "rgba(";
+    for (let i = 0; i < 3; i++) {
+      color += Math.floor(Math.random() * 256) + ",";
+    }
+    color += "0.05)";
+    return color;
+  }
+
+  window.drawBackground = drawBackground;