2c:null 2d:["$","title",null,{"children":"Color picker | Torben Jansen | Observable"}] 32:T457,{ const canvas = DOM.canvas(width, 1); const context = canvas.getContext("2d"); canvas.style.width = `${width}px`; canvas.style.height = `${Math.round(width / 16)}px`; let mousedown = false; context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = event => { if (!mousedown) return; const rect = event.target.getBoundingClientRect(); render(event.clientX - rect.left); }; context.canvas.onmouseup = event => { mousedown = false; }; function render(x) { x = Math.min(x, width) context.clearRect(0, 0, width, 1); for (let l = 0; l < width; ++l) { context.fillStyle = l === x ? isReadable(contrastRatio(luminance(createRgb(xy[0], xy[1], l / width)), 0)) ? "black" : "white" : `hsl(${viewof hsl.value[0]}, ${viewof hsl.value[1] * 100}%, ${l / width * 100}%)`; context.fillRect(l, 0, 1, 1); } viewof hsl.value = [viewof hsl.value[0], viewof hsl.value[1], x / width]; } render(viewof hsl.value[2] * width); return context.canvas; }33:[] 30:{"id":"d8c4fbfd2719b83a","slug":"yes-mum-its-a-color-picker","title":"Color picker","thumbnail":"614f8b41114fd8a9c679dd130a956e437b0249e81924b90d89af79ab463fd860","access_level":"public","create_time":"$D2018-10-30T21:00:56.897Z","update_time":"$D2020-05-07T08:09:50.444Z","view_time":null,"first_public_time":"$D2018-10-31T10:07:59.787Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":833,"publish_version":833,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color picker","cells":[{"id":0,"value":"md`# Color picker\n\nDriving down memory lane: my first project when I started programming was to write a color picker. Here's a recreation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof xy = {\n const context = DOM.context2d(width, height, 1);\n let mousedown = false;\n\n context.canvas.onmousedown = event => {\n mousedown = true;\n context.canvas.onmousemove(event);\n };\n\n context.canvas.onmousemove = event => {\n if (!mousedown) return;\n const rect = event.target.getBoundingClientRect();\n render(event.clientX - rect.left, event.clientY - rect.top);\n context.canvas.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n context.canvas.onmouseup = event => {\n mousedown = false;\n };\n \n function render(x, y) {\n context.clearRect(0, 0, width, height);\n context.putImageData(imageData, 0, 0);\n \n context.beginPath();\n context.arc(x, y, 4, 0, 2 * Math.PI);\n context.stroke();\n \n viewof hsl.value = [interpolateHue(x / width), 1 - y / height, viewof hsl.value[2]];\n context.canvas.value = [x, y];\n }\n \n render(width / 2, height / 2);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof color = {\n const rgb = hsl2rgb(hsl);\n const hex = rgb2hex(rgb);\n const div = html`\n

\n ${hex}\n

`\n div.value = hex;\n return div;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"height = Math.round(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"imageData = {\n const data = new Uint8ClampedArray(width * height * 4);\n for (let y = 0, index = -1; y < height; ++y) {\n for (let x = 0; x < width; ++x) {\n const [r, g, b] = createRgb(x, y);\n data[++index] = r || 0;\n data[++index] = g || 0;\n data[++index] = b || 0;\n data[++index] = 255;\n }\n }\n return new ImageData(data, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function createRgb(x, y, l = 0.5) {\n return hsl2rgb([\n interpolateHue(x / width),\n 1 - y / height,\n l\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"interpolateHue = lerp(0, 360)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function lerp(a, b) {\n return t => a * (1 - t) + b * t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction luminance([r, g, b]) {\n let R = r / 255,\n G = g / 255,\n B = b / 255;\n if (R <= 0.03928) R = R / 12.92; else R = Math.pow((R + 0.055) / 1.055, 2.4);\n if (G <= 0.03928) G = G / 12.92; else G = Math.pow((G + 0.055) / 1.055, 2.4);\n if (B <= 0.03928) B = B / 12.92; else B = Math.pow((B + 0.055) / 1.055, 2.4);\n return 0.2126 * R + 0.7152 * G + 0.0722 * B;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction contrastRatio(l1, l2) {\n if (l1 < l2) [l1, l2] = [l2, l1];\n return (l1 + 0.05) / (l2 + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction isReadable(contrastRatio) {\n return contrastRatio >= 4.5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"// https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL\nfunction hsl2rgb([h, s, l]) {\n const C = (1 - Math.abs(2 * l - 1)) * s,\n H = h / 60,\n X = C * (1 - Math.abs(H % 2 - 1)),\n m = l - C / 2;\n let rgb;\n switch(Math.floor(H)) {\n case 0: rgb = [C, X, 0]; break;\n case 1: rgb = [X, C, 0]; break;\n case 2: rgb = [0, C, X]; break;\n case 3: rgb = [0, X, C]; break;\n case 4: rgb = [X, 0, C]; break;\n case 5: rgb = [C, 0, X]; break;\n default: rgb = [0, 0, 0];\n }\n return rgb.map(v => Math.round((v + m) * 255));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"function rgb2hex([r, g, b]) {\n const i = r << 16 | g << 8 | b;\n return \"#\" + (\"000000\" + i.toString(16)).slice(-6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof hsl = new View([180, 0.5, 0.5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: { value: [], writable: true },\n _value: { value: value, writable: true }\n });\n }\n\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({ type: \"input\", value });\n }\n \n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"