2b:null 2c:["$","title",null,{"children":"Wheels in Colorspace | Christian Swinehart | Observable"}] 31:[] 2f:{"id":"1fb54e0146962615","slug":null,"title":"Wheels in Colorspace","thumbnail":"a4a798828b049de8bfe21f56a4395fcfc98f1ec9afa0900cc449fc9ac8bfb69c","access_level":"public","create_time":"$D2023-04-18T15:02:19.770Z","update_time":"$D2026-04-11T14:39:58.552Z","view_time":null,"first_public_time":"$D2023-04-18T15:02:19.770Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"76c9dc4fe63104d3","login":"samizdatco","name":"Christian Swinehart","avatar_url":"https://avatars-next.observableusercontent.com/7d892c168f0e4ce74b20e28b342c8e8668ce2af0a31fa11e7219416761f4e212","tier":"starter_2024"},"version":313,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"38edda25113d674d","login":"samizdatco","name":"Christian Swinehart","avatar_url":"https://avatars-next.observableusercontent.com/7d892c168f0e4ce74b20e28b342c8e8668ce2af0a31fa11e7219416761f4e212","tier":null}],"members":[{"type":"individual","id":"38edda25113d674d","login":"samizdatco","name":"Christian Swinehart","avatar_url":"https://avatars-next.observableusercontent.com/7d892c168f0e4ce74b20e28b342c8e8668ce2af0a31fa11e7219416761f4e212","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Wheels in Colorspace","cells":[{"id":0,"value":"# Wheels in Colorspace","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"viewof brightness = Inputs.range([1, 100], {value: 55, step: 1, label: \"Brightness\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof saturation = Inputs.range([1, 300], {value: 75, step: 1, label: \"Saturation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"{\n const toHSL = angle => `hsl(${angle}, ${saturation}%, ${brightness}%`,\n toHCT = angle => {\n let color = Material.HCT.from(angle, saturation, brightness)\n return Material.hexFromArgb(color.toInt())\n },\n toLCH = angle => {\n let color = chroma.hcl(angle, saturation, brightness)\n // let color = chroma.oklch(brightness/100, saturation/100, angle)\n return color\n }\n \n drawWheel(\"hsl\", width*.15, toHSL)\n drawWheel(\"hct\", width*.15, toHCT)\n drawWheel(\"lch\", width*.15, toLCH)\n\n drawSweep(\"hsl-sweep\", 100, toHSL)\n drawSweep(\"hct-sweep\", 100, toHCT)\n drawSweep(\"lch-sweep\", 100, toLCH)\n \n return md`*Color spaces compared*`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function drawWheel(id, radius, setColor){\n let elt = document.getElementById(id),\n ctx = elt.getContext(\"2d\"),\n deltaT = radius/1500,\n theta = 0;\n \n elt.width = radius * 2 + 10\n elt.height = radius * 2 + 10\n\n \n ctx.save()\n ctx.translate(elt.width/2, elt.height/2)\n while (theta < 360){\n ctx.lineWidth = 1.5\n ctx.strokeStyle = setColor(theta/Math.PI * 180)\n ctx.beginPath()\n ctx.moveTo(0,0)\n ctx.lineTo(radius * Math.cos(theta), radius * Math.sin(theta))\n ctx.closePath()\n ctx.stroke()\n \n theta += deltaT\n }\n\n ctx.strokeStyle = 'white'\n ctx.lineWidth = 4\n ctx.beginPath()\n ctx.arc(0, 0, radius, 0, 2*Math.PI)\n ctx.stroke()\n\n ctx.fillStyle = 'white'\n ctx.beginPath()\n ctx.arc(0, 0, radius/4, 0, 2*Math.PI)\n ctx.fill()\n \n ctx.textAlign = 'center'\n ctx.font = '16px Helvetica'\n ctx.fillStyle = 'black'\n ctx.fillText(id.toUpperCase(), 1, 7)\n ctx.restore()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function drawSweep(id, height, setColor){\n let elt = document.getElementById(id),\n ctx = elt.getContext(\"2d\"),\n deltaT = 360/width,\n theta = 0;\n \n elt.width = width\n elt.height = height\n\n for (let x=0; x