2e:null 2f:["$","title",null,{"children":"Interpolation | lars | Observable"}] 34:[] 32:{"id":"dc152b354df487c0","slug":"interpolation","title":"Interpolation","thumbnail":"be829c973bf1c37479733cf5f600ae0e7e4cb097ce4ef901df10336292e3fe26","access_level":"public","create_time":"$D2018-06-16T13:38:39.860Z","update_time":"$D2018-06-19T21:21:25.500Z","view_time":null,"first_public_time":"$D2018-06-16T22:30:09.829Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4083a722389d61b6","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":"starter_2024"},"version":509,"publish_version":509,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d40fec32b0c8731","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":null}],"members":[{"type":"individual","id":"1d40fec32b0c8731","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Interpolation","cells":[{"id":0,"value":"md`# Interpolation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md `The key elements of animation are **start position**, **end position** and **time**. Position can be any concept that moves and can ultimately be represented as a single number. The start and end position would be the static _key frames_ and all intermediate, interpolated states would be the _tween frames_ - the states inbe_tween_ start and end position (see [Robert Penners detailed thoughts](http://robertpenner.com/easing/penner_chapter7_tweening.pdf) on this). \n\nFor now, let's consider the most focussed case: animating a number from a start to an end position. Our start position will be the variable a, our end position the variable b:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"a = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"b = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md `Time will be represented as the variable t which will start at 0 and end at 1. This is the value that drives the movement of our position from start to end position. A t of 0 represents a. A t of 1 represents b. So, as t moves from 0 to 1, our position moves from start to end.\n\nAnother important property we would like to control when transitioning between two states, is **duration**. The time it takes to get from t = 0 to t = 1. This is in fact the hardest part of a linear tween: How to control getting 0 to 1. But let's worry first about a simple case.\n\n### Simple linear interpolation\n\nWe have the start and end positions - next we need the time t moving from 0 to 1. Here's a simple generator producing values increasing from 0 to 1:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"tSimple = {\n for(let i = 0; i < 60; i++) {\n yield i/59\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md `We iterate 60 times. The browser refreshs 60 times a second (60 _ticks_), so conceptually 60 makes a lot of sense. 0 is the first, 59 the last loop index. We then divide our iterator by 59, that's 60 iterations. ${tex `\\frac{0}{59} = 0, \\frac{59}{59} = 1`}. There's our time interpolator.\n\nIn order to apply this to move a to b, we \n\n1. create an interpolator,\n2. apply the start and end value to it. \n\nHere's a simple linear interpolator function as [implemented by d3](https://github.com/d3/d3-interpolate#interpolateNumber):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"function inter(a,b){\n return function(t) {\n return a * (1-t) + b * t\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md `Our inter() function takes 2 numbers a and b. It then returns a function that takes a **t**ime variable t in the range [0, 1] and returns an interpolated number inbetween a and b depending on the t-value. Here it is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"myInterpolator = inter(a, b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md `Feeding myInterpolator() a t of 0.5 should return the value half way between a and b. And so it does:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"myInterpolator(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md `Now we have all the ingredients to interpolate between a and b. We have a, we have b, we have an interpolator that will interpolate given t and we have a function that moves t from 0 to 1 in one second (or 60 _ticks_). Let's put the pieces together in the following (just re-evaluate tSimple):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"myInterpolator(tSimple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md `### Controlling duration\n\nIn order to control the duration t takes from 0 to 1, we increase or decrease the number of ticks in our t loop. We don't want _ticks_ as unit (we currently have 60) - not nice to work with. We want _miliseconds_. Here's a set of conversions:\n\n| ticks | ms |\n|---------|-------|\n|0 |0 |\n|60 |1000 |\n|120 |2000 |\n|180 |3000 |\n|240 |4000 |\n\n
\n\nYou get the idea. In order to convert from miliseconds to ticks, we do ${tex `1000 \\times x = 60`} so our conversion scalar is ${tex `x = \\frac{60}{1000}`} or 0.06.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md `We create an input for the desired duration in miliseconds (using mutable to change the value below):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"mutable ms = 3000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"setMs = (value) => mutable ms = value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md `convert them to ticks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"tickNum = ms * 0.06","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md `and finally input this tickNum instead of our hardcoded 60 into our t generator:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"t = {\n for(let i = 0; i < tickNum; i++) {\n yield i/(tickNum-1);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md `### Easing\n\nOften you don't want a linear progression of t through time, but a - well - non-linear progression. No reason to re-invent the wheel, just pick one of the [d3 easing functions](https://github.com/d3/d3-ease).\n\nHere we take [cubic easing](https://github.com/d3/d3-ease#easeCubic) to give t a slow start and a slow end:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"ease = d3.easeCubic(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md `Finally, we swap our self-made interpolator against the better tested and used [d3 number interpolator](https://github.com/d3/d3-interpolate#interpolateNumber):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"interpolator = d3.interpolateNumber(a, b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md `and go all the way to the very essence of our mission, to interpolate between a start point **a** and an end point **b** with a duration we decide up there in the variable **ms**. We do this as a linear and a cubic ease interpolation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"positionLinear = interpolator(t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"positionEase = interpolator(ease)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md `Here's a quick and dirty visualisation of the interpolated positions - just set **a new duration**...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"viewof newMs = number({placeholder: 'e.g. 3000', submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"{\n const context = DOM.context2d(width, height);\n \n context.beginPath();\n while(positionLinear < width) {\n context.lineTo(0, height/2);\n context.moveTo(positionLinear, height/2)\n context.stroke()\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"{\n const context = DOM.context2d(width, height);\n \n context.beginPath();\n while(positionEase < width) {\n context.lineTo(0, height/2);\n context.moveTo(positionEase, height/2)\n context.stroke()\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md `_These concepts are described in much more depth and detail in Robert Penner's book I linked to above as well as in the D3 documentation. It just helps sometimes making the basics overly clear._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md `-----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"height = Math.round(width*0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"setMs(newMs || 3000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\n 'd3-interpolate',\n 'd3-ease'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"