30:Tc23,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"},{"id":177,"value":"html`

Color harmony pattern

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"wheel = colorWheel(bins, { hueShift })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":204,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"wheel.setPlaces(\n harmony[harmonyType](bins, firstColor, separation),\n !(harmonyType == \"complementary\" || harmonyType == \"analogous\")\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"## Harmonies","pinned":false,"hidden":false,"mode":"md"},{"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\n .range(n)\n .map((i) => `hsl(${(i / n) * 360 + hueShiftAngle},${sat}%,${lum}%)`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":283,"value":"paletteDisplay(\n harmonicColors(\"steelblue\", \"split-analogous\", { separation: 1 })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":270,"value":"d3.hsl(\"green\").h","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"## Inputs","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":106,"value":"viewof hueShift = Inputs.range([-0.5, 0.5], { step: 0.05, label: \"Hue Shift\" })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":160,"value":"viewof bins = Inputs.select([12, 24, 48], { label: \"color bins\", value: 24 })","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}