Published
Edited
Feb 11, 2019
1 fork
5 stars
Insert cell
Insert cell
Insert cell
createSwatches = {
let items = html`<div>`;
let iterations = 12;
let chroma = 60;
let peakBrightnessAngle = 90;
for(var i = 0; i<iterations; i++) {
let hueAngle = 360-i*(360/iterations);
let brightness = quadraticBrightness(hueAngle, peakBrightnessAngle);
let elem = html`<span>`;
elem.append(swatch(cam02.jch(brightness, chroma, hueAngle).rgb()));
//elem.append(html`<span>${Math.round(brightness)}, ${Math.round(hueAngle)}</span>`);
items.append(elem);
}
return items;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
quadraticBrightness = (angle, peakAngle) => (25+Math.pow((moduloClamp(angle, 360, peakAngle)-180-peakAngle)/24,2));
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more