diff --git a/index.html b/index.html index 2d05eaf..457b827 100644 --- a/index.html +++ b/index.html @@ -5257,6 +5257,56 @@ map.on('rotate', updateFogOfWar); map.on('pitch', updateFogOfWar); + // ===================== + // ANIMATED BUILDINGS + // ===================== + let buildingAnimationEnabled = true; // Set to false to disable + let buildingAnimationId = null; + const buildingAnimationSpeed = 0.001; // How fast buildings breathe + const buildingAnimationRange = 0.3; // How much they grow/shrink (0.3 = ±30%) + + function animateBuildings(timestamp) { + if (!buildingAnimationEnabled) return; + + // Calculate height multiplier using sine wave (oscillates between 0.7 and 1.3) + const multiplier = 1 + Math.sin(timestamp * buildingAnimationSpeed) * buildingAnimationRange; + + // Update building height if layer exists + if (map.getLayer('buildings-3d')) { + map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [ + '*', + ['get', 'render_height'], + multiplier + ]); + } + + buildingAnimationId = requestAnimationFrame(animateBuildings); + } + + // Start the animation + if (buildingAnimationEnabled) { + buildingAnimationId = requestAnimationFrame(animateBuildings); + } + + // Function to toggle building animation + function toggleBuildingAnimation() { + buildingAnimationEnabled = !buildingAnimationEnabled; + if (buildingAnimationEnabled) { + buildingAnimationId = requestAnimationFrame(animateBuildings); + console.log('Building animation enabled'); + } else { + if (buildingAnimationId) { + cancelAnimationFrame(buildingAnimationId); + buildingAnimationId = null; + } + // Reset to normal height + if (map.getLayer('buildings-3d')) { + map.setPaintProperty('buildings-3d', 'fill-extrusion-height', ['get', 'render_height']); + } + console.log('Building animation disabled'); + } + } + // NOTE: initFogOfWar() is called lazily from updateFogOfWar() to avoid // temporal dead zone issues with navMode variable