Controlling custom generators specifically for interpolating values of an array
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. Generator 1 gets the index as input, loops through time and yields the start, the interpolated and the end positions. 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:
positions = [[0,0], [5, 10], [10, 20], [30, 40], [40, 50], [50, 60]]
This is the time generator (Generator 1):
function* time(index) { const inter = d3.interpolate(positions[index], positions[index+1]) for(let i = 0; i < 60; i++) { yield inter(i/(60-1)); } }
Which we can call either directly with an index to return a specific interpolation:
time(3)
or we can call the following loop function whcih will interpolate through all items:
loopThrough(positions)
with the loop generator (Generator 2):
function* loopThrough(array){ for (let i = 0; i < array.length-1; i++) { yield* time(i); } }
Note how we use the yield-star expression here, which evaluates the next values of another generator - in our case of Generator 1: time(i) Also see Introduction to Generators for more background.
d3 = require('d3-interpolate')