2c:null 2d:["$","title",null,{"children":"256 Color Selector | Zhouheng (Jeffrey) Sun | Observable"}] 32:[] 30:{"id":"249b8f29678ee931","slug":"256-color-selector","title":"256 Color Selector","thumbnail":"dc270499e328a60bce65c72fd06010b953c422732daa53216574094932c7de11","access_level":"public","create_time":"$D2018-03-09T09:14:07.253Z","update_time":"$D2018-03-14T00:00:52.435Z","view_time":null,"first_public_time":"$D2019-10-02T10:10:30.351Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"dd97d788d86e95f8","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":"starter_2024"},"version":680,"publish_version":680,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null}],"members":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"256 Color Selector","cells":[{"id":0,"value":"md`# 256 Color Selector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Here are all the 256 colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"{\n let allColors = Array(256).fill(0).map( (_, i) => [7 & (i >> 5), 7 & (i >> 2), i & 3] )\n console.log(allColors[158].map(x => x.toString(16)).join(\" \"))\n let canShow = (i) => {\n let x = allColors[i] \n let s = x[0] + x[1] + x[2] * 2\n return (s > 7) ? \"#111\" : ( (s > 4) ? \"#fff\" : \"#ccc\")\n \n }\n \n let colorBlock = (color, i) => html`

${allColors[i].map(x => x.toString(16)).join(\"\")}

`\n let colorBlocks = allColors.map(x => arr2hex(x)).map(colorBlock)\n\n return html`

${colorBlocks}

`\n return html`

${colors.map(colorBlock)}

`\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"colors = {d3.interpolateCubehelix = d3_interpolateCubehelix(1);\n let dm = d3.scaleLinear()\n .range([d3.hsl(300, .5, 0), d3.hsl(-240, .5, 1)])\n .interpolate(d3.interpolateCubehelix);\n\n let rb = dm.domain([0, .5, 1])\n .range([\n d3.hsl(-100, 1.5, 0.95),\n d3.hsl( 80, 1.5, 0.94),\n d3.hsl( 260, 1.5, 0.93)\n ])\n let L = 300\n let colors = Array(L+1).fill(0).map((x, i) => rb( 1/L * i).toString())\n colors = colors.map(x => sugg(x))\n colors = colors.map(y => Array.from(y))\n colors = colors.map(y => y.map(y => +y))\n colors = colors.map(y => y.map\n\t((x, i) => {\n let s = \"0\" + Math.round(coeff[i](x)).toString(16)\n s = s.slice(-2)\n return s\n }).join(\"\") )\n colors = Object.keys(colors.reduce( (dict, x) => {\n \tif (! (x in dict)) dict[x] = 1;\n \tconsole.log(x, dict)\n \treturn dict;\n \t}, Object.create({})) )\n return colors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"i = {\n let x = 0\n let c = 0\n while (c++ < 100000) {\n yield Promises.tick(500, x)\n x++\n \tif (x >= 7) x = 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":" function d3_interpolateCubehelix(γ) {\n return function(a, b) {\n a = d3.hsl(a);\n b = d3.hsl(b);\nvar radians = Math.PI / 180;\n var ah = (a.h + 120) * radians,\n bh = (b.h + 120) * radians - ah,\n as = a.s,\n bs = b.s - as,\n al = a.l,\n bl = b.l - al;\n\n if (isNaN(bs)) bs = 0, as = isNaN(as) ? b.s : as;\n if (isNaN(bh)) bh = 0, ah = isNaN(ah) ? b.h : ah;\n function hex(v) {\n var s = (v = v <= 0 ? 0 : v >= 1 ? 255 : v * 255 | 0).toString(16);\n return v < 0x10 ? \"0\" + s : s;\n }\n return function(t) {\n var h = ah + bh * t,\n l = Math.pow(al + bl * t, γ),\n a = (as + bs * t) * l * (1 - l),\n cosh = Math.cos(h),\n sinh = Math.sin(h);\n return \"#\"\n + hex(l + a * (-0.14861 * cosh + 1.78277 * sinh))\n + hex(l + a * (-0.29227 * cosh - 0.90649 * sinh))\n + hex(l + a * (+1.97294 * cosh));\n };\n };\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"inputs = (configs) => {\n let divs = configs.map(input_one)\n let v = Array(divs.length)\n \n divs.forEach( (div, i) => {\n let update = () => v[i] = div.value;\n div.addEventListener(\"input\", update);\n update();\n })\n console.log(v)\n let dom = html`

${divs}

`\n dom.value = v\n return dom\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"input_one = (config) => {\n let input = html``\n Object.keys(config.attr).forEach( \n (key) => input.setAttribute(key, config.attr[key]))\n \n let output = html` `\n let div = html`

${input} ${output}

`\n let update = () => { div.value = output.textContent = isNaN(input.value) ? input.value : +input.value; div.dispatchEvent(new CustomEvent(\"input\")); }\n input.oninput = update;\n update();\n //div.appendChild(input)\n //div.appendChild(output)\n return div\n}\n\t\t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof slider = inputs([\n {type: 'range', attr: {min: 0, max:7, value:0}}, \n {type: 'range', attr: {min: 0, max:7, value:0}}, \n{type: 'range', attr: {min: 0, max:3, value:0}}, \n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof slider1 = inputs([\n {type: 'range', attr: {min: 0, max:7, value:0}}, \n {type: 'range', attr: {min: 0, max:7, value:0}}, \n{type: 'range', attr: {min: 0, max:3, value:0}}, \n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof slider2 = inputs([\n {type: 'range', attr: {min: 0, max:7, value:0}}, \n {type: 'range', attr: {min: 0, max:7, value:0}}, \n{type: 'range', attr: {min: 0, max:3, value:0}}, \n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof hex_input = inputs([{type:'text', attr:{style: 'width: 100px'}}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"rc = {\n let binaryof = {0: '0', 1: '1', 2: '10', 3: '11', 4: '100', 5: '101', 6: '110', 7: '111'}\n let rc = colors.map(x => sugg(\"#\"+x))\n rc = rc.map(s => Array.from(s).map(x => binaryof[x]).join(\"\")) //.join(\"\"))\n return rc\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"rc.concat(\"11111111\").map( (v, k) => `${k}: background = 8'b${v}; // ${colors[k] || 'ffffff'}`).join('\\n')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"suggestion = sugg(hex_input[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"sugg = (x) => {\n let vals = []\n let hex = x\n if (typeof hex == \"string\") {\n if (hex[0] == \"r\") {\n vals = hex.slice(4)\n vals = vals.slice(0, vals.length - 1).split(\",\").map(x => +(x.trim()))\n }\n else hex = +(\"0x\" + hex.slice(1))\n }\n if (vals.length == 0) vals = [255 & (hex >> 16), 255 & (hex >> 8), (255 & hex)]\n console.log(hex, vals)\n\n let mapper = [8, 8, 4].map(x => d3.scaleLinear().domain([0, 255]).range([0, x - 1]))\n return vals.map( (x, i) => Math.round(mapper[i](x))).join(\"\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"{\n let W = 150, H = 150;\n let svg = d3.select(DOM.svg(W, H))\n \n let diamond = (w, h) => [ [w, 0], [0, h], [-w, 0], [0, -h], [w, 0] ] \n let left = (w, h, shift) => [[ 0, 0], [0, h], [-w, h - shift], [-w, -shift], [0, 0] ] \n\n svg.append(\"rect\").attr(\"x\", 0).attr(\"y\", 0).attr(\"width\", 150).attr(\"height\", 150).attr(\"fill\", \"#\"+colors[i])\n\n let poly = (points, translate) => (g) => \n \tg.attr(\"points\", points.map(point => point.join(\",\")).join(\" \")) \n .attr(\"transform\", `translate(${translate.join(\",\")})`)\n svg.append(\"polygon\")\n \t.attr(\"fill\", colorcode)\n \t.call(poly(diamond(40, 20), [W * 0.5, H * 0.3] ))\n .clone()\n \t.attr(\"fill\", colorcode1)\n\n \t.call(poly(left(40, 50, 20), [W * 0.5, H * 0.3 + 20 ]))\n \t.clone()\n \t.attr(\"fill\", colorcode2)\n\n .call(poly(left(40, 50, -20), [W * 0.5 + 40, H * 0.3 ]))\n \n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"colorcode = \n \"#\" +slider.map( (x, i) => (\"0\" + Math.round(coeff[i](x)).toString(16)).slice(-2)).join(\"\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"ay(3) [\n 0: \"10111100\"\n 1: \"10010100\"\n 2: \"10111000\"\n]\n\nArray(3) [\n 0: \"11111000\"\n 1: \"10010110\"\n 2: \"11101100\"\n] -- use this","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"coeff = [8, 8, 4].map( x => d3.scaleLinear().domain([0, x - 1]).range([0, 255]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"arr2hex = g => g.map((x, i) => (\"0\" + Math.round(coeff[i](x)).toString(16)).slice(-2)).join(\"\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"colorcode1 = \n \"#\" +slider1.map( (x, i) => (\"0\" + Math.round(coeff[i](x)).toString(16)).slice(-2)).join(\"\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"colorcode2 = \"#\" + arr2hex(slider2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"{\n let transform = (x, len=3) => {\n let bs = \"\"\n let hist = [x]\n while (x > 0) {\n bs += x % 2\n x = Math.floor(x / 2)\n hist.push(x)\n }\n if (bs.length > len) return \"ERROR on \" + hist\n while (bs.length < len) bs += \"0\"\n return Array.from(bs).reverse().join(\"\")\n }\n \n return [slider, slider1, slider2].map(x => \n x.map( (y, i) => transform(y, (i == 2) ? 2 : 3)).join(\"\"))\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"