2b:null 2c:["$","title",null,{"children":"Eases On Edge | Fabian Iwand | Observable"}] 31:[] 2f:{"id":"ea87d317788b8a09","slug":"eases-on-edge","title":"Eases On Edge","thumbnail":"eb9bebb448ca1565581cbeebd169a15b942cf90d6fb69356c3146b20019aca57","access_level":"public","create_time":"$D2022-01-07T20:22:08.563Z","update_time":"$D2022-01-10T17:21:55.676Z","view_time":null,"first_public_time":"$D2022-01-10T09:34:25.175Z","fork":false,"stars":31,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":942,"publish_version":942,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[{"id":"dfd1b5b1946c3d91","reply_to_id":null,"content":"hi @mootari, very smart way of styling the inputs component 👀","create_time":"$D2022-01-10T21:37:54.169Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}},{"id":"b752368aef1451b3","reply_to_id":"dfd1b5b1946c3d91","content":"also I haven't used :scope and this is a great learning opportunity!","create_time":"$D2022-01-10T21:41:13.666Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}},{"id":"08968381cacd889e","reply_to_id":"dfd1b5b1946c3d91","content":"@radames Thanks!\n\nTechnically `:scope` doesn't do much on its own because no browser implements scoped stylesheets - it's equivalent to `:root` and `html`. However, it's also still a valid selector, so I'm using it as a placeholder which I then replace with the actual selector in addCss() (https://observablehq.com/@mootari/eases-on-edge#addCss).\n\nI've used this technique a few times now (e.g. in https://observablehq.com/@mootari/range-slider) to make the authoring of CSS themes easier.","create_time":"$D2022-01-10T21:52:02.233Z","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":"142346d8ecf80b30","reply_to_id":"dfd1b5b1946c3d91","content":"Minor correction: the above applies to ':scope' in stylesheets. In querySelector() / querySelectorAll() :scope refers to the current element.","create_time":"$D2022-01-10T22:00:36.960Z","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}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Eases On Edge","cells":[{"id":0,"value":"# Eases On Edge\n\n[Curvature combs](https://knowledge.autodesk.com/support/alias-products/getting-started/caas/CloudHelp/cloudhelp/2019/ENU/Alias-Tutorials/files/GUID-882B194B-E044-4921-B130-47391EFA1443-htm.html) are used to visualize the flow (or \"sharpness\") of a curve. Can we apply a similar technique to visualize easing functions? Are there other ways to visualize them?\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":153,"value":"viewof filtered = {\n const input = Inputs.checkbox(Object.values(eases), {\n label: 'Eases',\n // Display function name.\n format: fn => fn.name,\n // Select all eases that end on \"*In\".\n //value: Object.values(eases).filter(fn => fn.name.match(/In$/)),\n value: ['backIn', 'bounceInOut', 'circleOut', 'cubicIn', 'elasticOut', 'linear'].map(d => eases[d]),\n // Sort \"linear\" to the bottom.\n sort: (({name: a}, {name: b}) => a === 'linear' ? 1 : b === 'linear' ? -1 : d3.ascending(a, b))\n });\n const wrap = input.querySelector(':scope > div');\n // Group labels by their prefix.\n const groups = d3.group(\n wrap.querySelectorAll(':scope > label'),\n d => d.innerText.match(/^[a-z]+/)[0]\n );\n // Wrap label groups.\n for(const g of groups.values()) wrap.append(html`

${g}`);\n addCss(input, `\n :scope {max-width: none !important}\n :scope > div {display: flex; flex-wrap: wrap; gap: 10px}\n :scope > div > div > label {white-space: nowrap; display: flex}\n `);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"viewof options = Inputs.form({\n size: Inputs.range([20, 400], {step: 10, value: 100, label: 'Size'}),\n steps: Inputs.range([2, 200], {value: 20, step: 1, label: 'Steps'}),\n opacity: Inputs.range([0, 1], {value: .5, step: .01, label: 'Opacity'}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":899,"value":"---\n*Top: linear, bottom: ease*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":194,"value":"drawEases(filtered, combRect, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"---\n*outside: linear, inside: ease*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":267,"value":"drawEases(filtered, combCircle, {...options, steps: options.steps*2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"---\n*inside: linear, outside: ease*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":281,"value":"drawEases(filtered, combHalfCircle, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"---\nFor reference, more traditional visualization styles follow below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":521,"value":"drawEases(filtered, lineDiag, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"drawEases(filtered, lineVert, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"---\nListed below are experiments that don't quite work (yet?).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":916,"value":"*horizontal: time, vertical: velocity*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":552,"value":"drawEases(filtered, lineVelocity, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":921,"value":"*horizontal: time, vertical: difference between linear and ease*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":830,"value":"drawEases(filtered, lineDiff, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":927,"value":"*similar to the previous diff charts; arc direction and radius: difference (forward/top=ahead, backwards/bottom=behind)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":592,"value":"drawEases(filtered, combSplitCircle, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":932,"value":"*horizontal: linear, vertical: ease*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":686,"value":"drawEases(filtered, lineAxes, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"// Draws the easing ratio as vertical lines in a square (top: linear, bottom: ease).\nfunction combRect(ease, {steps = 50, size = 150, opacity = 1} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n ${\n d3.quantize(t=>t, steps+1).map(t => {\n let tx = ease(t), ty = 1;\n if(tx < 0) ty = 1 + tx / (t-tx), tx = 0;\n else if(tx > 1) ty = 1 - (tx-1) / (tx-t), tx = 1;\n return htl.svg``\n })\n }`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"// Draws the easing ratio in a circle (outside: linear, inside: ease).\nfunction combCircle(ease, {steps = 40, size = 150, opacity = 1} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n ${\n d3.quantize(t=>t, steps+1).map(t => {\n const mix = (a, b, t) => a * (1 - t) + b * t;\n const p = d3.path();\n p.moveTo(50, 50);\n for(let r = 1; r <= 50; r++) {\n const a = mix(ease(t), t, (r/50)**2) * Math.PI * 2 - Math.PI/2;\n p.lineTo(50 + r * Math.cos(a), 50 + r * Math.sin(a));\n }\n return htl.svg``;\n })\n }\n`);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"// Draws the easing ratio in a half-circle (inside: linear, outside: ease).\nfunction combHalfCircle(ease, {steps = 20, size = 150, opacity = 1} = {}) {\n return drawEase(ease.name, {size, height: size/2}, htl.svg`${\n d3.quantize(t=>t, steps+1).map(t => {\n const p = d3.path();\n p.moveTo(50, 50);\n for(let r = 1; r <= 50; r++) {\n const a = mix(t, ease(t), (r/50)**2) * Math.PI - Math.PI;\n p.lineTo(50 + r * Math.cos(a), 50 + r * Math.sin(a));\n }\n return htl.svg``;\n })\n }`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"function lineDiag(ease, {size = 150, resolution = 100} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n t*100, t => 75-50*ease(t))(d3.quantize(t=>t, resolution)) + 'L100,75Z'\n }\" />\n \n`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"function lineVert(ease, {size = 150, resolution = 100} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n \n t*100, t => 75-50*ease(t))(d3.quantize(t=>t, resolution)) + 'L100,75Z'\n }\" />\n`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"function lineDiff(ease, {size = 150, resolution = 100} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n t*100, t => 50 + 25*(t-ease(t)))(d3.quantize(t=>t, resolution)) + 'L100,50L0,50Z'\n }\" />`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"function lineVelocity(ease, {size = 150} = {}) {\n const steps = 100, scale = steps/8, width = 100 / steps;\n const deltas = d3.quantize(ease, steps+1).map((v, i, arr) => i\n ? v - arr[i-1]\n : arr[1] - arr[0]\n );\n return drawEase(ease.name, {size}, htl.svg`\n i * width, t => 50 - 50 * t * scale)(deltas) + 'L100,50L0,50Z'}\" />\n`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"// Draws the easing ratio in a half-circle (inside: linear, outside: ease).\nfunction combSplitCircle(ease, {steps = 20, size = 150, opacity = 1, ratio = .95} = {}) {\n const offsets = d3.quantize(t=>t, steps+1);\n return drawEase(ease.name, {size}, htl.svg`\n \n \n ${\n '' // offsets.map(t => htl.svg``)\n }\n ${\n d3.quantize(t=>t, steps+1).map(t => {\n const p = d3.path();\n const r = (ease(t) - t) * 50;\n const x = t*100;\n p.moveTo(x, 50);\n if(!r) return '';\n p.moveTo(x, 50);\n if(r < 0) p.arc(x + r, 50, Math.abs(r), 0, Math.PI*ratio);\n else p.arc(x + r, 50, Math.abs(r), Math.PI, Math.PI + Math.PI*ratio);\n return htl.svg``;\n })\n }`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"function lineAxes(ease, {steps = 20, size = 150, opacity = 1} = {}) {\n return drawEase(ease.name, {size}, htl.svg`\n ${d3.quantize(t=>t, steps+1).map(t => {\n const _t = ease(t), x = 25 + t * 50, y = 25 + (1-_t) * 50;\n return htl.svg``;\n })}\n`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"// Load unminified lib to access function names.\neases = require('d3-ease@3.0/dist/d3-ease.js')\n // Filter out aliases.\n .then(o => Object.fromEntries(Array.from(new Set(Object.values(o)), o => [o.name, o])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"mix = (a, b, t) => a * (1 - t) + b * t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"// Injects a scoped style element into the element.\n// The passed in CSS can reference the root element via \":scope\".\nfunction addCss(element, css) {\n const scope = DOM.uid().id;\n element.classList.add(scope);\n element.appendChild(html`