29:null 2a:["$","title",null,{"children":"Color Harmonies In RBY | Claudio Esperança | Observable"}] 2f:Tca9,function colorWheel(n = 24, options = {}) { let { margin = 20, innerRadius = 100, outerRadius = 200, padAngle = 0.01, padRadius = 100, cornerRadius = 4 } = options; let arcGenerator = d3 .arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .padAngle(padAngle) .padRadius(padRadius) .cornerRadius(cornerRadius); let wc = wheelColors(); let arcData = d3.range(n).map((i) => ({ startAngle: ((i - 0.5) / n) * Math.PI * 2 + Math.PI / 2, endAngle: ((i + 0.5) / n) * Math.PI * 2 + Math.PI / 2, color: wc[i] })); let img = svg`

Color Wheel

${viewof bins}${viewof hueShift} ${viewof saturation} ${viewof luminosity} ${viewof background}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"html`

Color harmony pattern

${viewof harmonyType}\n${viewof firstColor}\n${viewof separation}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"wheel = colorWheel(bins, { hueShift })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"palette = wheel\n .getPalette(harmony[harmonyType](bins, firstColor, separation))\n .map((d) => d3.color(d).formatHex())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"wheel.setPlaces(\n harmony[harmonyType](bins, firstColor, separation),\n !(harmonyType == \"complementary\" || harmonyType == \"analogous\")\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"## Harmonies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"rbyHue = {\n const hueTable = [\"yellow\", \"orange\", \"red\", \"purple\", \"blue\", \"green\"];\n const degreeHue = [];\n for (let i = 0; i <= 360; i++) {\n let j = Math.floor(i / 60);\n let k = (i % 60) / 60;\n let hue1 = d3.hsl(hueTable[j]).h;\n let hue2 = d3.hsl(hueTable[(j + 1) % 6]).h;\n degreeHue[i] = hue1 * (1 - k) + hue2 * k;\n }\n return function rbyHue(angle) {\n let i = Math.floor((angle + 90) % 360);\n let h1 = degreeHue[i];\n let h2 = degreeHue[i + 1];\n let k = angle % 1;\n return h1 * (1 - k) + h2 * k;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"rbyColor = {\n const rbyTable = [\n \"#FE2712\",\n \"#FC600A\",\n \"#FB9902\",\n \"#FCCC1A\",\n \"#FEFE33\",\n \"#B2D732\",\n \"#66B032\",\n \"#347C98\",\n \"#0247FE\",\n \"#4424D6\",\n \"#8601AF\",\n \"#C21460\"\n ];\n const degreeColor = [];\n return function (i) {\n let j = Math.floor(i / 30);\n let k = (i % 30) / 30;\n let color1 = rbyTable[j];\n let color2 = rbyTable[(j + 1) % 12];\n return d3.interpolateLab(color1, color2)(k);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"function wheelColors(\n n = bins,\n hs = hueShift,\n sat = saturation,\n lum = luminosity\n) {\n const hueShiftAngle = (360 / n) * hs;\n return d3.range(n).map((i) => {\n const color = d3.hsl(rbyColor((i / n) * 360 + hueShiftAngle));\n color.l *= lum / 50;\n color.s *= sat / 100;\n return color.formatHex();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"//\n// Returns a harmonic palette given a seed color and a harmony scheme\n//\nfunction harmonicColors(firstColor, harmonyType = \"square\", options = {}) {\n let { bins = 24, separation = 1 } = options;\n let { h, s, l } = d3.hsl(firstColor);\n let sectorAngle = 360 / bins;\n let i = Math.round(h / sectorAngle);\n let hs = (h - i * sectorAngle) / sectorAngle;\n let wheel = wheelColors(bins, hs, s * 100, l * 100);\n return harmony[harmonyType](bins, i, separation).map((j) => wheel[j]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"paletteDisplay(\n harmonicColors(\"steelblue\", \"split-analogous\", { separation: 1 })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function paletteDisplay(palette, options = {}) {\n let { width = 200, height = 50 } = options;\n let ctx = DOM.context2d(width, height, 1);\n let cellSize = width / palette.length;\n palette.forEach((color, i) => {\n ctx.fillStyle = color;\n ctx.fillRect(i * cellSize, 0, cellSize, height);\n });\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"d3.hsl(\"green\").h","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"## Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"viewof harmonyType = Inputs.radio(Object.keys(harmony), {\n label: \"Harmony type\",\n value: Object.keys(harmony)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof firstColor = Inputs.range([0, bins - 1], {\n label: \"first color\",\n step: 1,\n value: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof hueShift = Inputs.range([-0.5, 0.5], { step: 0.05, label: \"Hue Shift\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof saturation = Inputs.range([0, 100], {\n step: 1,\n label: \"Saturation\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof luminosity = Inputs.range([0, 100], {\n step: 1,\n value: 50,\n label: \"Luminosity\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof background = {\n let inp = html``;\n let div = html``;\n let cb = (e) => {\n div.value = inp.value;\n div.dispatchEvent(new Event(\"input\"));\n };\n inp.oninput = cb;\n cb();\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof bins = Inputs.select([12, 24, 48], { label: \"color bins\", value: 24 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof separation = Inputs.range([1, bins], {\n label: \"separation\",\n step: 1,\n value: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"