From bb3efbf6c592390b63da3fcd09080cd7e6987ac8 Mon Sep 17 00:00:00 2001 From: Christoph Hagen Date: Tue, 20 Dec 2022 00:44:11 +0100 Subject: [PATCH] Show average colors in grid --- Public/grid.css | 27 ++++++++++++++- Public/grid.html | 3 ++ Public/grid.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 115 insertions(+), 2 deletions(-) diff --git a/Public/grid.css b/Public/grid.css index aa43cdf..7669643 100644 --- a/Public/grid.css +++ b/Public/grid.css @@ -1,19 +1,29 @@ body { margin: 0; + background-color: gray; +} +#top-bar { + position: fixed; + width: 100%; + height: 30px; + padding: 10px; + display: flex; } #image-canvas { width: 2000px; - background-color: gray; display: flex; flex-wrap: wrap; padding-left: 25px; padding-top: 6px; + margin-top: 50px; } #image-canvas img { width: 50px; height: 50px; border-radius: 25px; margin-top: -6px; + box-sizing: border-box; + cursor: pointer; } #image-canvas img:nth-child(80n+42) { margin-left: -25px; @@ -28,3 +38,18 @@ body { left: 25px; display: none; } + +#show-color-button { + height: 20px; + font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 16px; + background-color: orange; + padding: 5px 10px; + border-radius: 8px; + cursor: pointer; +} + +#show-color-button:hover { + background-color: rgb(255, 174, 26); +} diff --git a/Public/grid.html b/Public/grid.html index b2ab459..916fd12 100644 --- a/Public/grid.html +++ b/Public/grid.html @@ -19,6 +19,9 @@ +
+
Toggle colors
+
diff --git a/Public/grid.js b/Public/grid.js index 189f8c2..7ec1e1e 100644 --- a/Public/grid.js +++ b/Public/grid.js @@ -39,8 +39,9 @@ const elements = imageCanvas.getElementsByTagName("img"); const selectedCapCircle = document.getElementById("selected-cap-circle"); imageCanvas.addEventListener("click", function(event) { + const yOffset = 50; const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left; - const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top; + const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top + yOffset; var row = Math.floor(yPosition / effectiveHeight); @@ -103,3 +104,87 @@ imageCanvas.addEventListener("click", function(event) { selectedPosition = null; }); + +function averageColor(imageElement) { + + var canvas = document.createElement('canvas'); + var context = canvas.getContext && canvas.getContext('2d'); + + if (!context) { + return { r: 255, g: 0, b: 0 }; + } + + // Set the height and width equal + // to that of the canvas and the image + var height = canvas.height = + imageElement.naturalHeight || + imageElement.offsetHeight || + imageElement.height; + var width = canvas.width = + imageElement.naturalWidth || + imageElement.offsetWidth || + imageElement.width; + + // Draw the image to the canvas + context.drawImage(imageElement, 0, 0); + + // Get the data of the image + try { + var imgData = context.getImageData(0, 0, width, height); + } catch(e) { + /* security error, img on diff domain */alert('x'); + return { r: 255, g: 0, b: 0 }; + } + + // Get the length of image data object + var length = imgData.data.length; + const pixelCount = height * width; + const halfX = width / 2; + const halfY = height / 2; + + var rgb = { r: 0, g: 0, b: 0 }; + var count = 0; + for (var i = 0; i < pixelCount; i += 1) { + + // Exclude everything outside of circle + const x = i % width - halfX; + const y = Math.floor(i / width) - halfY; + const distanceToCenter = Math.sqrt(x**2 + y**2); + if (distanceToCenter > halfY) { + continue; + } + + // Sum all values of the colour + const offset = 4 * i; + rgb.r += imgData.data[offset]; + rgb.g += imgData.data[offset + 1]; + rgb.b += imgData.data[offset + 2]; + count += 1; + } + + // Find the averages + rgb.r = Math.floor(rgb.r / count); + rgb.g = Math.floor(rgb.g / count); + rgb.b = Math.floor(rgb.b / count); + + return rgb; +} + +for (let i = 0; i < capPositions.length; i += 1) { + const element = elements[i]; + element.onload = function() { + const rgb = averageColor(element); + const color = `rgb(${rgb.r},${rgb.g},${rgb.b})`; + element.style.backgroundColor = color; + } +} + +var showColors = false; + +function toggleColors() { + showColors = !showColors; + const padding = showColors ? "50px" : "0px"; + for (let i = 0; i < capPositions.length; i += 1) { + elements[i].style.paddingLeft = padding; + } +}