zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mirror tile content across NS axis (image + N/S labels only)

Browse Source 
User feedback: the corridor arrangement is correct (lng=+12
at screen top in N flight), but the per-tile image and labels
were upside down relative to expectations.

- Image drawing: changed from 180° rotation (-TILE, -TILE on
  both axes) to Y-only flip (TILE, -TILE on Y). Image top
  (north) now lands at canvas bottom; image bottom (south) at
  canvas top. X axis is preserved so image east is still on the
  right within each tile.
- N/S labels: swapped so N is at canvas bottom (= image north)
  and S at canvas top (= image south).
This commit is contained in:
Richard Zink committed 2026-10-08 08:06:27 +02:00
1 parent 91ff8fb9d7
commit 5ba7596ced
1 file changed
+12 -8
Download Patch File Download Diff File Expand all files Collapse all files
vendor/clouds3d.js
Vendored
+12 -8
View File
@@ -346,8 +346,11 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
// (canvasX + 256, canvasY + 256). After this, image north // (canvasX + 256, canvasY + 256). After this, image north
// (high lat) is at canvas bottom and image south at canvas // (high lat) is at canvas bottom and image south at canvas
// top; image east at canvas right, image west at canvas left. // top; image east at canvas right, image west at canvas left.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE, // Flip image only on the Y axis (NS mirror). Image top
-GROUND_TILE_SIZE, -GROUND_TILE_SIZE); // (north) -> canvas bottom, image bottom (south) -> canvas
// top. X axis (EW) is preserved.
groundCtx.drawImage(img, canvasX, canvasY + GROUND_TILE_SIZE,
GROUND_TILE_SIZE, -GROUND_TILE_SIZE);
groundLoadedTiles[tileX + '_' + tileY] = true; groundLoadedTiles[tileX + '_' + tileY] = true;
// Debug labels: 'N' at the image's north edge (top of canvas // Debug labels: 'N' at the image's north edge (top of canvas
@@ -359,12 +362,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
groundCtx.lineWidth = 3; groundCtx.lineWidth = 3;
groundCtx.font = 'bold 48px sans-serif'; groundCtx.font = 'bold 48px sans-serif';
groundCtx.textAlign = 'center'; groundCtx.textAlign = 'center';
// N at canvas top of tile area (= north in image) // N at canvas bottom of tile area (image north is at canvas
groundCtx.strokeText('N', canvasX + 128, canvasY + 56); // bottom because image is Y-flipped).
groundCtx.fillText('N', canvasX + 128, canvasY + 56); groundCtx.strokeText('N', canvasX + 128, canvasY + 240);
// S at canvas bottom of tile area groundCtx.fillText('N', canvasX + 128, canvasY + 240);
groundCtx.strokeText('S', canvasX + 128, canvasY + 240); // S at canvas top
groundCtx.fillText('S', canvasX + 128, canvasY + 240); groundCtx.strokeText('S', canvasX + 128, canvasY + 56);
groundCtx.fillText('S', canvasX + 128, canvasY + 56);
// Tile coords // Tile coords
groundCtx.font = 'bold 20px monospace'; groundCtx.font = 'bold 20px monospace';
groundCtx.strokeText('x=' + tileX + ' y=' + tileY, groundCtx.strokeText('x=' + tileX + ' y=' + tileY,