31:Tee4,// // An interface for building palettes from just one color // function paletteBuilder(options = {}) { let { startColor = "#aa3333", size = 300, ncolors = 5, tension = 0.3, slSpacing = 0.2, hueSpacing = 20 } = options; // Controls let palDisplay = html`

`; let controls = paged( { hueSpacing: Inputs.range([1, 120], { label: "Hue separation", step: 1, value: hueSpacing }), slSpacing: Inputs.range([0.01, 0.4], { label: "Sat Lum spacing", step: 0.01, value: slSpacing }), tension: Inputs.range([0.1, 0.5], { label: "SL curve tension", value: tension, step: 0.05 }), nColors: Inputs.range([2, 9], { label: "Num colors", step: 1, value: ncolors }) }, undefined, palDisplay ); Object.assign(controls.style, { display: "inline-block", verticalAlign: "top", marginRight: "10px" }); // The sat lum plane let { h, s, l } = d3.hsl(startColor); let sz = size; let slchart = SLChart(h, [s, l], sz); Object.assign(slchart.style, { display: "inline-block", marginRight: "10px" }); let npoints = ncolors - 1; let sls; // Compute sl points and draw them on the sl chart const updateSlChart = () => { let ctx = slchart.getContext("2d"); let sz = slchart.width; let { slToXy, xyToSl } = colorplane(sz, sz); let q = Vec(...slToXy(s, l)); const options = { spacing: controls.value.slSpacing, tension: controls.value.tension, sizeX: sz, sizeY: sz }; let points = colorPlaneCurve(q, npoints, options); sls = points.map((p) => xyToSl(p.x, p.y)); // Draw points ctx.strokeStyle = "white"; ctx.lineWidth = 1; for (let { x, y } of points) { ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.stroke(); } }; updateSlChart(); // The hue bar let hueselector = hueSelector(h, 20, sz); Object.assign(hueselector.style, { display: "inline-block", marginRight: "10px" }); let hues; // Compute and draw the interpolated hues; const updateHue = () => { let ctx = hueselector.getContext("2d"); let hSpacing = controls.value.hueSpacing; // degrees hues = d3.range(1, (npoints >> 1) + 1).map((i) => (h + i * hSpacing) % 360); hues = hues.concat( d3 .range(1, npoints - (npoints >> 1) + 1) .map((i) => (h - i * hSpacing + 360) % 360) ); ctx.lineWidth = 1; for (let hue of hues) { let y = (hue / 360) * sz; ctx.beginPath(); ctx.arc(10, y, 4, 0, Math.PI * 2); ctx.stroke(); } }; updateHue(); // Container for sl and hue let div = html`

${slchart}${hueselector}${controls}

`; function setValue() { div.value = d3 .zip(sls, hues) .map(([[s, l], h]) => d3.hsl(h, s, l).formatHsl()); div.value.splice(npoints >> 1, 0, d3.hsl(h, s, l).formatHsl()); palDisplay.innerHTML = ""; palDisplay.append(displayPalette(div.value)); div.dispatchEvent(new CustomEvent("input")); } function handleSlInput(e) { [s, l] = slchart.value; updateHue(); updateSlChart(); setValue(); e.preventDefault(); } function handleHueInput(e) { h = hueselector.value; slchart.setHue(h); updateHue(); updateSlChart(); setValue(); e.preventDefault(); } function updateOnControl() { npoints = controls.value.nColors - 1; slchart.draw(); hueselector.draw(); updateSlChart(); updateHue(); setValue(); } controls.addEventListener("input", updateOnControl); slchart.addEventListener("input", handleSlInput); hueselector.addEventListener("input", handleHueInput); setValue(); return div; }32:T55c,function paletteAdjuster(palOrInput, options = {}) { let { size = 300, hInc = 20, sInc = 0.2, lInc = 0.2 } = options; // Controls let palDisplay = html`

`; let controls = paged( { hInc: Inputs.range([-90, 90], { label: "Hue increment", step: 1, value: hInc }), sInc: Inputs.range([-0.5, 0.5], { label: "Sat increment", step: 0.01, value: sInc }), vInc: Inputs.range([-0.5, 0.5], { label: "Lum increment", step: 0.01, value: lInc }) }, undefined, palDisplay ); Object.assign(controls.style, { display: "inline-block", verticalAlign: "top", marginRight: "10px" }); let div = html`

${controls}`; function setValue() { let pal = palOrInput instanceof Array ? palOrInput : palOrInput.value; div.value = adjustPalette( pal, controls.value.hInc, controls.value.sInc, controls.value.vInc ); palDisplay.innerHTML = ""; palDisplay.append(displayPalette(div.value)); div.dispatchEvent(new CustomEvent("input")); } if (!(palOrInput instanceof Array)) { palOrInput.addEventListener("input", setValue); invalidation.then(() => palOrInput.removeEventListener("input", setValue)); } controls.addEventListener("input", setValue); setValue(); return div; }33:T53c,// Samples the color plane (where the sat/lum values are defined) // with a smooth curve passing through the middle point. Returns nPoints points // in addition to middle function colorPlaneCurve(middle, nPoints, options = {}) { let { spacing = 0.1, tension = 0.2, sizeX = 1, sizeY = 1 } = options; let n1 = nPoints >> 1; let n2 = nPoints - n1; let bez1 = new Bezier( ...smoothControlPoints( [ middle, Vec(sizeX, sizeY), Vec(sizeX, sizeY * 2), Vec(-sizeX, sizeY * 2), Vec(-sizeX, 0), Vec(0, 0) ], tension ).slice(1) ); let bez2 = new Bezier( ...smoothControlPoints( [ middle, Vec(0, 0), Vec(-sizeX, 0), Vec(-sizeX, 2 * sizeY), Vec(sizeX, 2 * sizeY), Vec(sizeX, sizeY) ], tension ).slice(1) ); function arcLenBez(bez, n) { const m = n * 10; let baseCurve = new Curve(...d3.range(m + 1).map((t) => bez.point(t / m))); return baseCurve .resample(Math.round(1 / spacing) + 1) .slice(0, n) .map(({ x, y }) => Vec(Math.min(sizeX, Math.max(0, x)), Math.min(sizeY, Math.max(0, y))) ); } let result = arcLenBez(bez1, n1 + 1); return result .slice(1, n1 + 1) .reverse() .concat(arcLenBez(bez2, n2 + 1).slice(1, n2 + 1)); }34:T59a,// // A saturation/lightness plane // function SLChart(hue, value = [0.8, 0.8], sz = 500, interactive = true) { let { slToXy, xyToSl } = colorplane(sz, sz); let ctx = new DOM.context2d(sz, sz, 1); let canvas = ctx.canvas; let n = 100; let cellSz = sz / n; const draw = () => { for (let i = 0; i < n; i++) { let x = (i / n) * sz; for (let j = 0; j < n; j++) { let y = (j / n) * sz; let [s, l] = xyToSl(x, y); ctx.fillStyle = `hsl(${hue},${s * 100}%,${l * 100}%)`; ctx.fillRect(x, y, cellSz + 1, cellSz + 1); } } let [s, l] = value; let [x, y, r] = [...slToXy(s, l), 6]; ctx.strokeStyle = "white"; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.stroke(); }; const setValue = (sl) => { value = canvas.value = sl; draw(); canvas.dispatchEvent(new CustomEvent("input")); }; const setHue = (h) => { hue = h; draw(); }; if (interactive) { let isDown = false; canvas.onmousedown = (e) => { isDown = true; setValue(xyToSl(e.offsetX, e.offsetY)); }; canvas.onmousemove = (e) => { if (!isDown) return; setValue(xyToSl(e.offsetX, e.offsetY)); }; canvas.onmouseup = () => { isDown = false; }; } canvas.value = value; canvas.setValue = setValue; canvas.setHue = setHue; canvas.draw = draw; draw(); return canvas; }35:T4a6,// // A hue vertical bar that can be used to select a hue (between 0 and 360) // function hueSelector(value = 0, w = 20, sz = 500, interactive = true) { let ctx = new DOM.context2d(w, sz, 1); let canvas = ctx.canvas; let n = 200; let cellSz = sz / n; const draw = () => { for (let i = 0; i < n; i++) { ctx.fillStyle = `hsl(${(360 * i) / n},100%,50%)`; ctx.fillRect(0, i * cellSz, w, cellSz + 1); } let [x, y, r] = [w / 2, (value / 360) * sz, w / 3]; ctx.strokeStyle = "white"; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.stroke(); }; const setValue = (y) => { canvas.value = value = Math.max(0, Math.min(360, (y / sz) * 360)); draw(); canvas.dispatchEvent(new CustomEvent("input")); }; if (interactive) { let isDown = false; canvas.onmousedown = (e) => { isDown = true; setValue(e.offsetY); }; canvas.onmousemove = (e) => { if (!isDown) return; setValue(e.offsetY); }; canvas.onmouseup = () => { isDown = false; }; } canvas.value = value; canvas.setValue = setValue; canvas.draw = draw; draw(); return canvas; }36:[] 2f:{"title":"Color palettes from one color","cells":[{"id":0,"value":"# Color palettes from one color\n\nUnfortunately, I lack the skill or, more accurately, the good taste required to build a nice-looking color palette. Ordinarily, I rely on palettes built by other people. Also, I am color blind 😜\n\nAnyways, I came across [this video](https://www.youtube.com/watch?v=u5AnzLg1HxY), which teaches a method for building nice palettes starting from a single picked color. This is my attempt to automatize that method. A [writeup of that video](https://medium.com/@greggunn/how-to-make-your-own-color-palettes-712959fbf021) is also available. \n\n***Interface:* ** \n>Drag the large circle in the Saturation-Luminosity plane and in the Hue scale to change the first color. Adjust the sliders on the right to your liking to increase/reduce the palette variation.\nTwo additional palette adjusters are also shown below in order to obtain palette variations.\n","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"viewof pal = paletteBuilder({\n startColor: \"steelblue\",\n size: 250,\n ncolors: 7,\n tension: 0.3,\n slSpacing: 0.2,\n hueSpacing: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"
\n### Palette adjuster","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"viewof adjustedPlusLum = paletteAdjuster(viewof pal, {\n hInc: 0,\n sInc: -0.15,\n lInc: 0.15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"viewof adjustedPlusSat = paletteAdjuster(viewof pal, {\n hInc: 0,\n sInc: +0.15,\n lInc: -0.15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"

\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"//\n// Conversion from HSL to HSV (minus H, which is the same)\n// Assumes normalized coordinates\n//\nfunction slToSv(s, l) {\n let V = l + s * Math.min(l, 1 - l);\n let S = V == 0 ? 0 : 2 * (1 - l / V);\n return [S, V];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"//\n// Returns the hsv components of a color\n//\nfunction hsv(color) {\n let { h, s, l } = d3.hsl(color);\n let [S, v] = slToSv(s, l);\n return { h, s: S, v };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"//\n// Conversion from HSV to HSL (minus H, which is the same)\n// Assumes normalized coordinates\n//\nfunction svToSl(S, V) {\n let l = V * (1 - S / 2);\n let s = l == 0 || l == 1 ? 0 : (V - l) / Math.min(l, 1 - l);\n return [s, l];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"//\n// Provides functions to map to/from the SL plane to x,y coordinates\n//\nfunction colorplane(width, height) {\n return {\n slToXy: (s, l) => {\n let [S, V] = slToSv(s, l);\n return [S * width, (1 - V) * height];\n },\n xyToSl: (x, y) => svToSl(x / width, 1 - y / height)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"//\n// A very crude palette display\n//\nfunction displayPalette(pal, options = {}) {\n let {\n background = \"white\",\n cellWidth = \"30px\",\n cellHeight = \"60px\",\n padding = 0,\n cellPadding = 0\n } = options;\n let div = html`

`;\n Object.assign(div.style, { background, padding, display: \"inline-block\" });\n for (let color of pal) {\n let cell = html`

`;\n Object.assign(cell.style, {\n display: \"inline-block\",\n padding: cellPadding,\n width: cellWidth,\n minWidth: cellWidth,\n height: cellHeight,\n minHeight: cellHeight,\n background: color\n });\n div.append(cell);\n }\n const button = html``;\n Object.assign(button.style, {\n display: \"inline-block\",\n minHeight: cellHeight,\n padding: \"10px\",\n marginLeft: \"10px\",\n verticalAlign: \"top\"\n });\n button.onclick = () =>\n navigator.clipboard.writeText(pal.map((col) => d3.color(col).formatHex()));\n\n div.append(button);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"//\n// Returns an adjusted palette where hue, saturation and value\n// are incremented by (small) amounts. Note that hInc is given in degrees\n// while sInc and lInc are given in normalized format, i.e., numbers between 0 and 1\n//\nfunction adjustPalette(pal, hInc = +10, sInc = 0.1, lInc = 0.1) {\n let result = [];\n for (let color of pal) {\n let { h, s, l } = d3.hsl(color);\n h = (h + hInc + 360) % 360;\n s = Math.min(1, Math.max(0, s + sInc));\n l = Math.min(1, Math.max(0, l + lInc));\n result.push(d3.hsl(h, s, l).formatHsl());\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"import { Vec, Bezier, Curve } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"import { smoothControlPoints } from \"@esperanc/smooth-polygon\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"import { combo, paged, tabbed } from \"@esperanc/aggregated-inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}