2b:null 2c:["$","title",null,{"children":"Hello, Mixbox - a paint mixing algorithm | Max Bo | Observable"}] 31:T695,render3dPlot = ({ points }) => { const data = [ ...facetDomain.map((algorithmFacet) => { // deliberately shadow const facetPoints = points.filter((d) => d.algorithm === algorithmFacet); return { x: facetPoints.map((point) => point.a), y: facetPoints.map((point) => point.b), z: facetPoints.map((point) => point.l), hovertext: facetPoints.map((point) => tooltip(point)), name: algorithmFacet, mode: "markers", type: "scatter3d", marker: { size: settings.pathRadius, color: facetPoints.map((point) => point.hex), opacity: 1 } }; }), { x: rgbGamutInOklab.map((point) => point.a), y: rgbGamutInOklab.map((point) => point.b), z: rgbGamutInOklab.map((point) => point.l), mode: "markers", name: "RGB gamut", type: "scatter3d", marker: { size: 5, color: rgbGamutInOklab.map((point) => point.hex), opacity: settings.oklabTransparency } } ]; const layout = { margin: { l: 0, r: 0, b: 0, t: 0 }, height: 600, width: 800, scene: { camera: { eye: { x: 0, y: -0.1, z: 2 } }, aspectmode: "manual", aspectratio: { x: 1, y: 1, z: 1 }, xaxis: { title: { text: "a" } }, yaxis: { title: { text: "b" } }, zaxis: { title: { text: "L" } } } }; const div = DOM.element("div"); return Plotly.newPlot(div, data, layout); }32:[{"id":"9b6066cec1b9ab65196716f04eb35ffc193352632b9126cf6cbbf9ba18e2b8257a105029fe6ad735b5de708c9d2d1489b3f964e17a6d237ac4649daa8b273407","href":"https://static.observableusercontent.com/files/9b6066cec1b9ab65196716f04eb35ffc193352632b9126cf6cbbf9ba18e2b8257a105029fe6ad735b5de708c9d2d1489b3f964e17a6d237ac4649daa8b273407","name":"Screenshot 2023-10-26 at 5.14.11 pm.png","type":"image/png","lastModified":1698301017843.055,"size":1214376},{"id":"bb27e69df1c2ee645c5d3aabb15b79ec2e092ae4ce0cd20a369418750ee1145dc5984ba43fce1cc68d3775c8841b2a701a971f363148271ae22f865b59bbb588","href":"https://static.observableusercontent.com/files/bb27e69df1c2ee645c5d3aabb15b79ec2e092ae4ce0cd20a369418750ee1145dc5984ba43fce1cc68d3775c8841b2a701a971f363148271ae22f865b59bbb588","name":"image.png","type":"image/png","lastModified":1698300771008.357,"size":1129731},{"id":"387abd5edd4e7076ebae2081cd154648920a7d34b5db301677b14b4b43caecc46cade5352e0852d337b11f1af229aad1fe4b6f82163193dc3ce8bff028ffde2c","href":"https://static.observableusercontent.com/files/387abd5edd4e7076ebae2081cd154648920a7d34b5db301677b14b4b43caecc46cade5352e0852d337b11f1af229aad1fe4b6f82163193dc3ce8bff028ffde2c","name":"image@1.png","type":"image/png","lastModified":1698300861708.782,"size":1041256},{"id":"6f6e364b341abdd743c386e9f5847d2353d2b881c4e9dad4ca0cd9e5ea4f0835b883fb38ec41c975fdff754180f012cadee80d44b9990789ffef68b96ccc43c0","href":"https://static.observableusercontent.com/files/6f6e364b341abdd743c386e9f5847d2353d2b881c4e9dad4ca0cd9e5ea4f0835b883fb38ec41c975fdff754180f012cadee80d44b9990789ffef68b96ccc43c0","name":"Screenshot 2023-10-26 at 5.12.30 pm.png","type":"image/png","lastModified":1698301014566.023,"size":1353761}] 2f:{"id":"6e5ae9fc654a69b7","slug":"hello-mixbox","title":"Hello, Mixbox - a paint mixing algorithm","thumbnail":"c8265a870271c6f31b925a12fd2888c1295a54ceb37d227a710a60841e884e8b","access_level":"public","create_time":"$D2022-03-08T07:35:44.574Z","update_time":"$D2025-01-04T06:37:49.005Z","view_time":null,"first_public_time":"$D2022-11-02T05:49:38.650Z","fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"cc48459e4293f942","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":"starter_2024"},"version":2146,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null}],"members":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":11,"collection":{"id":"5234821c546dc9d4","slug":"color","title":"Color","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"type":"notebook","body":{"title":"Hello, Mixbox - a paint mixing algorithm","cells":[{"id":367,"value":"# Hello, [Mixbox](https://scrtwpns.com/mixbox/) - a paint mixing algorithm\n\n> Mixbox is a new blending method for natural color mixing. It produces saturated gradients with hue shifts and natural secondary colors during blending. Yellow and blue make green. [...] Mixbox treats colors as real-life pigments using the [Kubelka & Munk theory](https://en.wikipedia.org/wiki/Kubelka%E2%80%93Munk_theory) to predict realistic color behavior. That way, colors act like actual paints and bring more vibrance and intuition into digital painting.\n\n> Mixbox is provided under the CC BY-NC 4.0 license for **non-commercial use only**.\n> If you want to obtain commercial license, please contact: mixbox@scrtwpns.com\n\n[Source](https://github.com/scrtwpns/mixbox)\n\n*See also https://observablehq.com/@mjbo/hello-spectral-js*, and [_Generating Spectral Paint Curves With ML_](https://larswander.com/writing/spectral-paint-curves/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"## Installation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"mixbox = require(\"mixbox@2.0.0/mixbox.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1858,"value":"spectraljs = require(\"spectral.js@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"## [Usage](https://github.com/scrtwpns/mixbox/tree/master/javascript#usage)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":411,"value":"mixed = {\n const rgb1 = \"rgb(0, 33, 133)\"; // blue\n const rgb2 = \"rgb(252, 211, 0)\"; // yellow\n const t = 0.5; // mixing ratio\n\n return mixbox.lerp(rgb1, rgb2, t);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"## [Mixing multiple colors](https://github.com/scrtwpns/mixbox/tree/master/javascript#usage)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":422,"value":"rgbMix = {\n const rgb1 = \"rgb(0, 33, 133)\"; // blue\n const rgb2 = \"rgb(252, 211, 0)\"; // yellow\n const rgb3 = \"rgb(255, 39, 2)\"; // red\n const z1 = mixbox.rgbToLatent(rgb1);\n const z2 = mixbox.rgbToLatent(rgb2);\n const z3 = mixbox.rgbToLatent(rgb3);\n\n const zMix = new Array(mixbox.LATENT_SIZE);\n\n for (var i = 0; i < zMix.length; i++) {\n // mix:\n zMix[i] =\n 0.3 * z1[i] + // 30% of rgb1\n 0.6 * z2[i] + // 60% of rgb2\n 0.1 * z3[i]; // 10% of rgb3\n }\n\n return mixbox.latentToRgb(zMix);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"## [Pigments](https://github.com/scrtwpns/mixbox/tree/master/javascript)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"viewof palette = Inputs.form(\n palettePigments.map(([name, color]) =>\n Inputs.form(\n [\n Inputs.text({ value: name }),\n Inputs.color({ value: culori.formatHex(color) }),\n Inputs.button(\"🗑️\", {\n reduce: () => {\n mutable removals = [...removals, name];\n }\n })\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

`\n }\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1164,"value":"viewof extraPigments = Inputs.button([[\"+\", (value) => value + 1]], {\n value: 0,\n label: \"Extra pigments?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"## Demos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1269,"value":"There are [many many](https://www.google.com/search?q=color+mixing+wheel) color mixing wheels available on the internet. \n\nLet's try and make a more \"accurate\" color mixing \"wheel\". \n\nRather than plotting the mixes on a perfectly round circle, we'll plot the generated mixes in a [perceptually uniform](https://observablehq.com/@mjbo/perceptually-uniform-color-models) color space, [Oklab](https://bottosson.github.io/posts/oklab/). The [sRGB gamut](https://bottosson.github.io/posts/gamutclipping/) in this color space is an irregular shape (!), in an attempt to model the natural non-linearities in the human vision system.\n\nWe'll gradually build up this color mixing \"wheel\", firstly by plotting mixing paths from one pigment to another pigment, and lastly by plotting all mixing paths between all pigment pairing combinations. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":557,"value":"### 1:1 mixing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":323,"value":"viewof firstMixingPigmentName = Inputs.select(Object.keys(pigments), {\n label: \"Select first named pigment to mix\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"viewof secondMixingPigmentName = Inputs.select(Object.keys(pigments), {\n label: \"Select second named pigment to mix\",\n value: DEFAULT_SECOND_MIXING_PIGMENT_NAME\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"viewof firstPigment = Inputs.color({\n label: \"First pigment to mix\",\n value: pigments[firstMixingPigmentName]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"viewof secondPigment = Inputs.color({\n label: \"Second pigment to mix\",\n value: pigments[secondMixingPigmentName]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1912,"value":"viewof compareSpectralJs = Inputs.toggle({\n label: \"Compare Spectral.js\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"viewof settings = Inputs.form(\n {\n mixes: Inputs.range([1, 201], { value: 101, label: \"Mixes\", step: 20 }),\n pathRadius: Inputs.range([0, 10], {\n value: 8,\n label: \"Path thickness\",\n step: 1\n }),\n oklabTransparency: Inputs.range([0, 1], {\n value: 0.2,\n label: \"Color space transparency\",\n step: 0.2\n })\n },\n {\n template: (inputs) => htl.html`

\n ${Object.values(inputs)}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"swatch = addTooltips(\n Plot.plot({\n caption: \"Hover for details\",\n padding: 0,\n y: { domain: facetDomain },\n height: 100,\n marginLeft: 86,\n x: {\n ticks: [0, 0.5, 1],\n padding: 0,\n label: \"←\tMixing ratio →\"\n },\n marks: [\n Plot.cell(mixingPath, {\n x: \"coefficient\",\n y: \"algorithm\",\n fill: \"hex\",\n // fy: \"algorithm\",\n title: tooltip\n })\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1553,"value":"viewof threeD = Inputs.toggle({ label: \"3D plot\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"oneToOnePath = threeD\n ? await render3dPlot({\n points: mixingPath\n })\n : renderPlot({ points: mixingPath })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":559,"value":"### 1:n mixing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":525,"value":"viewof exploringPigmentName = Inputs.select(Object.keys(pigments), {\n label: \"Select named pigment to explore from\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"viewof exploringPigment = Inputs.color({\n label: \"Pigment to explore from\",\n value: pigments[exploringPigmentName]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1980,"value":"swatchN = addTooltips(\n Plot.plot({\n caption: \"Hover for details\",\n padding: 0.01,\n y: { domain: facetDomain },\n marginLeft: 86,\n marginRight: 100,\n height: facetDomain.length * 300,\n x: {\n ticks: [0, 0.5, 1],\n padding: 0,\n label: \"←\tMixing ratio →\"\n },\n fy: {\n // do not sort by name\n domain: Object.keys(pigments),\n label: \"to pigment\"\n },\n marks: [\n Plot.cell(explorePaths, {\n x: \"coefficient\",\n y: \"algorithm\",\n fill: \"hex\",\n fy: \"toLabel\",\n title: tooltip\n })\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"oneToManyPaths = threeD\n ? await render3dPlot({\n points: explorePaths\n })\n : renderPlot({ points: explorePaths })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":562,"value":"### n:n mixing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":510,"value":"manyToManyPaths = threeD\n ? await render3dPlot({\n points: allPaths\n })\n : renderPlot({ points: allPaths })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2113,"value":"## Color solid when we can mix in white and black with the palette ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2124,"value":"viewof allPathsWithWhiteAndBlack = Inputs.button(\n \"Load color solid (will lock up or crash your browser)\",\n {\n reduce: () => {\n const onlyMixbox = allPaths.filter((d) => d.algorithm === \"Mixbox\");\n\n const length = Object.values(onlyMixbox).length;\n const acc = [];\n\n for (let i = 0; i < length; ++i) {\n const mixed = onlyMixbox[i];\n const combinedLabel =\n Object.values(onlyMixbox)[i].fromLabel +\n \"-\" +\n Object.values(allPaths)[i].toLabel;\n\n const mixes = mix(mixed.hex, \"#ffffff\", combinedLabel, \"White\");\n acc.push(...mixes);\n }\n\n for (let i = 0; i < length; ++i) {\n const mixed = onlyMixbox[i];\n const combinedLabel =\n Object.values(onlyMixbox)[i].fromLabel +\n \"-\" +\n Object.values(onlyMixbox)[i].toLabel;\n\n const mixes = mix(mixed.hex, \"#000000\", combinedLabel, \"Black\");\n acc.push(...mixes);\n }\n\n return acc;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2102,"value":"await render3dPlot({\n points: _.sampleSize(allPathsWithWhiteAndBlack, 100000)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1368,"value":"---\n\n Want some more color theory notebooks? I've built others!\n\n* [Perceptually uniform color models and their implications](https://observablehq.com/@mjbo/perceptually-uniform-color-models?collection=@mjbo/color)\n* [Hello, Spectral.js - a permissibly licensed paint mixing algorithm](https://observablehq.com/@mjbo/hello-spectral-js?collection=@mjbo/color)\n* [Named color \"wheel\"](https://observablehq.com/@mjbo/oklab-named-color-wheel?collection=@mjbo/color)\n* [CSS gradient generator](https://observablehq.com/@mjbo/css-gradient-generator?collection=@mjbo/color)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2078,"value":"

Explanation

\n\n\n\n $\"Screenshot$ \n\n $\"Screenshot$ \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"## Implementation details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1137,"value":"### Pigment selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":283,"value":"DEFAULT_PIGMENTS = ({\n \"Cadmium Yellow\": \"rgb(254, 236, 0)\",\n \"Hansa Yellow\": \"rgb(252, 211, 0)\",\n \"Cadmium Orange\": \"rgb(255, 105, 0)\",\n \"Cadmium Red\": \"rgb(255, 39, 2)\",\n \"Quinacridone Magenta\": \"rgb(128, 2, 46)\",\n \"Cobalt Violet\": \"rgb(78, 0, 66)\",\n \"Ultramarine Blue\": \"rgb(25, 0, 89)\",\n \"Cobalt Blue\": \"rgb(0, 33, 133)\",\n \"Phthalo Blue\": \"rgb(13, 27, 68)\",\n \"Phthalo Green\": \"rgb(0, 60, 50)\",\n \"Permanent Green\": \"rgb(7, 109, 22)\",\n \"Sap Green\": \"rgb(107, 148, 4)\",\n \"Burnt Sienna\": \"rgb(123, 72, 0)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2062,"value":"DEFAULT_SECOND_MIXING_PIGMENT_NAME = \"Cobalt Blue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2040,"value":"palettePigments = {\n const extraPigmentEntries = d3\n .range(0, extraPigments)\n .map((i) => [`Custom pigment #${i}`, \"rgb(0, 0, 0)\"]);\n\n return [...Object.entries(DEFAULT_PIGMENTS), ...extraPigmentEntries].filter(\n ([name, color]) => !removals.includes(name)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"import { settle } from \"@mjbo/settling-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"modifedPalletePigments = settle(viewof palette)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1139,"value":"pigments = Object.fromEntries(modifedPalletePigments)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"mutable removals = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":759,"value":"### [Oklab](https://bottosson.github.io/posts/oklab/) gamut","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"culori = require(\"culori@3.3.0/bundled/culori.umd.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1494,"value":"rgbGamutInOklab = {\n const ranges = culori.modeOklab.ranges;\n const lRange = d3.range(...ranges.l, 0.02);\n const aRange = d3.range(...ranges.a, 0.01);\n const bRange = d3.range(...ranges.b, 0.01);\n\n const acc = [];\n\n for (const a of aRange) {\n for (const b of bRange) {\n for (const l of lRange) {\n const oklab = { mode: \"oklab\", l, a, b };\n\n if (!culori.displayable(oklab)) {\n continue;\n }\n\n if (Math.random() < 0.9) {\n continue;\n }\n\n const hex = culori.formatHex(oklab);\n\n acc.push({ hex, ...oklab });\n }\n }\n }\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1756,"value":"STEP_SIZE = ({\n a: 1 / 150,\n b: 1 / 150,\n h: 1,\n l: 1 / 30\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"rgbMaxLInOklab = {\n const ranges = culori.modeOklab.ranges;\n const lRange = d3.range(...ranges.l, STEP_SIZE.l);\n const aRange = d3.range(...ranges.a, STEP_SIZE.a);\n const bRange = d3.range(...ranges.b, STEP_SIZE.b);\n\n const getMaxLightness = (a, b) => {\n return _.last(\n lRange.filter((l) => {\n return culori.displayable({ mode: \"oklab\", l, a, b });\n })\n );\n };\n\n return aRange\n .flatMap((a) =>\n bRange.map((b) => {\n const l = getMaxLightness(a, b);\n const oklab = { mode: \"oklab\", l, a, b };\n const hex = culori.formatHex(oklab);\n\n return { hex, ...oklab };\n })\n )\n .filter((d) => d.l);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"rgbMaxLInOklabMark = Plot.rect(rgbMaxLInOklab, {\n x1: \"a\",\n x2: (d) => d.a + STEP_SIZE.a,\n y1: \"b\",\n y2: (d) => d.b + STEP_SIZE.b,\n fill: \"hex\",\n fillOpacity: settings.oklabTransparency\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1598,"value":"rgbMaxCInOklch = {\n const ranges = culori.modeOklch.ranges;\n const lRange = d3.range(...ranges.l, STEP_SIZE.l);\n const hRange = d3.range(...ranges.h, STEP_SIZE.h);\n\n return lRange.flatMap((l) =>\n hRange.map((h) => {\n const c = ranges.c[1];\n const oklch = culori.clampChroma({ mode: \"oklch\", l, c, h }, \"oklch\");\n const hex = culori.formatHex(oklch);\n return { hex, ...oklch };\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"rgbMaxCInOklchMark = Plot.rect(rgbMaxCInOklch, {\n x1: (d) => d.h,\n x2: (d) => d.h + STEP_SIZE.h,\n y1: (d) => d.l,\n y2: (d) => d.l + STEP_SIZE.l,\n fill: \"hex\",\n fillOpacity: settings.oklabTransparency\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1300,"value":"centerPointMark = Plot.dot([[0, 0]], {\n x: () => 0,\n y: () => 0,\n fill: () => \"#000000\",\n r: 3,\n title: () => `#000000\noklch(0, 0, 0°)`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"caption = \"The mixing paths are overlayed ontop of the RGB gamut in the [Oklab](https://bottosson.github.io/posts/oklab/) color space.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"### Paths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":449,"value":"mixingCoefficients = [...d3.range(0, 1, 1 / (settings.mixes - 1)), 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"mix = (from, to, fromLabel, toLabel) =>\n mixingCoefficients.flatMap((t) => {\n const [r, g, b] = mixbox.lerp(from, to, t);\n const rgb = { mode: \"rgb\", r: r / 255, g: g / 255, b: b / 255 };\n\n return [\n {\n algorithm: \"Mixbox\",\n coefficient: t,\n hex: culori.formatHex(rgb),\n ...culori.oklab(rgb),\n fromLabel,\n toLabel\n },\n {\n algorithm: \"Spectral.js\",\n coefficient: t,\n hex: spectraljs.mix(from, to, t),\n ...culori.oklab(spectraljs.mix(from, to, t)),\n fromLabel,\n toLabel\n }\n ];\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"mixingPath = mix(\n firstPigment,\n secondPigment,\n pigments[firstMixingPigmentName] === culori.formatHex(firstPigment)\n ? firstMixingPigmentName\n : \"Custom pigment\",\n pigments[secondMixingPigmentName] === culori.formatHex(secondPigment)\n ? secondMixingPigmentName\n : \"Custom pigment\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"explorePaths = {\n const length = Object.values(pigments).length;\n const acc = [];\n\n for (let j = 0; j < length; ++j) {\n acc.push(\n ...mix(\n exploringPigment,\n Object.values(pigments)[j],\n pigments[exploringPigmentName] === culori.formatHex(exploringPigment)\n ? exploringPigmentName\n : \"Custom pigment\",\n Object.keys(pigments)[j]\n )\n );\n }\n\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"allPaths = {\n const length = Object.values(pigments).length;\n const acc = [];\n\n for (let i = 0; i < length; ++i) {\n for (let j = i; j < length; ++j) {\n const mixes = mix(\n Object.values(pigments)[i],\n Object.values(pigments)[j],\n Object.keys(pigments)[i],\n Object.keys(pigments)[j]\n );\n\n acc.push(...mixes);\n }\n }\n\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"tooltip = (d) => {\n let { l, c, h } = culori.oklch(d.hex);\n\n h = h || 0;\n\n return `Algorithm: ${d.algorithm}\n${d.hex}\noklch(${(l * 100).toFixed(0)}, ${c.toFixed(2)}, ${h.toFixed(0)}°)\nFrom: ${d.fromLabel}\nTo: ${d.toLabel}\nMixing coefficient: ${d.coefficient.toFixed(2)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"### Plotting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1917,"value":"facetDomain = compareSpectralJs ? [\"Mixbox\", \"Spectral.js\"] : [\"Mixbox\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1436,"value":"renderPlot = ({ points }) =>\n Plot.plot({\n width: facetDomain.length * 600,\n caption: md`${caption}`,\n aspectRatio: 1,\n fx: {\n domain: facetDomain\n },\n marks: [\n rgbMaxLInOklabMark,\n // must be rendered after diagram to get tooltip to work\n Plot.dot(points, {\n x: \"a\",\n y: \"b\",\n sort: \"l\",\n fill: \"hex\",\n fx: \"algorithm\",\n r: settings.pathRadius,\n tip: true,\n title: tooltip\n }),\n centerPointMark\n ]\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1394,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1431,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2140,"value":"function returnIfFunction(argument) {\n if (typeof argument === \"function\") {\n return argument;\n } else {\n return undefined;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2142,"value":"function processArg(d, xOrF) {\n if (typeof xOrF === \"function\") {\n return xOrF(d);\n } else {\n return xOrF;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"