2c:null 2d:["$","title",null,{"children":"Color filter generator (with SVG filter) | Michiel Dral | Observable"}] 32:Ted9,class Color { constructor(r, g, b) { this.set(r, g, b); } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round( this.b )})`; } set(r, g, b) { this.r = this.clamp(r); this.g = this.clamp(g); this.b = this.clamp(b); } hueRotate(angle = 0) { angle = (angle / 180) * Math.PI; const sin = Math.sin(angle); const cos = Math.cos(angle); this.multiply([ 0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.14, 0.072 - cos * 0.072 - sin * 0.283, 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072 ]); } grayscale(value = 1) { this.multiply([ 0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value) ]); } sepia(value = 1) { this.multiply([ 0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value), 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value), 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value) ]); } saturate(value = 1) { this.multiply([ 0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value ]); } multiply(matrix) { const newR = this.clamp( this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2] ); const newG = this.clamp( this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5] ); const newB = this.clamp( this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8] ); this.r = newR; this.g = newG; this.b = newB; } brightness(value = 1) { this.linear(value); } contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); } linear(slope = 1, intercept = 0) { this.r = this.clamp(this.r * slope + intercept * 255); this.g = this.clamp(this.g * slope + intercept * 255); this.b = this.clamp(this.b * slope + intercept * 255); } invert(value = 1) { this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255); this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255); this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255); } hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA. const r = this.r / 255; const g = this.g / 255; const b = this.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 100, s: s * 100, l: l * 100 }; } clamp(value) { if (value > 255) { value = 255; } else if (value < 0) { value = 0; } return value; } }33:Td5e,class Solver { constructor(target, baseColor) { this.target = target; this.targetHSL = target.hsl(); this.reusedColor = new Color(0, 0, 0); } solve() { const result = this.solveNarrow(this.solveWide()); return { values: result.values, loss: result.loss, filter: this.css(result.values) }; } solveWide() { const A = 5; const c = 15; const a = [60, 180, 18000, 600, 1.2, 1.2]; let best = { loss: Infinity }; for (let i = 0; best.loss > 25 && i < 1000; i++) { const initial = [50, 20, 3750, 50, 100, 100]; const result = this.spsa(A, a, c, initial, 10000); if (result.loss < best.loss) { best = result; } } return best; } solveNarrow(wide) { const A = wide.loss; const c = 2; const A1 = A + 1; const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; return this.spsa(A, a, c, wide.values, 500); } spsa(A, a, c, values, iters) { const alpha = 1; const gamma = 0.16666666666666666; let best = null; let bestLoss = Infinity; const deltas = new Array(6); const highArgs = new Array(6); const lowArgs = new Array(6); for (let k = 0; k < iters; k++) { const ck = c / Math.pow(k + 1, gamma); for (let i = 0; i < 6; i++) { deltas[i] = Math.random() > 0.5 ? 1 : -1; highArgs[i] = values[i] + ck * deltas[i]; lowArgs[i] = values[i] - ck * deltas[i]; } const lossDiff = this.loss(highArgs) - this.loss(lowArgs); for (let i = 0; i < 6; i++) { const g = (lossDiff / (2 * ck)) * deltas[i]; const ak = a[i] / Math.pow(A + k + 1, alpha); values[i] = fix(values[i] - ak * g, i); } const loss = this.loss(values); if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; } } return { values: best, loss: bestLoss }; function fix(value, idx) { let max = 100; if (idx === 2 /* saturate */) { max = 7500; } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; } if (idx === 3 /* hue-rotate */) { if (value > max) { value %= max; } else if (value < 0) { value = max + (value % max); } } else if (value < 0) { value = 0; } else if (value > max) { value = max; } return value; } } loss(filters) { // Argument is array of percentages. const color = this.reusedColor; color.set(0, 0, 0); color.invert(filters[0] / 100); color.sepia(filters[1] / 100); color.saturate(filters[2] / 100); color.hueRotate(filters[3] * 3.6); color.brightness(filters[4] / 100); color.contrast(filters[5] / 100); const colorHSL = color.hsl(); return ( Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l) ); } css(filters) { function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); } return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt( 2 )}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt( 5 )}%);`; } }34:[] 30:{"id":"aa1274f24ede2fe9","slug":null,"title":"Color filter generator (with SVG filter)","thumbnail":"c9d4a0ca5946f8547ee64bf8e893dfd71fec6ab6bf2e9c7045e2960b645f1477","access_level":"public","create_time":"$D2025-03-19T03:26:49.207Z","update_time":"$D2025-03-19T03:26:56.333Z","view_time":null,"first_public_time":"$D2025-03-19T03:26:49.207Z","has_unpublished_edits":null,"fork":{"id":"0d5bb67ea6b4726a","slug":"color-filter-generator","title":"Color filter generator","owner":{"id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":"starter_2024","bio":"I don't actually know how to program I just ask @FransAris "},"version":647,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null,"bio":"I don't actually know how to program I just ask @FransAris "}],"members":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null,"role":"editor"},{"type":"team","id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color filter generator (with SVG filter)","cells":[{"id":0,"value":"# Color filter generator (with SVG filter)\n\nA color-filter-solver that will continue looking for better answers as long as you keep the page open.\n\nThere seems to be something wrong in the original code, as it doesn't get me close to some colors (even though it says the loss is tiny).\n\nCredit goes to [https://codepen.io/sosuke/pen/Pjoqqp](https://codepen.io/sosuke/pen/Pjoqqp),\nwho in turn yields credit to MultiplyByZer0 for their post at [https://stackoverflow.com/a/43960991/604861](https://stackoverflow.com/a/43960991/604861).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"md`\nMaybe use [colorjs](https://colorjs.io/)?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof input_color = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"// matrix = [\n// [1, 0, 0, 0, 0],\n// [0, 1, 0, 0, 0],\n// [0, 0, 1, 0, 0],\n// [0, 0, 0, 1, 0]\n// ]\n// matrix = [\n// [c.r / 3, c.g / 3, c.b / 3, 0, 0],\n// [c.r / 3, c.g / 3, c.b / 3, 0, 0],\n// [c.r / 3, c.g / 3, c.b / 3, 0, 0],\n// [0, 0, 0, 1, 0]\n// ]\n// matrix = [\n// [c.r / 3, c.r / 3, c.r / 3, 0, 0],\n// [c.g / 3, c.g / 3, c.g / 3, 0, 0],\n// [c.b / 3, c.b / 3, c.b / 3, 0, 0],\n// [0, 0, 0, 1, 0]\n// ]\n// matrix = [\n// [0, 0, 0, d.r * K, 0],\n// [0, 0, 0, d.g * K, 0],\n// [0, 0, 0, d.b * K, 0],\n// [0, 0, 0, 1, 0]\n// ]\n// matrix = [\n// [0, 0, 0, 0, c.r],\n// [0, 0, 0, 0, c.g],\n// [0, 0, 0, 0, c.b],\n// [0, 0, 0, 1, 0]\n// ]\n// matrix = [\n// [0, 0, 0, 1, 0],\n// [0, 0, 0, 1, 0],\n// [0, 0, 0, 1, 0],\n// [0, 0, 0, 1, 0]\n// ]\nmatrix = [\n [0, 0, 0, d.r, 0],\n [0, 0, 0, d.g, 0],\n [0, 0, 0, d.b, 0],\n [0, 0, 0, 1, 0]\n]\n// matrix = [\n// [0, 0, 0, 203 / 255, 0],\n// [0, 0, 0, 75 / 255, 0],\n// [0, 0, 0, 22 / 255, 0],\n// [0, 0, 0, 1, 0]\n// ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"22 / 255","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"c.b * 255","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"c.p3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"d = ({\n // r: c.r,\n // g: c.g,\n // b: c.b\n\n // r: c.srgb_linear[0],\n // g: c.srgb_linear[1],\n // b: c.srgb_linear[2]\n\n r: c.p3[0],\n g: c.p3[1],\n b: c.p3[2]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"255 * 0.08627450980392157","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"c.srgb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"c.srgb_linear","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"K = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"l = htl.html`\n

\\\n \\\n \\\n \\\n #waves')`\n }}>

\n\t\n\t\n#filter')`.replaceAll(\"\\n\", \"\")\n }}>

Original

New!

Huh?

\n\n

\n \n

\n\n

\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"c.r","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"c.g","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"c.b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"p = matrix.map((x) => x.join(\" \")).join(\" \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"hmmmm = `url('data:image/svg+xml,\\\n #waves')`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`\nresult css:
\n${result.filter}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"{\n if (result.loss < 1) {\n return md`This is a pretty much perfect result.`;\n } else if (result.loss < 5) {\n return md`The color is close enough.`;\n } else if (result.loss < 15) {\n return md`The color is somewhat off. Consider running it again.`;\n } else {\n return md`The color is extremely off. Run it again!`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n${result.loss.toFixed(3) + \"%\"} match\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"g = new Color(rgb[0], rgb[1], rgb[2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"color_block = (color) => {\n return htl.html`

${color}

${children}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"stupid_hue_rotate = (hue, color) => {\n let new_color = new Color(color.r, color.g, color.b);\n new_color.hueRotate(hue);\n return new_color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"hex_to_color = (hex) => {\n let rgb = hexToRgb(hex);\n return new Color(rgb[0], rgb[1], rgb[2]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"firefox_hue_rotate_matrix = (hue_degree) => {\n const lumR = 0.2126;\n const lumG = 0.7152;\n const lumB = 0.0722;\n\n const oneMinusLumR = 1 - lumR;\n const oneMinusLumG = 1 - lumG;\n const oneMinusLumB = 1 - lumB;\n\n const hueRotateR = 0.143;\n const hueRotateG = 0.14;\n const hueRotateB = 0.283;\n\n let matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];\n let c = Math.cos((hue_degree * Math.PI) / 180);\n let s = Math.sin((hue_degree * Math.PI) / 180);\n\n matrix[0] = lumR + oneMinusLumR * c - lumR * s;\n matrix[1] = lumG - lumG * c - lumG * s;\n matrix[2] = lumB - lumB * c + oneMinusLumB * s;\n\n matrix[5] = lumR - lumR * c + hueRotateR * s;\n matrix[6] = lumG + oneMinusLumG * c + hueRotateG * s;\n matrix[7] = lumB - lumB * c - hueRotateB * s;\n\n matrix[10] = lumR - lumR * c - oneMinusLumR * s;\n matrix[11] = lumG - lumG * c + lumG * s;\n matrix[12] = lumB + oneMinusLumB * c + lumB * s;\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"color_block(hex_to_color(input_color))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"hue = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"hue_rotate_box = (hue, child) => {\n return htl.html`

${child}

\n ${color_block(\n multiply_color(hex_to_color(input_color), firefox_hue_rotate_matrix(hue))\n )}\n ${color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))}\n ${color_block(\n multiply_color(hex_to_color(input_color), hue_rotate_color_chrome(hue))\n )}\n ${hue_rotate_box(hue, color_block(hex_to_color(input_color)))}\n ${color_block(hex_to_color(input_color))}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"identity = (x) => x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"hue_rotate_color_chrome(hue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"firefox_hue_rotate_matrix(hue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"multiply_color = (color, matrix) => {\n let new_color = new Color(color.r, color.g, color.b);\n\n const newR = clamp_bit(\n color.r * matrix[0] + color.g * matrix[1] + color.b * matrix[2] + matrix[5]\n );\n const newG = clamp_bit(\n color.r * matrix[5] + color.g * matrix[6] + color.b * matrix[7] + matrix[9]\n );\n const newB = clamp_bit(\n color.r * matrix[10] +\n color.g * matrix[11] +\n color.b * matrix[12] +\n matrix[14]\n );\n\n console.log(\"newR:\", newR);\n console.log(\"newG:\", newG);\n console.log(\"\");\n return new Color(newR, newG, newB);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"hue_rotate_color_chrome = (hue) => {\n let cosHue = Math.cos((hue * Math.PI) / 180);\n let sinHue = Math.sin((hue * Math.PI) / 180);\n\n let matrix = [];\n matrix[0] = 0.213 + cosHue * 0.787 - sinHue * 0.213;\n matrix[1] = 0.715 - cosHue * 0.715 - sinHue * 0.715;\n matrix[2] = 0.072 - cosHue * 0.072 + sinHue * 0.928;\n matrix[3] = matrix[4] = 0;\n matrix[5] = 0.213 - cosHue * 0.213 + sinHue * 0.143;\n matrix[6] = 0.715 + cosHue * 0.285 + sinHue * 0.14;\n matrix[7] = 0.072 - cosHue * 0.072 - sinHue * 0.283;\n matrix[8] = matrix[9] = 0;\n matrix[10] = 0.213 - cosHue * 0.213 - sinHue * 0.787;\n matrix[11] = 0.715 - cosHue * 0.715 + sinHue * 0.715;\n matrix[12] = 0.072 + cosHue * 0.928 + sinHue * 0.072;\n matrix[13] = matrix[14] = 0;\n matrix[15] = matrix[16] = matrix[17] = 0;\n matrix[18] = 1;\n matrix[19] = 0;\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"result","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"rgb = hexToRgb(input_color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"result = {\n if (rgb == null || rgb.length !== 3) return null;\n\n const color = new Color(rgb[0], rgb[1], rgb[2]);\n const solver = new Solver(color);\n\n let last_result = solver.solve();\n yield last_result;\n while (true) {\n if (last_result.loss < 0.01) {\n break;\n }\n\n const result = solver.solve();\n if (result.loss < last_result.loss) {\n yield result;\n last_result = result;\n } else {\n await new Promise((yell) => setTimeout(yell, 10));\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"multiply_color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"clamp_bit = (value) => {\n if (value > 255) {\n value = 255;\n } else if (value < 0) {\n value = 0;\n }\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"color_to_rgb = (color) => {\n return `rgb(${color.r}, ${color.g}, ${color.b})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"filters_to_color = (filters) => {\n // Argument is array of percentages.\n const color = new Color();\n color.set(0, 0, 0);\n\n color.invert(filters[0] / 100);\n color.sepia(filters[1] / 100);\n color.saturate(filters[2] / 100);\n color.hueRotate(filters[3] * 3.6);\n color.brightness(filters[4] / 100);\n color.contrast(filters[5] / 100);\n\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, (m, r, g, b) => {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"