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]
+ ]
]);
}