31: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``; }32:[] 2f:{"title":"Hue interpolation fixup","cells":[{"id":0,"value":"md`# Hue interpolation fixup`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":135,"value":"html`Data after fixup: [${fixed_data.join(', ')}]`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":208,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"t = tt;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":76,"value":"interpolator = culori.interpolatorLinear(method(data))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":126,"value":"fixed_data = method(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"normalizeHue = hue => (hue = hue % 360) < 0 ? hue + 360 : hue;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":11,"value":"hueShorter = arr => hue(arr, d => Math.abs(d) <= 180 ? d : d - 360 * Math.sign(d))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"hueIncreasing = arr => hue(arr, d => d >=0 ? d : d + 360);","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"hueDecreasing = arr => hue(arr, d => d <= 0 ? d : d - 360);","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"import { slider, text, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"culori = require('culori@2')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}