44:["$","title",null,{"children":"Hue interpolation fixup | Dan Burzo | Observable"}] 4c:T5d9,{ let height = width / 3, cx = width / 2, cy = height / 2, r = Math.min(width, height) / 2 - 10; let clockwise = false; function position(angle) { return { x: cx + (angle !== undefined ? r * Math.cos(angle * (clockwise ? 1 : -1) / 180 * Math.PI) : 0), y: cy + (angle !== undefined ? r * Math.sin(angle * (clockwise ? 1 : -1) / 180 * Math.PI) : -50) }; } let current_angle = interpolator(t); let samples = culori.samples(data.length); let epsilon = 10e-3; let hidx = samples.findIndex(d => Math.abs(t - d) < epsilon); return html``; }4d:[] 48:{"id":"9f4d31f036e9af71","slug":"hue-interpolation-fixup","title":"Hue interpolation fixup","thumbnail":"7514cf78f8594e370c047e99a4dc77f2fdc77b0bb2c16bbc1c146232d74b29e2","access_level":"public","create_time":"$D2020-07-05T11:45:39.258Z","update_time":"$D2021-12-12T19:34:02.307Z","view_time":null,"first_public_time":"$D2020-07-05T14:02:47.977Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":"starter_2024","bio":"Tools for making things.","followed_by_you":false,"follows_you":false},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"bio":"Tools for making things.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"role":"editor"}],"comments":[{"id":"b75d0a1cd94cd60c","reply_to_id":null,"content":"requires version 0.20.1","create_time":"$D2021-12-12T13:49:07.843Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f3b83abc73dc2c8d","reply_to_id":"b75d0a1cd94cd60c","content":"Thanks Fabian. I've updated the method calls, and pinned the library to 2.x.x.","create_time":"$D2021-12-12T19:34:59.042Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"496ce6a89b187242","slug":"color-exploration","title":"Color","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"type":"notebook","body":{"titling":"auto","title":"Hue interpolation fixup","cells":[{"id":0,"value":"md`# Hue interpolation fixup`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`Exploring the effect of varous hue interpolation fixup methods, as described [in this CSSWG thread](https://github.com/w3c/csswg-drafts/issues/4735).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"html`

\n ${culori.samples(1000).map(interpolator).map(h => {\n let c = ramp_mode(h);\n return culori.formatHex(c);\n }).map(color => `

`)}\n

↓

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof tt = slider({\n min: 0, \n max: 1, \n step: 0.01,\n title: 'Animation step'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof data_input = text({\n title: \"Hues (comma-separated)\",\n value: '0, 340, 30, 10, 170'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"html`Data after fixup: [${fixed_data.join(', ')}]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof method_input = radio({\n title: 'Hue fixup method',\n options: [\n 'specified', \n 'shorter',\n 'longer',\n 'increasing',\n 'decreasing'\n ],\n value: 'specified'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof ramp_mode_input = radio({\n title: 'Color Space',\n options: ['hsl', 'hwb', 'lch'],\n value: 'hsl'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"ramp_mode = ({ \n 'hsl': h => ({ mode: 'hsl', h, s: .8, l: .5 }),\n 'hwb': h => ({ mode: 'hwb', h, w: 0, b: 0 }),\n 'lch': h => ({ mode: 'lch', h, l: 50, c: 80 })\n})[ramp_mode_input]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"t = tt;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"method = ({\n 'specified': data => data,\n 'shorter': hueShorter,\n 'longer': hueLonger,\n 'increasing': hueIncreasing,\n 'decreasing': hueDecreasing\n})[method_input];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"interpolator = culori.interpolatorLinear(method(data))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = data_input.trim().split(/\\s*,\\s*/).map(p => { let v = parseFloat(p); return isNaN(v) ? undefined : v });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"fixed_data = method(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"normalizeHue = hue => (hue = hue % 360) < 0 ? hue + 360 : hue;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"hue = (hues, fn) => {\n\treturn hues.map((hue, idx, arr) => {\n\t\tif (hue === undefined) {\n\t\t\treturn hue;\n\t\t}\n\t\tlet normalized = normalizeHue(hue);\n\t\tif (idx === 0 || hues[idx - 1] === undefined) {\n\t\t\treturn normalized;\n\t\t}\n\t\treturn fn(normalized - normalizeHue(arr[idx - 1]));\n\t}).reduce((acc, curr) => {\n\t\tif (!acc.length || curr === undefined || acc[acc.length - 1] === undefined) {\n\t\t\tacc.push(curr);\n\t\t\treturn acc;\n\t\t}\n\t\tacc.push(curr + acc[acc.length - 1]);\n\t\treturn acc;\n\t}, []);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"hueShorter = arr => hue(arr, d => Math.abs(d) <= 180 ? d : d - 360 * Math.sign(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hueLonger = arr => hue(arr, d => Math.abs(d) >= 180 || d === 0 ? d : d - 360 * Math.sign(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"hueIncreasing = arr => hue(arr, d => d >=0 ? d : d + 360);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"hueDecreasing = arr => hue(arr, d => d <= 0 ? d : d - 360);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"import { slider, text, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"culori = require('culori@2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null