2b:null 2c:["$","title",null,{"children":"Extract Palette from Image using Weighted Square Means Clustering | Máté Homolya | Observable"}] 31:T5ad,colorScale = (hctColorRef, prop, label = "") => { let intColor = (t) => 0; let domain = 100; let tickValues = []; if (prop === "tone") { tickValues = [0, hctColorRef.tone, 100]; intColor = (t) => colorUtil.Hct.from(hctColorRef.hue, hctColorRef.chroma, t * 100).toInt(); } else if (prop === "hue") { domain = 360; tickValues = [0, hctColorRef.hue, 360]; intColor = (t) => colorUtil.Hct.from(t * 360, hctColorRef.chroma, hctColorRef.tone).toInt(); } else if (prop === "chroma") { // TODO compute max chroma from inputs // search max let idx = 0; // search max let prevColor = colorUtil.Hct.from( hctColorRef.hue, 0, hctColorRef.tone ).toInt(); for (let i = Math.round(hctColorRef.chroma); i < 150; i++) { const color = colorUtil.Hct.from( hctColorRef.hue, i, hctColorRef.tone ).toInt(); if (color === prevColor) { idx = i; break; } prevColor = color; } domain = idx; tickValues = [0, hctColorRef.chroma, domain]; intColor = (t) => colorUtil.Hct.from(hctColorRef.hue, t * domain, hctColorRef.tone).toInt(); } return html`

${ramp((t) => intToHex(intColor(t)))}

${axis(d3.scaleLinear().domain([0, domain])) .tickValues(tickValues) .render()}

`; }32:T876,SwatchInput = async (colors, { value, label, multiple = false } = {}) => { let indexes = []; const node = html`

${colors.map((color, idx) => { const c = color.toString(); let onclick = () => set(node, idx); let style = `position: relative; appearance: none; border: none; outline: none; display: inline-block; width: 40px; height: 40px; background-color: ${c}; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; margin-right: 2px;`; return html``; })}

`; // Update the display whenever the value changes Object.defineProperty(node, "value", { get() { return value; }, set(v) { const index = +v; const c = colors[index]; if (multiple) { if (value === undefined) { value = []; } if (v !== undefined) { if (indexes.includes(v)) { indexes = indexes.filter((vv) => vv !== v); } else { indexes.push(v); } } value = indexes.map((idx) => colors[idx]); } else { value = c; indexes = [v]; } restyle(); } }); // Set the initial value if (multiple) { if (value === undefined) { value = []; indexes = []; } else { indexes = value.map((v) => colors.findIndex((c) => c.equals(v))); } set(node); } else { let initIndex = value ? colors.findIndex((c) => c.equals(value)) : 0; set(node, initIndex); } function restyle(newIndex) { const btns = node.querySelectorAll("button"); btns.forEach((btn, idx) => { let checked = indexes.includes(idx); let ch = btn.getElementsByTagName("div")[0]; if (checked) { btn.style.boxShadow = "0 0 0 2px rgba(0,0,0,1)"; btn.style.zIndex = "10"; ch.style.display = "block"; } else { btn.style.boxShadow = ""; btn.style.zIndex = ""; ch.style.display = "none"; } }); } restyle(); return node; }33:T4fc,quantizeImage = async (urlOrBlob) => { // create canvas const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); if (urlOrBlob instanceof Blob) { img.src = URL.createObjectURL(urlOrBlob); } else if (typeof urlOrBlob === "string") { img.src = urlOrBlob; } await img.decode(); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const pixels = []; for (let i = 0; i < data.length; i += 4) { const opaqueBlack = 0xff000000; const color = opaqueBlack | (data[i] << 16) | (data[i + 1] << 8) | data[i + 2]; pixels.push(color); } const result = colorUtil.QuantizerCelebi.quantize(pixels, colorCount); const colorScores = colorUtil.Score.score(result); const colorPop = Array.from(result.entries(), ([color, population]) => ({ color, population })).sort((a, b) => b.population - a.population); return colorPop.map(({ color, population }, idx) => { const colorI = ColorRGB.fromInt(color); colorI.setMeta({ scoreIndex: colorScores.findIndex((c) => c === color), population }); return colorI; }); }34:[{"id":"1b67eb459083fe2a1564ee67e1ccd295f0229ab86dae482d57d610a12561f721b52d16bf1ffdfbd744f8941bb1eca0ad3f867ee5ad2cdeaa30508c0d1e305479","href":"https://static.observableusercontent.com/files/1b67eb459083fe2a1564ee67e1ccd295f0229ab86dae482d57d610a12561f721b52d16bf1ffdfbd744f8941bb1eca0ad3f867ee5ad2cdeaa30508c0d1e305479","name":"paul-hanaoka-PGRlGx_6Ehk-unsplash.jpeg","type":"image/jpeg","lastModified":1645484923412.308,"size":1759229},{"id":"3e107fcae17dfe5fb1becf77ab152b8aeca361f06ac77c290dae261164c9e33b9ffd79a6fae719a620c2f559e30cb52dcd29a22ac561e0bcdb3683d5fba635df","href":"https://static.observableusercontent.com/files/3e107fcae17dfe5fb1becf77ab152b8aeca361f06ac77c290dae261164c9e33b9ffd79a6fae719a620c2f559e30cb52dcd29a22ac561e0bcdb3683d5fba635df","name":"ilnur-kalimullin-ZtdNFSpugQE-unsplash.jpeg","type":"image/jpeg","lastModified":1645487567547.188,"size":3321483},{"id":"f107941c92fd3eb26993d77f31a931491abd450557e95d7e96c1c0132544bf5b61f81212d68d207852382305daa2f87e127edb30e3185de5afdb24c0d3635752","href":"https://static.observableusercontent.com/files/f107941c92fd3eb26993d77f31a931491abd450557e95d7e96c1c0132544bf5b61f81212d68d207852382305daa2f87e127edb30e3185de5afdb24c0d3635752","name":"susan-wilkinson-h9LWpMpsN8A-unsplash.jpeg","type":"image/jpeg","lastModified":1645488256927.303,"size":2024998},{"id":"cb68251bcebb69130a213af05b4919edba7be184fc3946acba103a8176f6f099b1c9acb37c9878d272cb9d8717d52d13d5d558384392a96e94ce47eca9255313","href":"https://static.observableusercontent.com/files/cb68251bcebb69130a213af05b4919edba7be184fc3946acba103a8176f6f099b1c9acb37c9878d272cb9d8717d52d13d5d558384392a96e94ce47eca9255313","name":"michael-held-l_msIU__Cqk-unsplash.jpeg","type":"image/jpeg","lastModified":1645488361108.751,"size":5164737},{"id":"9f0363721668d502d9afa8dbd151a08e531d9318792a1e237494564c45144db612dc4ad54f3ae4dd773acdfcc24cc1388aadc4a46b92697c21c9b9bb934487de","href":"https://static.observableusercontent.com/files/9f0363721668d502d9afa8dbd151a08e531d9318792a1e237494564c45144db612dc4ad54f3ae4dd773acdfcc24cc1388aadc4a46b92697c21c9b9bb934487de","name":"ryan-spencer-WJDR8_QxVR8-unsplash.jpeg","type":"image/jpeg","lastModified":1645488547093.421,"size":3411453},{"id":"6b0690758e9353cb9954a6c4bb782c74c3153efadfb46463f734c63baab1245863661605c7029aeddd59e6ff61c8ee2b37fd5cc3ea6c7df57bb4431ec15b3d23","href":"https://static.observableusercontent.com/files/6b0690758e9353cb9954a6c4bb782c74c3153efadfb46463f734c63baab1245863661605c7029aeddd59e6ff61c8ee2b37fd5cc3ea6c7df57bb4431ec15b3d23","name":"image.png","type":"image/png","lastModified":1647626294327.079,"size":233222},{"id":"ca1db35dc55d5fb3c9b6aea53dadeb3aa7cede53841cd557b141d5b6303440a9a539e6e4972aab2153b994a38a928d87f65bf4de70d7cf4d6b34676189417054","href":"https://static.observableusercontent.com/files/ca1db35dc55d5fb3c9b6aea53dadeb3aa7cede53841cd557b141d5b6303440a9a539e6e4972aab2153b994a38a928d87f65bf4de70d7cf4d6b34676189417054","name":"IMG_0809.jpg","type":"image/jpeg","lastModified":1777344659904.786,"size":749596},{"id":"7399d313e0365b0469baf9960e21760a6953f5035052c0c56c6e79e6fc9bb3915397610a451e188362c3be4871e5abf18f412a8cc42dc01b92d94959f9046871","href":"https://static.observableusercontent.com/files/7399d313e0365b0469baf9960e21760a6953f5035052c0c56c6e79e6fc9bb3915397610a451e188362c3be4871e5abf18f412a8cc42dc01b92d94959f9046871","name":"IMG_0810.jpg","type":"image/jpeg","lastModified":1777344659884.107,"size":776511}] 2f:{"id":"cb4907c12857625f","slug":"extract-palette","title":"Extract Palette from Image using Weighted Square Means Clustering","thumbnail":"10e008587d5ba8756075d0180ce39ef14b883967ef27034366c16623b3e23d7c","access_level":"public","create_time":"$D2022-02-21T22:42:59.976Z","update_time":"$D2026-04-28T02:51:24.670Z","view_time":null,"first_public_time":"$D2022-02-22T02:21:22.490Z","fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":668,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[{"id":"9758d040196befc0","reply_to_id":null,"content":"The `return await` is not necessary, as an async function will always return a Promise. Note that you can `await img.decode()` to get rid of the onload handler.","create_time":"$D2022-02-23T13:29:19.728Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"5f2c2bcf2fd18112","reply_to_id":null,"content":"No need for an import, htl is available via Observable's Standard Library. Simply add a cell with:\n```\nhtml = htl.html\n```","create_time":"$D2022-02-23T13:30:25.838Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f7ec5f9374c86645","reply_to_id":null,"content":"When destructuring arrays you can skip the positions that you're not interested in:\n```\n.sort(([, a], [, b]) => b - a)\n```","create_time":"$D2022-02-23T13:32:55.575Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"d95784697d1c3cb0","reply_to_id":"f7ec5f9374c86645","content":"To skip an intermediate array this could also be written as:\n```\ncolorScores = Array.from(result.entries(), ([c, s]) => ({ score: s, color: c }))\n .sort((a, b) => b.score - a.score)\n```","create_time":"$D2022-02-23T13:35:49.887Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"0f8f080fde4ea8f9","reply_to_id":"f7ec5f9374c86645","content":"Thank you for you insightful comments, I made some improvement to the cells in this notebook. However, this variable should be named colorPopulation as the value reflects the cluster size (aka color population) in the image. I've made a separate cell using the scoring library function.","create_time":"$D2022-02-23T17:19:40.224Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Extract Palette from Image using Weighted Square Means Clustering","cells":[{"id":0,"value":"# Extract Palette from Image using Weighted Square Means Clustering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"This method allows for palette generation using an input image. The \"Celebi Quantizer\" algorithm is an image quantizer that improves on the quality of a standard K-Means algorithm by setting the K-Means initial state to the output of a Wu quantizer, instead of random centroids. Improves on speed by several optimizations, as implemented in `Wsmeans`, or Weighted Square Means, K-Means with those optimizations.\n\nThis algorithm was designed by M. Emre Celebi, and was found in their 2011 paper, Improving the Performance of K-Means for Color Quantization.\nhttps://arxiv.org/abs/1101.0395\n\nThe implementation of the algorithm was released by Google researchers at https://github.com/material-foundation/material-color-utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":150,"value":"viewof select = Inputs.select(\n [\n FileAttachment(\"paul-hanaoka-PGRlGx_6Ehk-unsplash.jpeg\"),\n FileAttachment(\"ilnur-kalimullin-ZtdNFSpugQE-unsplash.jpeg\"),\n FileAttachment(\"susan-wilkinson-h9LWpMpsN8A-unsplash.jpeg\"),\n FileAttachment(\"michael-held-l_msIU__Cqk-unsplash.jpeg\"),\n FileAttachment(\"IMG_0809.jpg\"),\n FileAttachment(\"IMG_0810.jpg\"),\n ],\n { format: (x) => x.name, label: \"Select image\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"viewof colorCount = Inputs.select([4, 8, 16, 32, 64, 128], {\n label: \"Select color count\",\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"Click on a color swatch to select palette color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":272,"value":"hctColor = colorUtil.Hct.fromInt(selectedColor.toInt())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"### Hue, Chroma and Tone (HCT)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":382,"value":"colorScale(hctColor, \"hue\", \"Hue (H)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"colorScale(hctColor, \"chroma\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"colorScale(hctColor, \"tone\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"viewof selectedColor = SwatchInput(colorPopulation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"select.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"## Selected colors based on Score\nGiven a large set of colors, remove colors that are unsuitable for a UI\ntheme, and rank the rest based on suitability.\nEnables use of a high cluster count for image quantization, thus ensuring\ncolors aren't muddied, while curating the high cluster count to a much\nsmaller number of appropriate choices.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":517,"value":"## Cheat Sheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":516,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"colorPopulation = quantizeImage(await select.blob())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"function intToHex(colorInt) {\n return \"#\" + (\"000000\" + colorInt.toString(16)).slice(-6);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"selectedColors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"viewof selectedColors = SwatchInput(colorPopulation, {\n multiple: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"colorUtil = import(\"https://cdn.skypack.dev/@material/material-color-utilities\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"function axis(scale, val) {\n return Object.assign(d3.axisBottom(scale.range([20, width - 20])), {\n render() {\n return d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, -10, width, 33])\n .call(this)\n .node();\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"import { ColorRGB, isWhiteText } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"import { icon } from \"@mateh/icon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"