From 3b11b2e62ffb6dc3c959d7e85054678d5ebd208f Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Sat, 10 Jan 2026 21:27:44 -0600 Subject: [PATCH] Make building animation faster and random per-building --- index.html | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 457b827..96f6413 100644 --- a/index.html +++ b/index.html @@ -5258,25 +5258,39 @@ map.on('pitch', updateFogOfWar); // ===================== - // ANIMATED BUILDINGS + // ANIMATED BUILDINGS (Random per-building) // ===================== 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%) + const buildingAnimationSpeed = 0.005; // How fast buildings breathe (higher = faster) + const buildingAnimationRange = 0.25; // How much they grow/shrink (0.25 = ±25%) 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; + // Create 8 different phase offsets for pseudo-random effect + // Buildings are grouped by their height mod 8, each group has different phase + const phases = []; + for (let i = 0; i < 8; i++) { + const phaseOffset = (i / 8) * Math.PI * 2; // Evenly distributed phases + phases[i] = 1 + Math.sin(timestamp * buildingAnimationSpeed + phaseOffset) * buildingAnimationRange; + } - // Update building height if layer exists + // Update building height with per-building variation based on render_height if (map.getLayer('buildings-3d')) { map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [ '*', ['get', 'render_height'], - multiplier + ['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] + ] ]); }