From 523f065eb800701bea25d89cdff5ab315fd2473d Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Sat, 10 Jan 2026 21:36:50 -0600 Subject: [PATCH] Simplify building animation - all buildings same timing for performance --- index.html | 29 +++++++---------------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index d7fd3ee..0334c2e 100644 --- a/index.html +++ b/index.html @@ -5328,40 +5328,25 @@ map.on('pitch', updateFogOfWar); // ===================== - // ANIMATED BUILDINGS (Random per-building) + // ANIMATED BUILDINGS // ===================== let buildingAnimationEnabled = true; // Set to false to disable let buildingAnimationId = null; - const buildingAnimationSpeed = 0.005; // How fast buildings breathe (higher = faster) + const buildingAnimationSpeed = 0.003; // How fast buildings breathe function animateBuildings(timestamp) { if (!buildingAnimationEnabled) return; - // Create 8 different phase offsets for pseudo-random effect - // Buildings are grouped by their height mod 8, each group has different phase - // Range: 100% to 150% (1.0 to 1.5) - const phases = []; - for (let i = 0; i < 8; i++) { - const phaseOffset = (i / 8) * Math.PI * 2; // Evenly distributed phases - // (sin + 1) gives 0 to 2, multiply by 0.25 gives 0 to 0.5, add 1 gives 1.0 to 1.5 - phases[i] = 1 + (Math.sin(timestamp * buildingAnimationSpeed + phaseOffset) + 1) * 0.25; - } + // Single multiplier for all buildings: 100% to 150% + // (sin + 1) gives 0 to 2, multiply by 0.25 gives 0 to 0.5, add 1 gives 1.0 to 1.5 + const multiplier = 1 + (Math.sin(timestamp * buildingAnimationSpeed) + 1) * 0.25; - // Update building height with per-building variation based on render_height + // Update building height if (map.getLayer('buildings-3d')) { map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [ '*', ['get', 'render_height'], - ['case', - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 1], phases[0], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 2], phases[1], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 3], phases[2], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 4], phases[3], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 5], phases[4], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 6], phases[5], - ['<', ['%', ['to-number', ['get', 'render_height'], 10], 8], 7], phases[6], - phases[7] - ] + multiplier ]); }