Browse Source

Make building animation faster and random per-building

master
HikeMap User 4 weeks ago
parent
commit
3b11b2e62f
  1. 28
      index.html

28
index.html

@ -5258,25 +5258,39 @@
map.on('pitch', updateFogOfWar); map.on('pitch', updateFogOfWar);
// ===================== // =====================
// ANIMATED BUILDINGS
// ANIMATED BUILDINGS (Random per-building)
// ===================== // =====================
let buildingAnimationEnabled = true; // Set to false to disable let buildingAnimationEnabled = true; // Set to false to disable
let buildingAnimationId = null; 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) { function animateBuildings(timestamp) {
if (!buildingAnimationEnabled) return; 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')) { if (map.getLayer('buildings-3d')) {
map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [ map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [
'*', '*',
['get', 'render_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]
]
]); ]);
} }

Loading…
Cancel
Save