renderWheel()
This commit is contained in:
parent
a6d9f01ec8
commit
64922129d2
144
colors.html
144
colors.html
|
@ -206,47 +206,51 @@ const cy = radius;
|
||||||
const svg = document.querySelector('svg');
|
const svg = document.querySelector('svg');
|
||||||
const svgStyle = svg.querySelector('style').sheet;
|
const svgStyle = svg.querySelector('style').sheet;
|
||||||
|
|
||||||
let colorsBySite = {};
|
// TODO: Select-able color categories, re-render wheel.
|
||||||
let sites = [];
|
function renderWheel() {
|
||||||
Object.entries(colors).forEach(([name, color], _) => {
|
let colorsBySite = {};
|
||||||
let [r, g, b] = color;
|
let sites = [];
|
||||||
let [h, s, v] = rgb2hsv(r/255, g/255, b/255);
|
Object.entries(colors).forEach(([name, color], _) => {
|
||||||
|
let [r, g, b] = color;
|
||||||
|
let [h, s, v] = rgb2hsv(r/255, g/255, b/255);
|
||||||
|
|
||||||
// Based on https://stackoverflow.com/a/54522007/91238 .
|
// Based on https://stackoverflow.com/a/54522007/91238 .
|
||||||
let colorRadius = s * radius;
|
let colorRadius = s * radius;
|
||||||
let colorAngle = h/360 * 2 * Math.PI;
|
let colorAngle = h/360 * 2 * Math.PI;
|
||||||
|
|
||||||
let x = Math.cos(colorAngle) * colorRadius + 512;
|
let x = Math.cos(colorAngle) * colorRadius + 512;
|
||||||
let y = Math.sin(colorAngle) * colorRadius + 512;
|
let y = Math.sin(colorAngle) * colorRadius + 512;
|
||||||
sites.push({x: x, y: y});
|
sites.push({x: x, y: y});
|
||||||
colorsBySite[[x, y]] = name;
|
colorsBySite[[x, y]] = name;
|
||||||
});
|
|
||||||
|
|
||||||
let voronoi = new Voronoi().compute(sites, {xl: 0, xr: 1024, yt: 0, yb: 1024});
|
|
||||||
voronoi.cells.forEach(cell => {
|
|
||||||
if (cell.closeMe) {
|
|
||||||
console.warn('cell', cell, 'needs closing');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let colorName = colorsBySite[[cell.site.x, cell.site.y]];
|
|
||||||
let [r, g, b] = colors[colorName];
|
|
||||||
|
|
||||||
let c = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
|
||||||
c.setAttribute('data-color', colorName);
|
|
||||||
c.setAttribute('mask', 'url(#circle-mask)');
|
|
||||||
|
|
||||||
let points = '';
|
|
||||||
cell.halfedges.forEach(edge => {
|
|
||||||
let s = edge.getStartpoint();
|
|
||||||
let e = edge.getEndpoint();
|
|
||||||
points += `${s.x} ${s.y}, `;
|
|
||||||
});
|
});
|
||||||
c.setAttribute('points', points);
|
|
||||||
|
|
||||||
svg.appendChild(c);
|
let voronoi = new Voronoi().compute(sites, {xl: 0, xr: 1024, yt: 0, yb: 1024});
|
||||||
let rgb = `rgb(${r}, ${g}, ${b})`;
|
voronoi.cells.forEach(cell => {
|
||||||
svgStyle.insertRule(`[data-color=${colorName}] { fill: ${rgb}; stroke: ${rgb}; }`);
|
if (cell.closeMe) {
|
||||||
});
|
console.warn('cell', cell, 'needs closing');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let colorName = colorsBySite[[cell.site.x, cell.site.y]];
|
||||||
|
let [r, g, b] = colors[colorName];
|
||||||
|
|
||||||
|
let c = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
||||||
|
c.setAttribute('data-color', colorName);
|
||||||
|
c.setAttribute('mask', 'url(#circle-mask)');
|
||||||
|
|
||||||
|
let points = '';
|
||||||
|
cell.halfedges.forEach(edge => {
|
||||||
|
let s = edge.getStartpoint();
|
||||||
|
let e = edge.getEndpoint();
|
||||||
|
points += `${s.x} ${s.y}, `;
|
||||||
|
});
|
||||||
|
c.setAttribute('points', points);
|
||||||
|
|
||||||
|
svg.appendChild(c);
|
||||||
|
let rgb = `rgb(${r}, ${g}, ${b})`;
|
||||||
|
svgStyle.insertRule(`[data-color=${colorName}] { fill: ${rgb}; stroke: ${rgb}; }`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renderWheel();
|
||||||
|
|
||||||
function activateColor(el) {
|
function activateColor(el) {
|
||||||
renderPreview(el.getAttribute('data-color'));
|
renderPreview(el.getAttribute('data-color'));
|
||||||
|
@ -257,6 +261,30 @@ function activateColor(el) {
|
||||||
el.style.stroke = 'black';
|
el.style.stroke = 'black';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/5624139/91238
|
||||||
|
function componentToHex(c) {
|
||||||
|
var hex = c.toString(16);
|
||||||
|
return hex.length == 1 ? "0" + hex : hex;
|
||||||
|
}
|
||||||
|
function rgbToHex(r, g, b) {
|
||||||
|
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||||
|
}
|
||||||
|
|
||||||
|
let previewLocked = false;
|
||||||
|
function renderPreview(color) {
|
||||||
|
if (!color) {
|
||||||
|
document.getElementById('preview').innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let [r, g, b] = colors[color];
|
||||||
|
|
||||||
|
document.getElementById('preview').innerHTML = `
|
||||||
|
${color}
|
||||||
|
<span id='swatch' style='background-color: ${color};'> </span>
|
||||||
|
${rgbToHex(r, g, b).toUpperCase()}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
svg.addEventListener('mouseover', e => {
|
svg.addEventListener('mouseover', e => {
|
||||||
let el = e.target;
|
let el = e.target;
|
||||||
if (el.tagName != 'polygon') return;
|
if (el.tagName != 'polygon') return;
|
||||||
|
@ -275,44 +303,26 @@ svg.addEventListener('mouseout', e => {
|
||||||
el.removeAttribute('style');
|
el.removeAttribute('style');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
svg.addEventListener('click', e => {
|
document.body.addEventListener('click', e => {
|
||||||
let el = e.target;
|
let el = e.target;
|
||||||
if (el.tagName != 'polygon') return;
|
|
||||||
|
|
||||||
// Remove possible forced stroke from previously-locked color.
|
// Remove possible forced stroke from previously-locked color.
|
||||||
document.querySelectorAll('polygon[style]').forEach(el => {
|
document.querySelectorAll('polygon[style]').forEach(el => {
|
||||||
el.removeAttribute('style');
|
el.removeAttribute('style');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (el.tagName != 'polygon') {
|
||||||
|
previewLocked = false;
|
||||||
|
renderPreview(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
previewLocked = true;
|
previewLocked = true;
|
||||||
activateColor(el);
|
activateColor(el);
|
||||||
});
|
});
|
||||||
|
|
||||||
// https://stackoverflow.com/a/5624139/91238
|
|
||||||
function componentToHex(c) {
|
|
||||||
var hex = c.toString(16);
|
|
||||||
return hex.length == 1 ? "0" + hex : hex;
|
|
||||||
}
|
|
||||||
function rgbToHex(r, g, b) {
|
|
||||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
|
||||||
}
|
|
||||||
|
|
||||||
let previewLocked = false;
|
|
||||||
function renderPreview(color) {
|
|
||||||
if (!color) {
|
|
||||||
document.getElementById('preview').innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let [r, g, b] = colors[color];
|
|
||||||
|
|
||||||
document.getElementById('preview').innerHTML = `
|
|
||||||
<h1>
|
|
||||||
${color}
|
|
||||||
<span id='swatch' style='background-color: ${color};'> </span>
|
|
||||||
${rgbToHex(r, g, b).toUpperCase()}
|
|
||||||
</h1>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<div id="preview"></div>
|
<h1 id="preview"></h1>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
https://news.ycombinator.com/item?id=33647207
|
||||||
|
-->
|
Loading…
Reference in New Issue