Browse Source

Fix fog inversion at high zoom + adjust building animation to 100-150%

Fog fix:
- Check all 4 viewport corners before drawing fog
- If entire viewport is within revealed area, skip fog entirely
- Prevents polygon rendering artifacts at high zoom levels

Building animation:
- Changed range from 75-125% to 100-150%
- Buildings now grow up to 50% taller but never shrink below normal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
master
HikeMap User 4 weeks ago
parent
commit
53812cbc6c
  1. 53
      index.html

53
index.html

@ -5143,6 +5143,54 @@
return; return;
} }
// Check if we're zoomed in so far that the viewport is entirely within a revealed area
// If so, skip drawing fog entirely to avoid rendering artifacts
const mapCenter = map.getCenter();
const mapCenterLngLat = [mapCenter.lng, mapCenter.lat];
// Check all four corners of the viewport
const corners = [
map.unproject([0, 0]),
map.unproject([width, 0]),
map.unproject([width, height]),
map.unproject([0, height])
];
// Check if all corners are inside a revealed area
let allCornersRevealed = true;
for (const corner of corners) {
const cornerLngLat = [corner.lng, corner.lat];
let cornerRevealed = false;
// Check homebase
if (playerStats && playerStats.homeBaseLat != null && playerStats.homeBaseLng != null) {
const homeLngLat = [playerStats.homeBaseLng, playerStats.homeBaseLat];
const effectiveHomebaseRadius = playerRevealRadius * homebaseRadiusMultiplier;
if (distanceMeters(cornerLngLat, homeLngLat) <= effectiveHomebaseRadius) {
cornerRevealed = true;
}
}
// Check player explore radius
if (!cornerRevealed && userLocation) {
const playerLngLat = [userLocation.lng, userLocation.lat];
const effectiveExploreRadius = playerExploreRadius * exploreRadiusMultiplier;
if (distanceMeters(cornerLngLat, playerLngLat) <= effectiveExploreRadius) {
cornerRevealed = true;
}
}
if (!cornerRevealed) {
allCornersRevealed = false;
break;
}
}
// If entire viewport is revealed, no need to draw fog
if (allCornersRevealed) {
return;
}
// Draw semi-transparent fog over entire canvas // Draw semi-transparent fog over entire canvas
fogCtx.fillStyle = 'rgba(0, 0, 0, 0.6)'; fogCtx.fillStyle = 'rgba(0, 0, 0, 0.6)';
fogCtx.fillRect(0, 0, width, height); fogCtx.fillRect(0, 0, width, height);
@ -5285,17 +5333,18 @@
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.005; // How fast buildings breathe (higher = faster) 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;
// Create 8 different phase offsets for pseudo-random effect // Create 8 different phase offsets for pseudo-random effect
// Buildings are grouped by their height mod 8, each group has different phase // Buildings are grouped by their height mod 8, each group has different phase
// Range: 100% to 150% (1.0 to 1.5)
const phases = []; const phases = [];
for (let i = 0; i < 8; i++) { for (let i = 0; i < 8; i++) {
const phaseOffset = (i / 8) * Math.PI * 2; // Evenly distributed phases const phaseOffset = (i / 8) * Math.PI * 2; // Evenly distributed phases
phases[i] = 1 + Math.sin(timestamp * buildingAnimationSpeed + phaseOffset) * buildingAnimationRange;
// (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;
} }
// Update building height with per-building variation based on render_height // Update building height with per-building variation based on render_height

Loading…
Cancel
Save