2b:null 2c:["$","title",null,{"children":"RYB color wheel | gunggmee | Observable"}] 31:T492,randomRects = { const w = width const h = w * 0.5 const ctx = DOM.context2d(w, h) const canvas = ctx.canvas const rc = rough.canvas(canvas); const fillStyles = ['hachure', 'zigzag', 'cross-hatch'] const colors = [...ittenSamples, '#FFF'] ctx.translate(w * 0.5, h * 0.5) let i = 0; while(true) { const x = (Math.random() - 0.5) * w const y = (Math.random() - 0.5) * h const width = Math.log(Math.random() + 1.5) * h const height = Math.log(Math.random() + 1.5) * h const fill = colors[Math.random() * colors.length|0] const fillWeight = Math.random() * 3|0 const fillStyle = fillStyles[Math.random() * fillStyles.length|0] ctx.rotate(Math.random() * Math.PI * 2) let node = rc.rectangle( x, y, width, height, { bowing: 0.8, roughness: 3, fill, fillWeight, fillStyle, } ) if(i > 20) { const header = document.querySelector(".inner_header") if(header) { header.style.backgroundImage = "url(" + canvas.toDataURL("image/jpeg") + ")" } yield canvas await Promises.delay(500) } i++ } }32:T56d,renderColorHarmonies = { const w = Math.min(width, 600) const h = w const arc = d3.arc() .innerRadius(w * 0.35) .outerRadius(w * 0.45) const arcComplementary = d3.arc() .innerRadius(w * 0.15) .outerRadius(w * 0.46) const arcAnalogous = d3.arc() .innerRadius(w * 0.20) .outerRadius(w * 0.46) const arcTriad = d3.arc() .innerRadius(w * 0.25) .outerRadius(w * 0.46) const arcTetrad = d3.arc() .innerRadius(w * 0.30) .outerRadius(w * 0.46) const pie = d3.pie() .padAngle(0.005) .value(360 / slices) const arcs = pie(d3.range(slices)) const highlights = new Set(Object.values(harmonies).flat()) d3.select(colorHarmonies).select('g.arcs').selectAll('path.arc').data(arcs).join('path') .on('touchstart', (e) => e.preventDefault()) .on('pointerenter', (e, d) => { mutable selectedIndex = d.index }) .attr('class', 'arc') .attr('stroke-width', 0) .attr('fill', (d, i) => scheme(i / slices)) .style('touch-action', 'none') .transition() .duration(100) .attr('d', (d, i) => { if(harmonies.complementary.indexOf(i) !== -1) return arcComplementary(d) if(harmonies.analogous.indexOf(i) !== -1) return arcAnalogous(d) if(harmonies.triad.indexOf(i) !== -1) return arcTriad(d) if(harmonies.tetrad.indexOf(i) !== -1) return arcTetrad(d) return arc(d) }) }33:Ta0d,ryb2rgb = { /** * Copied from https://github.com/bahamas10/ryb * * ryb2rgb, the motherload, convert a RYB array to RGB * * @param ryb {array} RYB values in the form of [0, 255, 0] * @param limit {int} [optional] max value of the color, defaults to 255 * @param magic {array} An array of magic colors to use in the color space interpolation * * returns an array of the RGB values */ const MAGIC_COLORS = [ [1, 1, 1], [1, 1, 0], [1, 0, 0], [1, 0.5, 0], [0.163, 0.373, 0.6], [0.0, 0.66, 0.2], [0.5, 0.0, 0.5], [0.2, 0.094, 0.0] ]; return (function() { // see http://threekings.tk/mirror/ryb_TR.pdf function cubicInt(t, A, B) { var weight = t * t * (3 - 2 * t); return A + weight * (B - A); } function getR(iR, iY, iB, magic) { magic = magic || MAGIC_COLORS; // red var x0 = cubicInt(iB, magic[0][0], magic[4][0]); var x1 = cubicInt(iB, magic[1][0], magic[5][0]); var x2 = cubicInt(iB, magic[2][0], magic[6][0]); var x3 = cubicInt(iB, magic[3][0], magic[7][0]); var y0 = cubicInt(iY, x0, x1); var y1 = cubicInt(iY, x2, x3); return cubicInt(iR, y0, y1); } function getG(iR, iY, iB, magic) { magic = magic || MAGIC_COLORS; // green var x0 = cubicInt(iB, magic[0][1], magic[4][1]); var x1 = cubicInt(iB, magic[1][1], magic[5][1]); var x2 = cubicInt(iB, magic[2][1], magic[6][1]); var x3 = cubicInt(iB, magic[3][1], magic[7][1]); var y0 = cubicInt(iY, x0, x1); var y1 = cubicInt(iY, x2, x3); return cubicInt(iR, y0, y1); } function getB(iR, iY, iB, magic) { magic = magic || MAGIC_COLORS; // blue var x0 = cubicInt(iB, magic[0][2], magic[4][2]); var x1 = cubicInt(iB, magic[1][2], magic[5][2]); var x2 = cubicInt(iB, magic[2][2], magic[6][2]); var x3 = cubicInt(iB, magic[3][2], magic[7][2]); var y0 = cubicInt(iY, x0, x1); var y1 = cubicInt(iY, x2, x3); return cubicInt(iR, y0, y1); } function ryb2rgb(color, limit, magic) { limit = limit || 255; magic = magic || MAGIC_COLORS; var R = color[0] / limit; var Y = color[1] / limit; var B = color[2] / limit; var R1 = getR(R, Y, B, magic); var G1 = getG(R, Y, B, magic); var B1 = getB(R, Y, B, magic); return [ Math.ceil(R1 * limit), Math.ceil(G1 * limit), Math.ceil(B1 * limit) ]; } return ryb2rgb; })(); }34:[] 2f:{"id":"b9d06a7c7fe29003","slug":"ryb-color-wheel","title":"RYB color wheel","thumbnail":"2d6ff81d17e7377acf8881c303bae580ef8cadb104ce63a5455f54471a94db4a","access_level":"public","create_time":"$D2020-10-22T03:19:17.182Z","update_time":"$D2026-07-02T05:50:15.391Z","view_time":null,"first_public_time":"$D2020-10-22T03:27:11.131Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"4b5aa5dc8104f0a1","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":"starter_2024"},"version":1454,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"809044e75a7bab18","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":null}],"members":[{"type":"individual","id":"809044e75a7bab18","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"RYB color wheel","cells":[{"id":0,"value":"md`# RYB color wheel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`A set of colors from standard RGB color space:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"rgbChips = chips(d3.range(12).map(d => rgb(d / 12)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md`The following is a set of colors suggested by Johannes Itten:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"ittenChips = chips(ittenSamples)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"md`This one is a set of colors generated using the algorithm suggested by N. Gossett and B. Chen:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"ngbcChips = chips(d3.range(12).map(d => ngbc(d / 12)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"md`There are notable gaps between the colors since the algorithm uses slightly different *magic colors* from Itten's secondary colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"ittenVsAlgorithm1 = {\n const colors0 = ittenSamples\n const colors1 = d3.range(12).map(d => d3.color(ngbc(d / 12)))\n\n return html`\n

${chips(colors0)}

${chips(colors1)}

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"md`If we use Itten's colors as the magic colors, the algorithm generate quite accurate tertiary colors. The following shows a comparision between Itten's 12 colors and generated colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"ittenVsAlgorithm2 = {\n const colors0 = ittenSamples\n const colors1 = d3.range(12).map(d => d3.color(itten(d / 12)))\n\n return html`\n

${chips(colors0)}

${chips(colors1)}

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`Comparision between the RGB and RYB wheels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"wheelComparision = {\n const n = 3\n const height = width * 0.45\n const ctx = DOM.context2d(width, height)\n wheel(ctx, width * 0.25, height * 0.5, height * 0.05, height * 0.18, rgb, n * 1, 0, 0, true)\n wheel(ctx, width * 0.25, height * 0.5, height * 0.20, height * 0.33, rgb, n * 2, 0, 0, true)\n wheel(ctx, width * 0.25, height * 0.5, height * 0.35, height * 0.48, rgb, n * 4, 0, 0, true)\n wheel(ctx, width * 0.75, height * 0.5, height * 0.05, height * 0.18, itten, n * 1, 0, 0, true)\n wheel(ctx, width * 0.75, height * 0.5, height * 0.20, height * 0.33, itten, n * 2, 0, 0, true)\n wheel(ctx, width * 0.75, height * 0.5, height * 0.35, height * 0.48, itten, n * 4, 0, 0, true)\n const canvas = ctx.canvas\n canvas.style.width = \"100%\";\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`Interpolations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"rgbRamp = ramp(rgb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"ittenRamp = ramp(itten)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"ngbcRamp = ramp(ngbc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`Spiral of Itten's RYB color wheel, just for fun:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"ittenSpiral = {\n const w = width\n const h = width\n const ctx = DOM.context2d(w, h)\n const stacks = 16\n const n = stacks * 2\n \n for(let i = 0; i < stacks; i++) {\n const r0 = (0.05 + i / stacks * 0.3) * h\n const r1 = (0.15 + i / stacks * 0.3) * h\n const angle = (i / stacks * 360)\n wheel(ctx, w * 0.5, h * 0.5, r0, r1, itten, n, 0, angle)\n }\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"md`Harmonic color selector:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"viewof slices = slider({\n title: \"Slices\",\n min: 12, \n max: 60, \n step: 12\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"viewof schemeName = radio({\n title: 'Color scheme',\n options: [\n { label: 'RGB', value: 'rgb' },\n { label: 'RYB', value: 'ryb' },\n ],\n value: 'ryb'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"scheme = schemeName === \"rgb\" ? rgb : itten","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"colorHarmonies = {\n const w = Math.min(width, 600)\n const h = w\n const root = d3.select(DOM.svg(w, h))\n root.append('g')\n .attr('class', 'arcs')\n .attr('transform', `translate(${w * 0.5}, ${h * 0.5}) rotate(${360 / slices * -0.5})`)\n return root.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`Selected harmonic colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"hamoniousChips = {\n const colors = [\n harmonies.complementary.map(d => scheme(d / slices)),\n null,\n harmonies.analogous.map(d => scheme(d / slices)),\n null,\n harmonies.triad.map(d => scheme(d / slices)),\n null,\n harmonies.tetrad.map(d => scheme(d / slices)),\n ].flat()\n return chips(colors)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"md`Itten color space`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"ittenColorSpace = {\n while (true) {\n cubes.forEach(cube => {\n cube.rotation.x += 0.013\n cube.rotation.y += 0.019\n cube.rotation.z += 0.029\n })\n\n renderer.render(scene, camera);\n await Promises.delay(50);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"cubes = {\n const steps = 8\n const scale = d3.scaleBand()\n .domain(d3.range(steps))\n .range([-8, 8])\n .paddingInner(0.5)\n\n const size = scale.bandwidth()\n const cubes = []\n for(let x = 0; x < steps; x++) {\n for(let y = 0; y < steps; y++) {\n for(let z = 0; z < steps; z++) {\n const red = x / (steps + 1) * 255\n const yellow = y / (steps + 1) * 255\n const blue = z / (steps + 1) * 255\n\n const color = d3.rgb(...ryb2rgb([red, yellow, blue], 255, ittenMagic))\n const geo = new THREE.BoxGeometry(size, size, size)\n const mat = new THREE.MeshBasicMaterial({color: color.toString()})\n const cube = new THREE.Mesh(geo, mat)\n\n cube.position.x = scale(x)\n cube.position.y = scale(y)\n cube.position.z = scale(z)\n scene.add(cube)\n cubes.push(cube)\n }\n }\n }\n return cubes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"scene = {\n const scene = new THREE.Scene()\n scene.background = new THREE.Color('#FFFFFF')\n return scene\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true})\n \n renderer.setSize(width, width / 2);\n renderer.setPixelRatio(devicePixelRatio);\n \n invalidation.then(() => renderer.dispose());\n \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"camera = {\n const camera = new THREE.PerspectiveCamera(30, 2, 0.1, 60);\n camera.position.set(30, 20, 35);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.minDistance = 3;\n controls.maxDistance = 50;\n \n const redraw = () => renderer.render(scene, camera);\n \n controls.addEventListener(\"change\", redraw);\n \n invalidation.then(() => {\n controls.removeEventListener(\"change\", redraw);\n controls.dispose();\n });\n \n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"md`## Functions and variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"mutable selectedIndex = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"harmonies = {\n const step = slices / 12\n return {\n complementary: cap([selectedIndex, slices / 2 + selectedIndex]),\n analogous: cap([selectedIndex, selectedIndex - step, selectedIndex + step]),\n triad: cap([selectedIndex, selectedIndex + 1 * slices / 3, selectedIndex + 2 * slices / 3]),\n tetrad: cap([selectedIndex, selectedIndex + 1 * slices / 4, selectedIndex + 2 * slices / 4, selectedIndex + 3 * slices / 4]),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"chips = (colors, forceWidth, highlightIndex, callback) => {\n const w = forceWidth ?? width\n const h = 40\n const x = d3.scaleBand()\n .domain(d3.range(colors.length))\n .rangeRound([2, w - 2])\n\n const root = d3.select(DOM.svg(w, h))\n root.selectAll('rect').data(colors).join('rect')\n .style('cursor', 'pointer')\n .on('click', async (e, d) => {\n if(callback) callback(d)\n await navigator.clipboard.writeText(d3.color(d).formatHex())\n })\n .attr('x', (d, i) => x(i) + 2)\n .attr('y', 2)\n .attr('width', x.bandwidth() - 4)\n .attr('height', h - 4)\n .attr('fill', d => d || 'none')\n .attr('stroke', (d, i) => i === highlightIndex ? '#000000' : 'transparent')\n .attr('stroke-width', 1.5)\n return root.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"miniChips(['red', 'green', 'blue'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"miniChips = (colors) => {\n const frags = colors.map(c => {\n return html``\n })\n return html`${frags}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function wheel(ctx, x, y, r0, r1, cspace, slices, pad, angle, stroke) {\n ctx.save()\n ctx.translate(x, y)\n ctx.rotate(-Math.PI / slices - angle / 360 * Math.PI * 2)\n const arc = d3.arc()\n .innerRadius(r0)\n .outerRadius(r1)\n .context(ctx)\n const pie = d3.pie()\n .padAngle(pad)\n .value(360 / slices)\n const arcs = pie(d3.range(slices))\n arcs.forEach(i => {\n ctx.strokeStyle = \"#FFF\";\n ctx.fillStyle = cspace(i.data / slices)\n ctx.beginPath()\n arc(i)\n ctx.fill()\n if(stroke) ctx.stroke()\n })\n ctx.restore()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"rgb = t => `hsl(${t * 360},100%,50%)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"ittenMagic = {\n const ittenRgb = ittenSamples.map(d => [d.r / 255, d.g / 255, d.b / 255])\n return [\n [1, 1, 1],\n ittenRgb[4],\n ittenRgb[0],\n ittenRgb[2],\n ittenRgb[8],\n ittenRgb[6],\n ittenRgb[10],\n [0.2, 0.094, 0.0]\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"itten = {\n const samples = rainbow(1000);\n const f = t => {\n const ryb = samples[(1 - t) * (samples.length - 1)|0]\n return d3.rgb(...ryb2rgb(ryb, 255, ittenMagic)).toString()\n }\n return f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"ngbc = {\n const samples = rainbow(1000);\n const f = t => {\n const ryb = samples[(1 - t) * (samples.length - 1)|0]\n return d3.rgb(...ryb2rgb(ryb)).toString()\n }\n return f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"cap = n => n.map(d => (d + slices) % slices)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"ittenSamples = [\n '#e42421', '#ea6120', '#f18e1c', '#fdc60e', '#f4e502', '#8dbb26',\n '#038e5b', '#0797bb', '#2a70b0', '#444e99', '#6d3a8a', '#c4027c'\n].map(d3.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"ittenSamples.map(d => {\n const {r, g, b} = d3.color(d)\n return [r / 255, g / 255, b / 255]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`## Algorithm suggested by N. Gossett and B. Chen\n\nSee http://bahamas10.github.io/ryb/assets/ryb.pdf\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"rainbow = function(size) {\n /**\n * Copied from https://github.com/bahamas10/ryb\n */\n const numcolors = 3;\n const colors = [255, 0, 0];\n\n // generate a rainbow for all colors\n let addingcolor = true; // adding or subtracting color\n const r = [];\n for (let color = 0; color < numcolors * 2; color++) {\n // color will loop twice, so grab the lower digit\n const thecolor = (color + 2) % numcolors;\n\n // loop the possible values\n for (let i = 0; i < 256; i++) {\n // set the color to i if adding, and 255 -i if subtracting\n colors[thecolor] = addingcolor ? i : 255 - i;\n\n // push a copy of the array\n r.push(colors.slice(0));\n }\n\n // flip the bit\n addingcolor = !addingcolor;\n }\n\n // only push what the user wanted, this si kinda gross\n const ret = [];\n const step = r.length / (size || r.length);\n for (let i = 0; Math.ceil(i) < r.length; i += step) {\n ret.push((r[Math.round(i)] || r[Math.floor(i)]).slice(0));\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`## Other dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function ramp(color, n = 512) {\n // Copied from https://observablehq.com/@mbostock/color-ramp for a sake of loading performance\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.width = \"100%\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@v6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"import {radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"rough = (await import('https://unpkg.com/roughjs@4.3.1/bundled/rough.esm.js')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"