2b:null 2c:["$","title",null,{"children":"Color distributions | Juan Emilio Miralles | Observable"}] 31:T5f0,displayColorsObjGo = (colors_raw = [], method, bg, fg) => { let colors = colors_raw.slice(0, randomPalatteNumber); if(method == "palette") { return svg`${colors.map((color, i) => svg`` )}` } else if(method == "palettetext") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${printRatio(color.code, bg, 2)} `, svg` ${printRatio(fg, color.code, 2)} ` ]}` )}` } else if(method == "palettecodes") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${color.code} ` ]}` )}` } else if(method == "textmoon") { return svg`${[ svg`${colors.map((color, i) => svg`` )}`, svg` ${printRatio(colors[0].code, colors[1].code)} ` ]}` } }32:T12db,clickColors = (color) => { const clamph = (max, value) => { return value >= 0 ? value%360 : value%360 + 360 } const clamp = (min, max, value) => { return Math.max(min, Math.min(max, value)) } const randNormVal = (min, max, mu, sigma) => { return Math.floor(clamp(min, max, max*d3.randomNormal(mu, sigma)())) } const randNormValh = (max, mu, sigma) => { return Math.floor(clamph(max, max*d3.randomNormal(mu, sigma)())) } const randVal = (min, max) => { return Math.floor(Math.abs(Math.random() * (max - min) + min)) } const colorKnobs = { method: "hsl", rgb: { r_min: 74, r_max: 149, g_min: 0, g_max: 85, b_min: 191, b_max: 98, }, hsl: { h_min: 0, h_max: 360, s_min: 32, s_max: 62, l_min: 25, l_max: 39, }, s_rgb: { r_mu: 127, g_mu: 127, b_mu: 127, r_sigma: 255, g_sigma: 255, b_sigma: 255, }, s_hsl: { h_mu: 180, s_mu: 50, l_mu: 50, h_sigma: 360, s_sigma: 100, l_sigma: 100, }, }; const randomColorRGB = (colorKnobs) => { const r = randVal(colorKnobs.rgb.r_min, colorKnobs.rgb.r_max); const g = randVal(colorKnobs.rgb.g_min, colorKnobs.rgb.g_max); const b = randVal(colorKnobs.rgb.b_min, colorKnobs.rgb.b_max); const newcolor = d3.rgb(`rgb(${r}, ${g}, ${b})`); return ({ string: `rgb(${r},${g},${b})`, code: newcolor ? newcolor.formatHex() : "#090909", }); }; const randomColorHSL = (colorKnobs) => { const h = randVal(colorKnobs.hsl.h_min, colorKnobs.hsl.h_max); const s = randVal(colorKnobs.hsl.s_min, colorKnobs.hsl.s_max); const l = randVal(colorKnobs.hsl.l_min, colorKnobs.hsl.l_max); const newcolor = d3.hsl(`hsl(${h}, ${s}%, ${l}%)`); return ({ string: `hsl(${h},${s}%,${l}%)`, code: newcolor ? newcolor.formatHex() : "#090909", }); }; const genColors = (num, colorKnobs, randFunc) => { return Array.from({ length: num }, () => randFunc(colorKnobs)); }; const genKnobsRGB = () => { return({ r_min: randVal(0, 255), r_max: randVal(0, 255), g_min: randVal(0, 255), g_max: randVal(0, 255), b_min: randVal(0, 255), b_max: randVal(0, 255), }); }; const genKnobsHSL = () => { return({ h_min: randVal(0, 360), h_max: randVal(0, 360), s_min: randVal(0, 100), s_max: randVal(0, 100), l_min: randVal(0, 100), l_max: randVal(0, 100), }); }; const randNormValRGB = (colorKnobs) => { const r = randNormVal(0, 255, colorKnobs.s_rgb.r_mu, colorKnobs.s_rgb.r_sigma); const g = randNormVal(0, 255, colorKnobs.s_rgb.g_mu, colorKnobs.s_rgb.g_sigma); const b = randNormVal(0, 255, colorKnobs.s_rgb.b_mu, colorKnobs.s_rgb.b_sigma); const newcolor = d3.rgb(`rgb(${r}, ${g}, ${b})`); return ({ string: `rgb(${r}, ${g}, ${b})`, code: newcolor ? newcolor.formatHex() : "#090909", }); }; const randNormValHSL = (colorKnobs) => { const h = randNormValh(360, colorKnobs.s_hsl.h_mu, colorKnobs.s_hsl.h_sigma); const s = randNormVal(0, 100, colorKnobs.s_hsl.s_mu, colorKnobs.s_hsl.s_sigma); const l = randNormVal(0, 100, colorKnobs.s_hsl.l_mu, colorKnobs.s_hsl.l_sigma); const newcolor = d3.hsl(`hsl(${h}, ${s}%, ${l}%)`); return ({ string: `hsl(${h}, ${s}%, ${l}%)`, code: newcolor ? newcolor.formatHex() : "#090909", }); }; const genColorKnobs = (s_rgRGB, s_rgHSL) => { const method = Math.random() > 0.5 ? "hsl" : "rgb"; const rgRGB = genKnobsRGB(); const rgHSL = genKnobsHSL(); return({ method: method, rgb: rgRGB, hsl: rgHSL, s_rgb: s_rgRGB, s_hsl: s_rgHSL, }); }; let color_rgb; let color_hsl; if (color.string.slice(0,3) == "hsl") { color_hsl = d3.hsl(color.string); color_rgb = d3.rgb(color_hsl); } else { color_rgb = d3.rgb(color.string); color_hsl = d3.hsl(color_rgb); } const new_s_hsl = { h_mu: color_hsl.h, s_mu: color_hsl.s, l_mu: color_hsl.l, h_sigma: colorKnobs.s_hsl.h_sigma, s_sigma: colorKnobs.s_hsl.s_sigma, l_sigma: colorKnobs.s_hsl.l_sigma, }; const new_s_rgb = { r_mu: color_rgb.r, g_mu: color_rgb.g, b_mu: color_rgb.b, r_sigma: colorKnobs.s_rgb.r_sigma, g_sigma: colorKnobs.s_rgb.g_sigma, b_sigma: colorKnobs.s_rgb.b_sigma, }; const newColorKnobs = genColorKnobs(new_s_rgb, new_s_hsl); const newColors = newColorKnobs.method == "hsl" ? genColors(16, colorKnobs, randNormValHSL) : genColors(16, colorKnobs, randNormValRGB); return({newColorKnobs: newColorKnobs, newColors: newColors}) }33:[] 2f:{"id":"ab39af074ab78c2e","slug":null,"title":"Color distributions","thumbnail":"2ecf145d843302674624bc25a65efbac834ca746414235f778a2569d065a36b1","access_level":"public","create_time":"$D2023-05-13T21:38:26.650Z","update_time":"$D2023-06-07T14:10:34.605Z","view_time":null,"first_public_time":"$D2023-05-13T21:38:26.650Z","has_unpublished_edits":null,"fork":{"id":"58b6e2953e4502a5","slug":"color-randomizer","title":"Color randomizer","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":"starter_2024"},"version":1047,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null}],"members":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"29acd26dd8daf248","slug":"colorbox","title":"colorbox","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"type":"notebook","body":{"title":"Color distributions","cells":[{"id":0,"value":"# Color distributions\n\nSee also\n* [Color randomizer](https://observablehq.com/@je-miralles/color-randomizer)\n* [Color study: Contrast](https://observablehq.com/@je-miralles/color-study-i)\n* [Color study: Hue, saturation, lightness](https://observablehq.com/@je-miralles/color-study-ii)\n* [Color study: Interpolation](https://observablehq.com/@je-miralles/color-interpolation)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"pachinko_rgb(d3.randomNormal(dist.mu1, dist.sigma1), [0, 255], dist.g, dist.b, dist.n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"viewof dist = Inputs.form({\n g: Inputs.range([0, 255], {label: \"g\", step: 1, value: 127}),\n b: Inputs.range([0, 255], {label: \"b\", step: 1, value: 127}),\n n: Inputs.range([0, 2500], {label: \"n\", step: 1, value: 100}),\n mu1: Inputs.range([0, 255], {value: 127, step: 1, label: \"mu: expected value\"}),\n sigma1: Inputs.range([0, 255], {value: 15, step: 1, label: \"sigma: standard deviation\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"## H","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"pachinko_hsl(d3.randomNormal(dist_h.mu, dist_h.sigma), [0, 360], dist_h.s, dist_h.l, dist_h.n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"viewof dist_h = Inputs.form({\n mu: Inputs.range([0, 360], {value: 50, step: 1, label: \"mu: expected h value\"}),\n s: Inputs.range([0, 100], {label: \"s\", step: 1, value: 50}),\n l: Inputs.range([0, 99], {label: \"l\", step: 1, value: 50}),\n n: Inputs.range([1, 2500], {label: \"n\", step: 1, value: 64}),\n sigma: Inputs.range([0, 360], {value: 15, step: 1, label: \"sigma: standard deviation\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"## L","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"pachinko_l(d3.randomNormal(dist_l.mu, dist_l.sigma), [0, 100], dist_l.h, dist_l.s, dist_l.n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"viewof dist_l = Inputs.form({\n h: Inputs.range([0, 360], {label: \"h\", step: 1, value: 180}),\n s: Inputs.range([0, 100], {label: \"s\", step: 1, value: 50}),\n n: Inputs.range([1, 2500], {label: \"n\", step: 1, value: 64}),\n mu: Inputs.range([0, 100], {value: 50, step: 1, label: \"mu: expected l value\"}),\n sigma: Inputs.range([0, 360], {value: 15, step: 1, label: \"sigma: standard deviation\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"## Randomizer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"viewof randomPickerBGFG = Inputs.form({\n bg: Inputs.color({label: \"background color\", value: \"#000000\"}),\n fg: Inputs.color({label: \"foreground color\", value: \"#FFFFFF\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof randomPicker = Inputs.form({\n min_red: Inputs.range([0, 255], {label: \"min red\", step: 1, value:0}),\n max_red: Inputs.range([0, 255], {label: \"max red\", step: 1, value:255}),\n min_grn: Inputs.range([0, 255], {label: \"min green\", step: 1, value:0}),\n max_grn: Inputs.range([0, 255], {label: \"max green\", step: 1, value:255}),\n min_blu: Inputs.range([0, 255], {label: \"min blue\", step: 1, value:0}),\n max_blu: Inputs.range([0, 255], {label: \"max blue\", step: 1, value:255}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"contrast ratios\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"mean bg ratio: ${d3.mean(paletteBgCrs(randomPaletteRGB)).toFixed(3)}, deviation ${d3.deviation(paletteBgCrs(randomPaletteRGB)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPaletteRGB)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nmean fg ratio: ${d3.mean(paletteFgCrs(randomPaletteRGB)).toFixed(3)}, deviation ${d3.deviation(paletteFgCrs(randomPaletteRGB)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPaletteRGB)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"showRandom = {\n let method = \"palette\";\n if (randomPicker.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (randomPicker.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColorsObj(randomPaletteRGB, method, randomPickerBGFG.bg, randomPicker.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof randomizeRGB = Inputs.button(\"randomize rgb\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof randomizeHSL = Inputs.button(\"randomize hsl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"showRandomHSL = {\n let method = \"palette\";\n if (randomPickerHSL.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (randomPickerHSL.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColorsObj(randomPaletteHSL, method, randomPickerBGFG.bg, randomPickerBGFG.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"mean bg ratio: ${d3.mean(paletteBgCrs(randomPaletteHSL)).toFixed(3)}, deviation ${d3.deviation(paletteBgCrs(randomPaletteHSL)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPaletteHSL)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nmean fg ratio: ${d3.mean(paletteFgCrs(randomPaletteHSL)).toFixed(3)}, deviation ${d3.deviation(paletteFgCrs(randomPaletteHSL)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPaletteHSL)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"viewof randomPickerHSL = Inputs.form({\n a_min: Inputs.range([0, 359], {label: \"min hue\", step: 1, value:0}),\n a_max: Inputs.range([0, 360], {label: \"max hue\", step: 1, value:360}),\n r_min: Inputs.range([0, 100], {label: \"min saturation\", step: 1, value:0}),\n r_max: Inputs.range([0, 100], {label: \"max saturation\", step: 1, value:100}),\n h_min: Inputs.range([0, 100], {label: \"min lightness\", step: 1, value:0}),\n h_max: Inputs.range([0, 100], {label: \"max lightness\", step: 1, value:100}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"contrast ratios\"}),\n //luminance: Inputs.radio([\"default\", \"Y 2020\"], {label: \"luminance\", value: \"default\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":749,"value":"### Pachinko dodger\n\nThanks [@d3/d3-random](https://observablehq.com/@d3/d3-random) for the pachinko!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":"radius = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"function* pachinko_l(random, extent, h=360, s=50, n=100, height = 200) {\n const dodge = dodger(radius * 2 + 1);\n const margin = {top: 0, right: 30, bottom: 20, left: 30};\n const values = Float64Array.from({length: n}, random);\n if (extent === undefined) extent = d3.extent(values);\n const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();\n\n const svg = d3.select(DOM.svg(width, height)).style(\"overflow\", \"visible\");\n yield svg.node();\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n for (let i = 0; i < n; ++i) {\n if (i % 20 == 0) yield svg.node();\n const cx = x(values[i]);\n const cy = height - margin.bottom - dodge(cx) - radius - 1;\n if (cy < margin.top) break;\n svg.append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", -400)\n .attr(\"r\", radius)\n .attr(\"cy\", cy)\n .attr(\"fill\", `hsl(${h}, ${s}%, ${values[i]}%)`);\n }\n\n yield svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"function* pachinko_hsl(random, extent, s=50, l=50, n=100, height = 200) {\n const dodge = dodger(radius * 2 + 1);\n const margin = {top: 0, right: 30, bottom: 20, left: 30};\n const values = Float64Array.from({length: n}, random);\n if (extent === undefined) extent = d3.extent(values);\n const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();\n\n const svg = d3.select(DOM.svg(width, height)).style(\"overflow\", \"visible\");\n yield svg.node();\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n for (let i = 0; i < n; ++i) {\n if (i % 20 == 0) yield svg.node();\n const cx = x(values[i]);\n const cy = height - margin.bottom - dodge(cx) - radius - 1;\n if (cy < margin.top) break;\n svg.append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", -400)\n .attr(\"r\", radius)\n .attr(\"cy\", cy)\n .attr(\"fill\", `hsl(${values[i]}, ${s}%, ${l}%)`);\n }\n\n yield svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"function* pachinko_rgb(random, extent, g=180, b=180, n=100, height = 200) {\n const dodge = dodger(radius * 2 + 1);\n const margin = {top: 0, right: 30, bottom: 20, left: 30};\n const values = Float64Array.from({length: n}, random);\n if (extent === undefined) extent = d3.extent(values);\n const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();\n\n const svg = d3.select(DOM.svg(width, height)).style(\"overflow\", \"visible\");\n yield svg.node();\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n for (let i = 0; i < n; ++i) {\n if (i % 20 == 0) yield svg.node();\n const cx = x(values[i]);\n const cy = height - margin.bottom - dodge(cx) - radius - 1;\n if (cy < margin.top) break;\n svg.append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", -400)\n .attr(\"r\", radius)\n .attr(\"cy\", cy)\n .attr(\"fill\", `rgb(${values[i]}, ${g}, ${b})`);\n }\n\n yield svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"dodger = radius => {\n const radius2 = radius ** 2;\n const bisect = d3.bisector(d => d.x);\n const circles = [];\n return x => {\n const l = bisect.left(circles, x - radius);\n const r = bisect.right(circles, x + radius, l);\n let y = 0;\n for (let i = l; i < r; ++i) {\n const { x: xi, y: yi } = circles[i];\n const x2 = (xi - x) ** 2;\n const y2 = (yi - y) ** 2;\n if (radius2 > x2 + y2) {\n y = yi + Math.sqrt(radius2 - x2) + 1e-6;\n i = l - 1;\n continue;\n }\n }\n circles.splice(bisect.left(circles, x, l, r), 0, { x, y });\n return y;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"### Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"luminance = (code, lumFunc) => {\n const RsRGB = toRGBarray(code)[0]/255;\n const GsRGB = toRGBarray(code)[1]/255;\n const BsRGB = toRGBarray(code)[2]/255;\n const R = RsRGB <= 0.03928 ? RsRGB/12.92 : ((RsRGB+0.055)/1.055) ** 2.4;\n const G = GsRGB <= 0.03928 ? GsRGB/12.92 : ((GsRGB+0.055)/1.055) ** 2.4;\n const B = BsRGB <= 0.03928 ? BsRGB/12.92 : ((BsRGB+0.055)/1.055) ** 2.4;\n return lumFunc([R, G, B]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"lumDef = (rgb = []) => { return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"Y_601 = (rgb = []) => { return 0.299*rgb[0] + 0.587*rgb[1] + 0.114*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"Y_2020 = (rgb = []) => { return 0.2627*rgb[0] + 0.6780*rgb[1] + 0.0593*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"contrastRatio = (code1, code2, funcSel) => {\n const lumFunc = (funcSel == \"lumDef\") ? lumDef : Y_2020;\n const L1 = luminance(code1, lumFunc);\n const L2 = luminance(code2, lumFunc);\n return L1 > L2 ? (L1 + 0.05) / (L2 + 0.05) : (L2 + 0.05) / (L1 + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"### Conversions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"toColorCodeStringRGB = (rgb = []) => {\n return \"#\" + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"toColorCodeStringHSL = (hsl = []) => {\n const rgb = fromHSLtoRGB(hsl);\n return \"#\" + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"toRGBarray = (code) => {\n let r = code.slice(1,3);\n let g = code.slice(3,5);\n let b = code.slice(5,7);\n return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"fromHSLtoRGB = (hsl = []) => {\n const H = hsl[0];\n const S = hsl[1] <= 1 ? hsl[1] : hsl[1]/100;\n const L = hsl[2] <= 1 ? hsl[2] : hsl[2]/100;\n\n const C = (1 - Math.abs(2*L - 1))*S;\n const Hp = H / 60;\n const X = C*(1 - Math.abs(Hp%2 - 1));\n const m = L - C/2;\n\n let rgb = [];\n \n if (Hp >= 0 & Hp < 1) { rgb = [C + m, X + m, 0 + m] }\n else if (Hp >= 0 & Hp < 1) { rgb = [C + m, X + m, 0 + m] }\n else if (Hp >= 1 & Hp < 2) { rgb = [X + m, C + m, 0 + m] }\n else if (Hp >= 2 & Hp < 3) { rgb = [0 + m, C + m, X + m] }\n else if (Hp >= 3 & Hp < 4) { rgb = [0 + m, X + m, C + m] }\n else if (Hp >= 4 & Hp < 5) { rgb = [X + m, 0 + m, C + m] }\n else if (Hp >= 5 & Hp < 6) { rgb = [C + m, 0 + m, X + m] }\n\n rgb = rgb.map(v => Math.round(v*255));\n\n const rgbObj = {\n rgb: rgb,\n C: C,\n Hp: Hp,\n X: X,\n m: m,\n };\n return (rgbObj.rgb);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"getColorObj = (code, bg=\"#000000\", fg=\"#FFFFFF\") => {\n return({\n code: code,\n r: toRGBarray(code)[0],\n g: toRGBarray(code)[1],\n b: toRGBarray(code)[2],\n bgcr: contrastRatio(bg, code),\n fgcr: contrastRatio(fg, code),\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"randomColorRGB = (min_red=0, max_red=255, min_grn=0, max_grn=255, min_blu=0, max_blu=255, randFunc=Math.random) => {\n const randVal = (min, max) => Math.abs(Math.floor(randFunc() * (max - min) + min));\n const r = randVal(min_red, max_red);\n const g = randVal(min_grn, max_grn);\n const b = randVal(min_blu, max_blu);\n return toColorCodeStringRGB([r, g, b]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"randomColorRGB_w = (randFunc) => {\n return randomColorRGB(\n randomPicker.min_red ,randomPicker.max_red,\n randomPicker.min_grn ,randomPicker.max_grn,\n randomPicker.min_blu ,randomPicker.max_blu,\n randFunc\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"randomColorHSL = (a_min=0, a_max=360, r_min=0, r_max=100, h_min=0, h_max=100, randFunc=Math.random) => {\n const randVal = (min, max) => Math.abs(Math.floor(randFunc() * (max - min) + min));\n const h = randVal(a_min, a_max);\n const s = randVal(r_min, r_max);\n const l = randVal(h_min, h_max);\n return(toColorCodeStringHSL([h, s, l]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"randomColorHSL_w = (randFunc) => {\n return randomColorHSL(\n randomPickerHSL.a_min, randomPickerHSL.a_max,\n randomPickerHSL.r_min, randomPickerHSL.r_max,\n randomPickerHSL.h_min, randomPickerHSL.h_max,\n randFunc\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"getRandColorObj = (source, randFunc) => {\n let code;\n if(source == \"rgbpicker\") {\n code = randomColorRGB_w(randFunc);\n } else {\n code = randomColorHSL_w(randFunc);\n }\n return getColorObj(code, randomPickerBGFG.bg, randomPickerBGFG.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"getRandPalette = (number=16, source=\"rgbpicker\", randFunc=Math.random) => {\n return Array.from({ length: number }, () => getRandColorObj(source, randFunc));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"randomPaletteRGB= {\n randomizeRGB;\n return getRandPalette(nStat, \"rgbpicker\", Math.random);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"randomPaletteHSL = {\n randomizeHSL;\n return getRandPalette(nStat, \"hslpicker\", Math.random);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"### Stats","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"nStat = 10000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"paletteBgCrs = (palette) => { return palette.map((d) => { return d.bgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"paletteFgCrs = (palette) => { return palette.map((d) => { return d.fgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"checkRule = (crs) => { return crs.map((cr) => { return cr >= 4.5 ? true : false }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"### Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"printRatio = (code0, code1, width=3) => { return contrastRatio(code0, code1).toFixed(width) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"displayColorsObj = (colors=[], method=\"palette\", bg=\"#000000\", fg=\"#FFFFFF\") => {\n return svg`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"randomPalatteNumber = Math.floor(width / (w/2) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"h = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"w = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"## Scratch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"toRGBarray(\"#568923\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"clickColors({string:\"rgb(86, 137, 35)\", code:\"#568923\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"clamp = (min, max, value) => { return Math.max(min, Math.min(max, value)) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"clamph = (max, value) => { return value >= 0 ? value%360 : value%360 + 360 }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"clampr = (min, max, value) => {\n if (value >= max) {\n return 2*max - value;\n } else if (value <= min) {\n return min + (min-value);\n } else {\n return value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"clamp(0, 100, clampr(0, 100, -5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"clampr(0, 100, 101)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"randNormVal = (min, max, mu, sigma) => { return Math.floor(clamp(min, max, d3.randomNormal(mu, sigma)())) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"randNormValh = (max, mu, sigma) => { return Math.floor(clamph(max, d3.randomNormal(mu, sigma)())) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"h1 = randNormValh(360, 147, 360)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"r1 = randNormVal(0, 100, 50, 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"d3.randomNormal(150, 255)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"d3.hsl(`hsl(106,44%,0%)`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"d3.hsl(`hsl(106, 44%, 100%)`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"## References\n\n* [Wikipedia: Box Muller Transform](https://en.wikipedia.org/wiki/Box%E2%80%93Muller_transform)\n* [@d3/d3-random](https://observablehq.com/@d3/d3-random)\n* [@d3/achromatic-interpolation](https://observablehq.com/@d3/achromatic-interpolation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"