3f:null 40:["$","title",null,{"children":"RGB Factory | Eric Yancey Dauenhauer | Observable"}] 46:T1268,rgbFactory = { // RGB Factory // ====================== // // There are six phases that describe the RGB progression of hues. // All changes occur from a set "min" to a set "max" based on the desired saturation // // 1. Blue increases // 2. Red decreases // 3. Green increases // 4. Blue decreases // 5. Red increases // 6. Green decreases // // These phases can be approximated with a clipped sine function // offset to different sections of its period. // // Thus, we can transform single numbers on an arbitrary scale to a point // in this cycle, and thereby convert a number to a color. ///////////////////////// // // Color factory // ///////////////////////// /** * Validate RGBFactoryOptions */ const validateOptions = ({ nMin = 0, nMax = 100, saturationMin = 90, saturationMax = 212 }) => { if (nMin > nMax) return `nMax (${nMax}) must be larger than nMin (${nMin})`; if (saturationMax > 255) return `saturationMax (${saturationMax}) must be less than or equal to 255`; if (0 > saturationMin) return `saturationMin (${saturationMin}) must be greater than or equal to 0`; if (saturationMin > saturationMax) return `saturationMax (${saturationMax}) must be larger than saturationMin (${saturationMin})`; return null; }; /** * Factory function to convert arbitrary numeric value to an rgb hue. * The offset math is a bit opaque, but it makes the sine waves line up correctly. */ function rgbFactory({ nMin = 0, nMax = 100, saturationMin = 90, saturationMax = 212, fixEdges = false } = {}) { const error = validateOptions({ nMin, nMax, saturationMin, saturationMax }); if (error) throw new Error(error); // since there are 6 "phases" of the color cycle, // we need to create a scale for that. // Half phases (1/12th) are needed for proper offset const n6th = (nMax - nMin) / 6; const n12th = n6th / 2; const range = saturationMax - saturationMin; // transformers convert the number to a channel value // where a channel is one of red, green, or blue const clip = x => x < saturationMin ? saturationMin : x > saturationMax ? saturationMax : x; // range adjustment is slightly non-standard because sine functions can be negative const rangeAdjust = x => x * range + saturationMin + range / 2; // calculate the points position on a sine curve, where // `x` is the input number that is being transformed // `offset` is the phase offset of the point in the sine curve // `nMax` is the wave amplitude // `2*PI` is the frequency in radians // Ref: https://en.wikipedia.org/wiki/Sine_wave const position = (x, offset) => Math.sin((2 * Math.PI / nMax) * (x + offset)); // returns a function that describes a channel of color const channel = offset => x => clip(rangeAdjust(position(x, offset))); // define each channel const r = channel(n6th * 2 - n12th); const g = channel(n6th * 6 - n12th); const b = channel(n6th * 4 - n12th); return function(n) { if (n < nMin || n > nMax) throw new Error(`n must satisfy ${nMin} <= n <= ${nMax}`); if (fixEdges) { if (n === nMax) return { r: 255, g: 255, b: 255 }; if (n === nMin) return { r: 0, g: 0, b: 0 }; } return { r: r(n), g: g(n), b: b(n) }; }; } ///////////////////////// // // Formatting // ///////////////////////// /** * factory to create rounding functions with arbitrary precision */ const roundN = (decimals) => { return val => { if (isNaN(val)) return val; try { return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals); } catch (e) { return val; } }; }; /** * returns rgb string: rgb(r,g,b) */ const rgbToString = ( { r, g, b }, round = false, decimals = 2 ) => { if (round) { const rounder = roundN(decimals); return `rgb(${rounder(r)},${rounder(g)},${rounder(b)})`; } return `rgb(${r},${g},${b})`; }; /** * returns hex representation of number */ const toHex = (value) => { if (value > 255 || value < 0) { throw new Error(`Please use an 8-bit value. ${value} is outside [0,255]`); } // adding hex 100 ensures that single-digit values are padded with a 0. substring(1) remove the leading `1` const hex = Math.round(0x100 + value).toString(16).substring(1); return hex; }; /** * returns hex string: #HHHHHH */ const rgbToHex = ({ r, g, b }) => ["#", toHex(r), toHex(g), toHex(b)].join(""); return rgbFactory }47:T13df,rgbFactory__transpiled = { // Transpiled from typescript original: https://gist.github.com/ericyd/d685a9ee0cadb7422d8b839febb6ba6b // RGB Factory // ====================== // // There are six phases that describe the RGB progression of hues. // All changes occur from a set "min" to a set "max" based on the desired saturation // // 1. Blue increases // 2. Red decreases // 3. Green increases // 4. Blue decreases // 5. Red increases // 6. Green decreases // // These phases can be approximated with a clipped sine function // offset to different sections of its period. // // Thus, we can transform single numbers on an arbitrary scale to a point // in this cycle, and thereby convert a number to a color. ///////////////////////// // // Color factory // ///////////////////////// /** * Validate RGBFactoryOptions */ var validateOptions = function(_a) { var _b = _a.nMin, nMin = _b === void 0 ? 0 : _b, _c = _a.nMax, nMax = _c === void 0 ? 100 : _c, _d = _a.saturationMin, saturationMin = _d === void 0 ? 90 : _d, _e = _a.saturationMax, saturationMax = _e === void 0 ? 212 : _e; if (nMin > nMax) return "nMax (" + nMax + ") must be larger than nMin (" + nMin + ")"; if (saturationMax > 255) return ( "saturationMax (" + saturationMax + ") must be less than or equal to 255" ); if (0 > saturationMin) return ( "saturationMin (" + saturationMin + ") must be greater than or equal to 0" ); if (saturationMin > saturationMax) return ( "saturationMax (" + saturationMax + ") must be larger than saturationMin (" + saturationMin + ")" ); return null; }; /** * Factory function to convert arbitrary numeric value to an rgb hue. * The offset math is a bit opaque, but it makes the sine waves line up correctly. */ function rgbFactory(_a) { var _b = _a === void 0 ? {} : _a, _c = _b.nMin, nMin = _c === void 0 ? 0 : _c, _d = _b.nMax, nMax = _d === void 0 ? 100 : _d, _e = _b.saturationMin, saturationMin = _e === void 0 ? 90 : _e, _f = _b.saturationMax, saturationMax = _f === void 0 ? 212 : _f, _g = _b.fixEdges, fixEdges = _g === void 0 ? false : _g; var error = validateOptions({ nMin: nMin, nMax: nMax, saturationMin: saturationMin, saturationMax: saturationMax }); if (error) throw new Error(error); // since there are 6 "phases" of the color cycle, // we need to create a scale for that. // Half phases (1/12th) are needed for proper offset var n6th = (nMax - nMin) / 6; var n12th = n6th / 2; var range = saturationMax - saturationMin; // transformers convert the number to a channel value // where a channel is one of red, green, or blue var clip = function(x) { return x < saturationMin ? saturationMin : x > saturationMax ? saturationMax : x; }; // range adjustment is slightly non-standard because sine functions can be negative var rangeAdjust = function(x) { return x * range + saturationMin + range / 2; }; // calculate the points position on a sine curve, where // `x` is the input number that is being transformed // `offset` is the phase offset of the point in the sine curve // `nMax` is the wave amplitude // `2*PI` is the frequency in radians // Ref: https://en.wikipedia.org/wiki/Sine_wave var position = function(x, offset) { return Math.sin(((2 * Math.PI) / nMax) * (x + offset)); }; // returns a function that describes a channel of color var channel = function(offset) { return function(x) { return clip(rangeAdjust(position(x, offset))); }; }; // define each channel var r = channel(n6th * 2 - n12th); var g = channel(n6th * 6 - n12th); var b = channel(n6th * 4 - n12th); return function(n) { if (n < nMin || n > nMax) throw new Error("n must satisfy " + nMin + " <= n <= " + nMax); if (fixEdges) { if (n === nMax) return { r: 255, g: 255, b: 255 }; if (n === nMin) return { r: 0, g: 0, b: 0 }; } return { r: r(n), g: g(n), b: b(n) }; }; } ///////////////////////// // // Formatting // ///////////////////////// /** * factory to create rounding functions with arbitrary precision */ var roundN = function(decimals) { return function(val) { if (isNaN(val)) return val; try { return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals); } catch (e) { return val; } }; }; /** * returns rgb string: rgb(r,g,b) */ var rgbToString = function(_a, round, decimals) { var r = _a.r, g = _a.g, b = _a.b; if (round === void 0) { round = false; } if (decimals === void 0) { decimals = 2; } if (round) { var rounder = roundN(decimals); return "rgb(" + rounder(r) + "," + rounder(g) + "," + rounder(b) + ")"; } return "rgb(" + r + "," + g + "," + b + ")"; }; return rgbFactory; }48:[] 44:{"id":"b2b6624f2171320a","slug":"rgb-factory","title":"RGB Factory","thumbnail":"99b2c10cb7ba55fc500ff724d26114fdd7c5844ccb17c913d55f0bd1030823f3","access_level":"public","create_time":"$D2019-11-25T01:03:26.544Z","update_time":"$D2020-03-08T20:24:41.944Z","view_time":null,"first_public_time":"$D2019-11-25T01:29:06.549Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0859e816ebbc8abe","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":"starter_2024","bio":"Just a human with a passion for all things JavaScript, web accessibility, and well-tested software.","following":false},"version":49,"publish_version":49,"role":null,"authored":false,"authors":[{"type":"individual","id":"79ba5b95753ac93a","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":null,"bio":"Just a human with a passion for all things JavaScript, web accessibility, and well-tested software.","following":false}],"members":[{"type":"individual","id":"79ba5b95753ac93a","login":"ericyd","name":"Eric Yancey Dauenhauer","avatar_url":"https://avatars-next.observableusercontent.com/78be3a44c98f42079131223ddec6a977e2d03c38d723ca5b06c06fd164b0c2a1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"RGB Factory","cells":[{"id":0,"value":"md`# RGB Factory\n\nAn exploration of color generation\n\n[Reference gist](https://gist.github.com/ericyd/d685a9ee0cadb7422d8b839febb6ba6b)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart1 = {\n const parent = document.createElement('div')\n const parentStyle = `\n display: flex;\n `\n\n const childStyle = hex => (`\n width: 10px;\n height: 100px;\n display: block;\n background-color: ${hex};\n `)\n\n parent.setAttribute('style', parentStyle)\n\n const rgb = rgbFactory()\n\n for (let i = 0; i < 100; i++) {\n const hex = rgbToHex(rgb(i))\n const child = document.createElement('div')\n child.setAttribute('style', childStyle(hex))\n parent.appendChild(child)\n }\n\n return parent\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"chart2 = {\n const parent = document.createElement('div')\n const parentStyle = `\n display: flex;\n `\n\n const childStyle = hex => (`\n width: 10px;\n height: 100px;\n display: block;\n background-color: ${hex};\n `)\n\n parent.setAttribute('style', parentStyle)\n\n const rgb = rgbFactory({saturationMin: 0, saturationMax: 255})\n\n for (let i = 0; i < 100; i++) {\n const hex = rgbToHex(rgb(i))\n const child = document.createElement('div')\n child.setAttribute('style', childStyle(hex))\n parent.appendChild(child)\n }\n\n return parent\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"chart3 = {\n const parent = document.createElement('div')\n const parentStyle = `\n display: flex;\n `\n\n const childStyle = hex => (`\n width: 10px;\n height: 100px;\n display: block;\n background-color: ${hex};\n `)\n\n parent.setAttribute('style', parentStyle)\n\n const rgb = rgbFactory({saturationMin: 50, saturationMax: 150})\n\n for (let i = 0; i < 100; i++) {\n const hex = rgbToHex(rgb(i))\n const child = document.createElement('div')\n child.setAttribute('style', childStyle(hex))\n parent.appendChild(child)\n }\n\n return parent\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"chart4 = {\n const parent = document.createElement('div')\n const parentStyle = `\n display: flex;\n `\n\n const childStyle = hex => (`\n width: 10px;\n height: 100px;\n display: block;\n background-color: ${hex};\n `)\n\n parent.setAttribute('style', parentStyle)\n\n const rgb = rgbFactory({saturationMin: 150, saturationMax: 255})\n\n for (let i = 0; i < 100; i++) {\n const hex = rgbToHex(rgb(i))\n const child = document.createElement('div')\n child.setAttribute('style', childStyle(hex))\n parent.appendChild(child)\n }\n\n return parent\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"rgbToHex = {\n /**\n * returns hex representation of number\n */\n var toHex = function(value) {\n if (value > 255 || value < 0) {\n throw new Error(\n \"Please use an 8-bit value. \" + value + \" is outside [0,255]\"\n );\n }\n var hex = Math.round(value).toString(16);\n if (hex.length === 1) return \"0\" + hex;\n return hex;\n };\n /**\n * returns hex string: #HHHHHH\n */\n var rgbToHex = function(_a) {\n var r = _a.r,\n g = _a.g,\n b = _a.b;\n return [\"#\", toHex(r), toHex(g), toHex(b)].join(\"\");\n };\n return rgbToHex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"