31:T52f,md `### The problem I want to interpolate from one position to another (stored as 2D arrays in an array). I also want the flexibility to do this per outer array index (so interpolate from position index 0 to position index 1 only.) This will be used to trigger custom animations of canvas positions. The key ingredients we have here are: * Start Position * End Position * Time The key problem was to find a way to control **triggering** the time-loop, which will then drive the interpolation. Further, I want to control the index of the position array we interpolate over. So, ideally I want a function that I pass an index to and it will return the interpolated positions of the respective array items (from _start_ to _end_). ### The solution The solution are two custom generator functions. 1. *Generator 1* gets the index as input, loops through time and yields the _start_, the _interpolated_ and the _end_ positions. 2. *Generator 2* gets all indeces of _start_ and _end_ position items as input, loops through the indeces and for each index yields _Generator 1_. Im both cases, the fact that we have generator **functions** rather than generator **cells** enable me to trigger them whenever I want. ### The functions This is the array of start and end positionswe want to loop through:`32:[] 2f:{"title":"Controlling custom generators","cells":[{"id":0,"value":"md`# Controlling custom generators\n_specifically for interpolating values of an array_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"positions = [[0,0], [5, 10], [10, 20], [30, 40], [40, 50], [50, 60]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md `This is the time generator (_Generator 1_):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function* time(index) {\n const inter = d3.interpolate(positions[index], positions[index+1])\n for(let i = 0; i < 60; i++) {\n yield inter(i/(60-1));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md `Which we can call either directly with an index to return a specific interpolation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"time(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md `or we can call the following loop function whcih will interpolate through all items:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"loopThrough(positions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md `with the loop generator (_Generator 2_):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"function* loopThrough(array){\n for (let i = 0; i < array.length-1; i++) {\n yield* time(i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md `_Note how we use the [yield-star expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*) here, which evaluates the next values of another generator - in our case of Generator 1: time(i)_\n\n_Also see [Introduction to Generators](https://beta.observablehq.com/@mbostock/introduction-to-generators) for more background._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md `------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3-interpolate')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}