Show average colors in grid
This commit is contained in:
parent
b985cf3a33
commit
bb3efbf6c5
@ -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);
|
||||
}
|
||||
|
@ -19,6 +19,9 @@
|
||||
<meta name="description" content="A grid view of all bottle caps in my collection. Try to create an image with them."/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="top-bar">
|
||||
<div id="show-color-button" onclick="toggleColors()">Toggle colors</div>
|
||||
</div>
|
||||
<div id="image-canvas">
|
||||
<div id="selected-cap-circle"></div>
|
||||
</div>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user