40:null 41:["$","title",null,{"children":"Easing graphs editor | Milan Košir | Observable"}] 47:T239d,function chartEditor(config = {}) { let { easePreview, boundFirstLast = false, defaultCurve, enableD3Easing = false, title } = config; let useD3Easing = false; let editor = html`

`; let titleEditor = html`${title}`; let resetButton = ``; let copyButton = ``; let easingSelect = `D3 easing: `; let action = html``; let previewTitle = html`

Ease preview

`; let curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); if (defaultCurve !== undefined) { if (typeof defaultCurve === "string") { useD3Easing = true; } else { action.d3Ease.value = undefined; curve = defaultCurve.copy(); } } else { action.d3Ease.value = undefined; } const line = d3.line(); action.d3Ease.onchange = event => { useD3Easing = true; updateValue(); update(true); }; action.reset.onclick = event => { resetCurve(); updateValue(); update(true); }; action.onsubmit = event => { event.preventDefault(); }; action.copy.onclick = event => { useD3Easing ? copy(`d3.${action.d3Ease.value}()`) : copy( `new Curve([${curve.keyframes .map(k => `new Keyframe(${JSON.stringify(k)})`) .join(',')}])` ); }; function resetCurve() { if (defaultCurve !== undefined) { if (typeof defaultCurve === "string") { useD3Easing = true; curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); action.d3Ease.value = defaultCurve; } else { action.d3Ease.value = undefined; useD3Easing = false; curve = defaultCurve.copy(); } } else { action.d3Ease.value = undefined; useD3Easing = false; curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); } } const svg = d3 .create("svg") .attr("cursor", "pointer") .attr("viewBox", [0, 0, width, height]) .style("max-width", `${width}px`) .style("overflow", "visible"); svg .append("g") .call(xAxis) .call(g => g .append("text") .attr("x", width - margin.right) .attr("y", -3) .attr("fill", "currentColor") .attr("font-weight", "bold") .text("t") ); svg .append("g") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("t′") ); let g = svg .append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round"); svg.on("click", function(d) { if (d3.event.defaultPrevented) return; if (useD3Easing) { resetCurve(); useD3Easing = false; } curve.addKey( new Keyframe({ time: x.invert(d3.mouse(this)[0]), value: y.invert(d3.mouse(this)[1]) }) ); updateValue(); update(true); }); function updateValue() { if (useD3Easing) { curve.evaluate = d3[action.d3Ease.value]; } editor.value = t => curve.evaluate(t); editor.dispatchEvent(new CustomEvent("input")); } function update(runTransition) { g.selectAll("path") .data([t => curve.evaluate(t)]) .join("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .transition() .duration(runTransition ? 500 : 0) .attr("d", e => line(d3.ticks(0, 1, width).map(t => [x(t), y(e(t))]))); g.selectAll(".tangentesCont") .data(useD3Easing ? [] : curve.keyframes, (d, i) => d.id) .join(enter => enter .append("g") .attr("class", "tangentesCont") .each(function(d) { d3.select(this) .append("line") .attr("opacity", d => (d.id === curve.firstKeyframe.id ? 0 : 1)) .attr("class", "inTangLine") .attr("fill", "none") .attr("stroke", "#008ec4"); d3.select(this) .append("line") .attr("class", "outTangLine") .attr("opacity", d => (d.id === curve.lastKeyframe.id ? 0 : 1)) .attr("fill", "none") .attr("stroke", "#008ec4"); d3.select(this) .append("circle") .attr("stroke", "black") .attr("opacity", d => (d.id === curve.firstKeyframe.id ? 0 : 1)) .attr("class", "inTangKey") .attr("stroke", "#008ec4") .attr("fill", "#008ec4") .attr("r", 5) .attr("cursor", "move") .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedTangIn) .on("end", dragendedKey) ); d3.select(this) .append("circle") .attr("stroke", "black") .attr("opacity", d => (d.id === curve.lastKeyframe.id ? 0 : 1)) .attr("class", "outTangKey") .attr("stroke", "#008ec4") .attr("fill", "#008ec4") .attr("r", 5) .attr("cursor", "move") .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedTangOut) .on("end", dragendedKey) ); d3.select(this) .append("circle") .attr("class", "keyframe") .attr("stroke", "black") .attr("fill", "white") .attr("r", 5) .attr("cursor", "move") .on("contextmenu", d => { d3.event.preventDefault(); curve.removeKey(d); updateValue(); update(true); }) .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedKey) .on("end", dragendedKey) ); }) ) .each(function(d) { d3.select(this) .select(".keyframe") .attr("cx", x(d.time)) .attr("cy", y(d.value)) .attr("cursor", "move"); d3.select(this) .select(".inTangKey") .attr("cx", x(d.getHandles().in.x)) .attr("cy", y(d.getHandles().in.y)) .attr("cursor", "move"); d3.select(this) .select(".outTangKey") .attr("cx", x(d.getHandles().out.x)) .attr("cy", y(d.getHandles().out.y)); d3.select(this) .select(".inTangLine") .attr("stroke-width", '1') .attr("x1", x(d.getHandles().in.x)) .attr("y1", y(d.getHandles().in.y)) .attr("x2", x(d.time)) .attr("y2", y(d.value)); d3.select(this) .select(".outTangLine") .attr("stroke-width", '1') .attr("x1", x(d.time)) .attr("y1", y(d.value)) .attr("x2", x(d.getHandles().out.x)) .attr("y2", y(d.getHandles().out.y)); }); } function dragstartedKey(d, i) { d3.select(this) .raise() .attr("r", 6); } function draggedKey(d) { curve.move( d, x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]), boundFirstLast ); update(); } function dragendedKey(d, i) { d3.select(this) .raise() .attr("r", 5); updateValue(); update(); } function draggedTangIn(d) { d.setInTangentFromHandle( x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]) ); update(); } function draggedTangOut(d) { d.setOutTangentFromHandle( x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]) ); update(); } updateValue(); update(); if (title !== undefined) editor.append(titleEditor); editor.append(action); editor.append(svg.node()); if (easePreview) { editor.append(previewTitle); editor.append(chartEase(t => curve.evaluate(t), invalidation)); } return editor; }48:T4aa,class Keyframe { constructor({ time, value, inTangent, outTangent }) { this.time = Math.max(0, Math.min(1, time)) || 0; this.value = value || 0; this.inTangent = inTangent || 0; this.outTangent = outTangent || 0; this.id = DOM.uid().id; this.inMagnitude = -0.1; this.outMagnitude = 0.1; } getHandles() { return { in: this.getInHandle(), out: this.getOutHandle() }; } getInHandle() { return { x: this.time + this.inMagnitude, y: this.value + this.inMagnitude * this.inTangent }; } getOutHandle() { return { x: this.time + this.outMagnitude, y: this.value + this.outMagnitude * this.outTangent }; } setTangentsFromHandles(tangents) { this.setInTangentFromHandle(tangents.in.x, tangents.in.y); this.setOutTangentFromHandle(tangents.out.x, tangents.out.y); } setInTangentFromHandle(x, y) { if(x >= this.time) return; this.inMagnitude = x - this.time; this.inTangent = (y - this.value) / this.inMagnitude; } setOutTangentFromHandle(x, y) { if(x <= this.time) return; this.outMagnitude = x - this.time; this.outTangent = (y - this.value) / this.outMagnitude; } }49:Tc6a,class Curve { constructor(keyframes) { const linearKeySet = [new Keyframe({ time: 0 }), new Keyframe({ time: 1 })]; if (!keyframes || !Array.isArray(keyframes)) { this.keyframes = linearKeySet; } else { this.keyframes = keyframes; if (keyframes.length < 2) this.keyframes.concat( linearKeySet.splice(keyframes.length, 2 - keyframes.length) ); } this.sortKeyframes(); } addKey(keyframe) { this.addKeyframes([keyframe]); } removeKey(keyframe) { const foundIndex = this.keyframes.findIndex( kf => kf.time === keyframe.time ); if (foundIndex > 0 && foundIndex < this.keyframes.length - 1) this.keyframes.splice(foundIndex, 1); } addKeyframes(keyframes) { keyframes.forEach(k => { const foundIndex = this.keyframes.findIndex(kf => kf.time === k.time); if (foundIndex === 0 || foundIndex === this.keyframes.length - 1) return; if (foundIndex >= 0) { this.keyframes[foundIndex] = k; } else this.keyframes.push(k); }); this.sortKeyframes(); } GetClosestKeyframes(t) { t = Math.max(0, Math.min(1, t)); var lo = -1, hi = this.keyframes.length; while (hi - lo > 1) { var mid = Math.round((lo + hi) / 2); if (this.keyframes[mid].time <= t) lo = mid; else hi = mid; } if (this.keyframes[lo].time === t) hi = lo; if (lo === hi) { if (lo === 0) hi++; else lo--; } return [lo, hi]; } evaluate(t) { return this.hermite(t, this.keyframes).y; } hermite(t, keyframes) { const n = keyframes.length; const [lo, hi] = this.GetClosestKeyframes(t); var i0 = lo; var i1 = i0 + 1; if (i0 > n - 1) throw new Error('Out of bounds'); if (i0 === n - 1) i1 = i0; var scale = keyframes[i1].time - keyframes[i0].time; t = (t - keyframes[i0].time) / scale; var t2 = t * t; var it = 1 - t; var it2 = it * it; var tt = 2 * t; var h00 = (1 + tt) * it2; var h10 = t * it2; var h01 = t2 * (3 - tt); var h11 = t2 * (t - 1); const x = h00 * keyframes[i0].time + h10 * keyframes[i0].outTangent * scale + h01 * keyframes[i1].time + h11 * keyframes[i1].inTangent * scale; const y = h00 * keyframes[i0].value + h10 * keyframes[i0].outTangent * scale + h01 * keyframes[i1].value + h11 * keyframes[i1].inTangent * scale; return { x, y }; } sortKeyframes() { this.keyframes.sort((a, b) => a.time - b.time); this.firstKeyframe = this.keyframes[0]; this.lastKeyframe = this.keyframes[this.keyframes.length - 1]; } move(keyframe, time, value, boundFirstLast) { const keyIndex = this.keyframes.indexOf(keyframe); if (keyIndex <= 0 || keyIndex >= this.keyframes.length - 1) { if (!boundFirstLast) { keyframe.value = value; } return; } keyframe.value = value; keyframe.time = Math.max(0.001, Math.min(time, 0.999)); this.sortKeyframes(); } copy() { return new Curve( this.keyframes.map(keyframe => { return new Keyframe({ ...keyframe }); }) ); } }4a:[] 45:{"id":"bb85a47e7883bad0","slug":null,"title":"Easing graphs editor","thumbnail":"922681280734d2ee0f7c6810eb23857666c220cf6876ace67b51ec0f10185d25","access_level":"public","create_time":"$D2023-12-27T14:11:29.977Z","update_time":"$D2023-12-27T14:11:29.977Z","view_time":null,"first_public_time":"$D2023-12-27T14:11:29.977Z","has_unpublished_edits":null,"fork":{"id":"9bb66f83088d768e","slug":"easing-graphs-editor","title":"Easing graphs editor","owner":{"id":"41a2166948bbf4e5","login":"nhogs","name":"Nhogs"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1c4094dddf951aea","login":"kosirm","name":"Milan Košir","avatar_url":"https://avatars-next.observableusercontent.com/30b71a7fe2e686451530b14eb26a2bc6ff2c466e21d60dbafbee5199c775f002","tier":"starter_2024","bio":"Let’s not make things sound more complicated than what they are.","following":false},"version":1833,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef7839ce269766f6","login":"kosirm","name":"Milan Košir","avatar_url":"https://avatars-next.observableusercontent.com/30b71a7fe2e686451530b14eb26a2bc6ff2c466e21d60dbafbee5199c775f002","tier":null,"bio":"Let’s not make things sound more complicated than what they are.","following":false}],"members":[{"type":"individual","id":"ef7839ce269766f6","login":"kosirm","name":"Milan Košir","avatar_url":"https://avatars-next.observableusercontent.com/30b71a7fe2e686451530b14eb26a2bc6ff2c466e21d60dbafbee5199c775f002","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Easing graphs editor","cells":[{"id":0,"value":"md`# Easing graphs editor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`The editor allows you to create and edit a custom easing curve, which take a normalized time ${tex`t \\in [0,1]`} and return an “eased” time ${tex`t'`}. The goal is to extend easing possibilities offered by D3.\nMost of the visuals comes from D3's [easing graphs notebook](https://observablehq.com/@d3/easing) and [easing animations notebook](https://observablehq.com/@d3/easing-animations).\n\nA custom easing curve is a collection of keyframes, each having a time (x), value (y), an \"in tangent\" and an \"out tangent\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"md`~~~js\nimport {chartEditor, Curve, Keyframe} from \"@nhogs/easing-graphs-editor\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"viewof customEditor = chartEditor({\n title: \"Custom editor\",\n easePreview: true,\n enableD3Easing: true,\n boundFirstLast: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"md`\n### Editor config\n- _title_ : Displayed title of the editor (optionnal)\n- _easePreview_ : Enable the traveling ball preview (optionnal)\n- _boundFirstLast_ : Lock the first and last keyframe at 0 and 1 in time (x) (optionnal)\n- _enableD3Easing_ : Enable d3 easing functions dropdown (optionnal)\n- _defaultCurve_ : The default curve of the editor, it's either an instance of the Curve class (for exemple when you copy one) or the name of a d3 easing function as string ex: \"easeBounce\" (optionnal)\n\n### Curve editing\n- Click to add a keyframe\n- Right click to delete a keyframe\n- Drag a keyframe across the chart to change its values\n- Drag the blue handles to edit its tangents\n- Choose a d3 easing function with the dropdown\n- Reset to default curve with 'Reset' button\n- Copy the full curve with 'Copy' button\n- Click on the preview to play it\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"viewof Example1Editor = chartEditor({\n title: \"Editor with curve as default value\",\n easePreview: true,\n enableD3Easing: true,\n boundFirstLast: true,\n defaultCurve: new Curve([\n new Keyframe({\n time: 0,\n value: 0,\n inTangent: 0,\n outTangent: 4,\n id: \"O-18\",\n inMagnitude: -0.1,\n outMagnitude: 0.1\n }),\n new Keyframe({\n time: 0.2,\n value: 0.6,\n inTangent: -1.5,\n outTangent: -1.8,\n id: \"O-22\",\n inMagnitude: -0.05,\n outMagnitude: 0.1\n }),\n new Keyframe({\n time: 1,\n value: 1,\n inTangent: 5,\n outTangent: 0,\n id: \"O-19\",\n inMagnitude: -0.075,\n outMagnitude: 0.1\n })\n ])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"viewof Example2Editor = chartEditor({\n title: \"Editor with d3 easing function as default value\",\n easePreview: true,\n enableD3Easing: true,\n defaultCurve: \"easeBounce\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"md`## Easing graph editor in action :\n- [Animating a cube in Three.js](https://observablehq.com/@tarte0/animation-curves-with-three-js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"md`## Classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"d3EaseFunction = [\n \"easeLinear\",\n \"easePolyIn\",\n \"easePolyOut\",\n \"easePoly\",\n \"easePolyInOut\",\n \"easeQuadIn\",\n \"easeQuadOut\",\n \"easeQuad\",\n \"easeQuadInOut\",\n \"easeCubicIn\",\n \"easeCubicOut\",\n \"easeCubic\",\n \"easeCubicInOut\",\n \"easeSinIn\",\n \"easeSinOut\",\n \"easeSin\",\n \"easeSinInOut\",\n \"easeExpIn\",\n \"easeExpOut\",\n \"easeExp\",\n \"easeExpInOut\",\n \"easeCircleIn\",\n \"easeCircleOut\",\n \"easeCircle\",\n \"easeCircleInOut\",\n \"easeElasticIn\",\n \"easeElastic\",\n \"easeElasticOut\",\n \"easeElasticInOut\",\n \"easeBackOut\",\n \"easeBack\",\n \"easeBackInOut\",\n \"easeBounceIn\",\n \"easeBounce\",\n \"easeBounceOut\",\n \"easeBounceInOut\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"import { x, y, xAxis, yAxis, width, height, margin } from \"@d3/easing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"import {chart as chartEase} from \"@d3/easing-animations\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"import { copy } from '@mbostock/copy-to-clipboard'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1763,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"