Time based animations?

[alcy]

Hi @vasturiano, thank you so much for this wonderful library! I wanted to do a time based animation for an Arcs Layer based visualization, and I came across this code from the Satellites example. I wonder if you'd recommend doing something similar for time based arcs? For eg., in your outbound flight routes example, imagine having departure times for each flight and the arcs basically being rendered based on that. Just wanted to be sure that I am not missing something that might be already in the library! :-)

[vasturiano]

@alcy thanks for reaching out.

Yes, that sounds like a good idea generally speaking. If you have arcs whose coordinates change over time, you can use that animation method to move them around.

[vasturiano]

@alcy I believe that as long as you don't pass new arc objects to the component at each frame (which indicates to the lib that you want the previous ones destroyed and new ones created), the dash animations should work fine and maintain a continuity throughout coordinate (animated) changes.

[alcy]

Thanks @vasturiano for the insight! I gave it a try, but looks like something's not working - not sure if I am still missing something. Would you do something differently in the following code? In the snippet below the arcDashAnimateTime doesn't take effect.

const N = 300;
//Initialize the arcs data 
const gData = [...Array(N).keys()].map(() => ({
    dep_lat: 35.552299,
    dep_lng: 139.779999,
    arr_lat: 35.552299,
    arr_lng: 139.779999,
}));

const world =  Globe()
(document.getElementById('globeViz'))
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.pointOfView({ lat: 35.552299, lng: 139.779999 })
.arcStartLat(d => +d.dep_lat)
.arcStartLng(d => +d.dep_lng)
.arcEndLat(d => +d.arr_lat)
.arcEndLng(d => +d.arr_lng)
.arcDashLength(0.25)
.arcDashGap(1)
.arcDashInitialGap(() => Math.random())
.arcDashAnimateTime(d => 5000)
.arcsTransitionDuration(0);

function frameticker() {
    requestAnimationFrame(frameticker);

    gData.forEach(d => {
      d.arr_lat = (Math.random() - 0.5) * 180
      d.arr_lng = (Math.random() - 0.5) * 360
    })
     
    world.arcsData(gData)
}
frameticker();

[vasturiano]

@alcy to better understand what's going on it's easier if you make a functional example on https://codepen.io/ .

Though in your case I would remove .arcDashInitialGap(() => Math.random()). This randomness will apply every time the arcs positions are recomputed and will add a very erratic behaviour to your arcs.

[alcy]

@vasturiano ah thanks for pointing that out - here's the pen without the arcDashInitialGap.

[alcy]

@vasturiano I think that was it! It was probably just the arcDashInitialGap that was causing the unpredictability. Without that it looks much clearer!