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

NS mirror of tile image only (X-flip, no rotation)

Browse Source 
User wants the tile texture mirrored across the NS axis only
(no 180 rotation). drawImage with width=-TILE, height=+TILE
flips only the X axis:
- Image top (north) stays at canvas top
- Image bottom (south) stays at canvas bottom
- Image left (west) -> canvas right
- Image right (east) -> canvas left

Labels N/S moved to match the new (un-Y-flipped) orientation:
N at canvas top, S at canvas bottom. The tile arrangement in
the corridor is unchanged.
This commit is contained in:
Richard Zink committed 2026-10-08 08:11:23 +02:00
1 parent 2f7c09fc16
commit acac6dccfc
1 file changed
+12 -13
Download Patch File Download Diff File Expand all files Collapse all files
vendor/clouds3d.js
Vendored
+12 -13
View File
@@ -346,12 +346,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
// (canvasX + 256, canvasY + 256). After this, image north
// (high lat) is at canvas bottom and image south at canvas
// top; image east at canvas right, image west at canvas left.
// Flip image 180° (both X and Y). Image top (north) -> canvas
// bottom, image bottom (south) -> canvas top, image left
// (west) -> canvas right, image right (east) -> canvas left.
// Labels N/S already match the Y-flipped orientation.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE,
-GROUND_TILE_SIZE, -GROUND_TILE_SIZE);
// Mirror image across the NS axis (X-only flip). Image top
// (north) stays at canvas top, image bottom (south) stays
// at canvas bottom. Image left (west) -> canvas right, image
// right (east) -> canvas left.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY,
-GROUND_TILE_SIZE, GROUND_TILE_SIZE);
groundLoadedTiles[tileX + '_' + tileY] = true;
// Debug labels: 'N' at the image's north edge (top of canvas
@@ -363,13 +363,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
groundCtx.lineWidth = 3;
groundCtx.font = 'bold 48px sans-serif';
groundCtx.textAlign = 'center';
// N at canvas bottom of tile area (image north is at canvas
// bottom because image is Y-flipped).
groundCtx.strokeText('N', canvasX + 128, canvasY + 240);
groundCtx.fillText('N', canvasX + 128, canvasY + 240);
// S at canvas top
groundCtx.strokeText('S', canvasX + 128, canvasY + 56);
groundCtx.fillText('S', canvasX + 128, canvasY + 56);
// N at canvas top of tile area (image north is at top)
groundCtx.strokeText('N', canvasX + 128, canvasY + 56);
groundCtx.fillText('N', canvasX + 128, canvasY + 56);
// S at canvas bottom
groundCtx.strokeText('S', canvasX + 128, canvasY + 240);
groundCtx.fillText('S', canvasX + 128, canvasY + 240);
// Tile coords
groundCtx.font = 'bold 20px monospace';
groundCtx.strokeText('x=' + tileX + ' y=' + tileY,