30:[] 2e:{"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"},{"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"},{"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"},{"id":899,"value":"---\n*Top: linear, bottom: ease*","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"drawEases(filtered, combRect, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"---\n*outside: linear, inside: ease*","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"drawEases(filtered, combCircle, {...options, steps: options.steps*2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"---\n*inside: linear, outside: ease*","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"drawEases(filtered, combHalfCircle, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"---\nFor reference, more traditional visualization styles follow below.","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"drawEases(filtered, lineDiag, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"drawEases(filtered, lineVert, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"---\nListed below are experiments that don't quite work (yet?).","pinned":false,"hidden":false,"mode":"md"},{"id":916,"value":"*horizontal: time, vertical: velocity*","pinned":false,"hidden":false,"mode":"md"},{"id":552,"value":"drawEases(filtered, lineVelocity, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"*horizontal: time, vertical: difference between linear and ease*","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"drawEases(filtered, lineDiff, options)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":592,"value":"drawEases(filtered, combSplitCircle, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"*horizontal: linear, vertical: ease*","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"drawEases(filtered, lineAxes, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":291,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":429,"value":"mix = (a, b, t) => a * (1 - t) + b * t","pinned":false,"hidden":false,"mode":"ojs"},{"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`