function animate(progress) {
    const time = progress * totalAnimationTime
    const yearIndex = Math.floor(progress * yearlyAttributes.length);
    const yearProgress = (progress * yearlyAttributes.length) % 1;

    //console.log(progress, yearIndex, yearProgress)

    //updating middle mesh
    let position = globeTemperatureMesh.geometry.getAttribute('position');
    let colors = globeTemperatureMesh.geometry.attributes.color;
    let color = new THREE.Color(0xffffff);

    const selectedYearAttributes = yearlyAttributes[Math.min(yearlyAttributes.length - 1, yearIndex)]

    var te = d3.easeCubic(yearProgress);
    for (var i = 0; i < position.count * 3; i++) {
        position.array[i] = ((1 - te) * (position.array[i] || 0)) + (te * selectedYearAttributes.position.array[i])
        colors.array[i] = ((1 - te) * (colors.array[i] || 0)) + (te * selectedYearAttributes.colors.array[i])
    }

    land.rotation.y = -time * speed
    globeTemperatureMesh.rotation.y = -time * speed

    // updating small multiples
    const angleScale = d3.scaleLinear()
        .range([- 3 / 4 * Math.PI, 3 / 4 * Math.PI])
        .domain([0, yearlyTemparatureMesh.length])

    yearlyTemparatureMesh.forEach((year, i) => {
        const historyProgress = i >= (1.05 * progress * yearlyTemparatureMesh.length) ? 0 : Math.min(1, (1.05 * progress - (i * 1 / (yearlyTemparatureMesh.length))) / (5 / yearlyTemparatureMesh.length));
        const t = d3.easeCubic(historyProgress)
        const tScale = d3.easeLinear(historyProgress)
        year.mesh.scale.set(0.6 - (tScale * 0.5), 0.6 - (tScale * 0.5), 0.6 - (tScale * 0.5))
        year.mesh.rotation.y = -time * speed
        year.mesh.position.set(t * 2 * radius * Math.sin(angleScale(i)), t * 2 * radius * Math.cos(angleScale(i)), 0)
    })

    colors.needsUpdate = true;
    position.needsUpdate = true;
}
// Following function animates everything and throws it on the page

Following function animates everything and throws it on the page
Following function animates everything and throws it on the page
function animate(progress) {
    const time = progress * totalAnimationTime
    const yearIndex = Math.floor(progress * yearlyAttributes.length);
    const yearProgress = (progress * yearlyAttributes.length) % 1;
    let position = globeTemperatureMesh.geometry.getAttribute('position');
    let colors = globeTemperatureMesh.geometry.attributes.color;
    let color = new THREE.Color(0xffffff);
    const selectedYearAttributes = yearlyAttributes[Math.min(yearlyAttributes.length - 1, yearIndex)]
    var te = d3.easeCubic(yearProgress);
    for (var i = 0; i < position.count * 3; i++) {
        position.array[i] = ((1 - te) * (position.array[i] || 0)) + (te * selectedYearAttributes.position.array[i])
        colors.array[i] = ((1 - te) * (colors.array[i] || 0)) + (te * selectedYearAttributes.colors.array[i])
    }
    land.rotation.y = -time * speed
    globeTemperatureMesh.rotation.y = -time * speed
    const angleScale = d3.scaleLinear()
        .range([- 3 / 4 * Math.PI, 3 / 4 * Math.PI])
        .domain([0, yearlyTemparatureMesh.length])
    yearlyTemparatureMesh.forEach((year, i) => {
        const historyProgress = i >= (1.05 * progress * yearlyTemparatureMesh.length) ? 0 : Math.min(1, (1.05 * progress - (i * 1 / (yearlyTemparatureMesh.length))) / (5 / yearlyTemparatureMesh.length));
        const t = d3.easeCubic(historyProgress)
        const tScale = d3.easeLinear(historyProgress)
        year.mesh.scale.set(0.6 - (tScale * 0.5), 0.6 - (tScale * 0.5), 0.6 - (tScale * 0.5))
        year.mesh.rotation.y = -time * speed
        year.mesh.position.set(t * 2 * radius * Math.sin(angleScale(i)), t * 2 * radius * Math.cos(angleScale(i)), 0)
    })
    colors.needsUpdate = true;
    position.needsUpdate = true;
}
function animate ( progress ) { const time = progress * totalAnimationTime const yearIndex = Math . floor ( progress * yearlyAttributes . length ) ; const yearProgress = ( progress * yearlyAttributes . length ) % 1 ; let position = globeTemperatureMesh . geometry . getAttribute ( 'position' ) ; let colors = globeTemperatureMesh . geometry . attributes . color ; let color = new THREE . Color ( 0xffffff ) ; const selectedYearAttributes = yearlyAttributes [ Math . min ( yearlyAttributes . length - 1 , yearIndex ) ] var te = d3 . easeCubic ( yearProgress ) ; for ( var i = 0 ; i < position . count * 3 ; i ++ ) { position . array [ i ] = ( ( 1 - te ) * ( position . array [ i ] || 0 ) ) + ( te * selectedYearAttributes . position . array [ i ] ) colors . array [ i ] = ( ( 1 - te ) * ( colors . array [ i ] || 0 ) ) + ( te * selectedYearAttributes . colors . array [ i ] ) } land . rotation . y = - time * speed globeTemperatureMesh . rotation . y = - time * speed const angleScale = d3 . scaleLinear ( ) . range ( [ - 3 / 4 * Math . PI , 3 / 4 * Math . PI ] ) . domain ( [ 0 , yearlyTemparatureMesh . length ] ) yearlyTemparatureMesh . forEach ( ( year , i ) => { const historyProgress = i >= ( 1.05 * progress * yearlyTemparatureMesh . length ) ? 0 : Math . min ( 1 , ( 1.05 * progress - ( i * 1 / ( yearlyTemparatureMesh . length ) ) ) / ( 5 / yearlyTemparatureMesh . length ) ) ; const t = d3 . easeCubic ( historyProgress ) const tScale = d3 . easeLinear ( historyProgress ) year . mesh . scale . set ( 0.6 - ( tScale * 0.5 ) , 0.6 - ( tScale * 0.5 ) , 0.6 - ( tScale * 0.5 ) ) year . mesh . rotation . y = - time * speed year . mesh . position . set ( t * 2 * radius * Math . sin ( angleScale ( i ) ) , t * 2 * radius * Math . cos ( angleScale ( i ) ) , 0 ) } ) colors . needsUpdate = true ; position . needsUpdate = true ; }
Following function animates everything and throws it on the page
Following function animates everything and throws it on the page
//console.log(progress, yearIndex, yearProgress)
 //updating middle mesh
 // updating small multiples
