From 97e37e065a9b8fdf3a9006a344f72cee94cd77a1 Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 09:30:36 +0200 Subject: [PATCH] Remove X-flip on image: tiles now read normally The user wanted the image content to be readable (not X-flipped). The X-swap arrangement (canvasX = -perp + ...) already places east tiles on the right side of the screen, so the X arrangement reads naturally left to right without needing the image to be flipped. The image is now drawn with positive width and height, so place names, street names, and the coordinates labels (x=NNN, y=NNN) are all readable. The X-swap arrangement positions the tiles so that: - west tiles (low x) drawn at canvas left - east tiles (high x) drawn at canvas right So the X coordinates increase left to right when reading the corridor from screen left to screen right. --- vendor/clouds3d.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index 61c6cdc..c9fa510 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -345,14 +345,14 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { return Promise.resolve(false); } return fetchTileImage(tileX, tileY).then(function(img) { - // Mirror image across the NS axis (horizontal / X-flip): - // draw with negative width and positive height, anchored at - // the tile's right edge (canvasX + 256). Image top (north) - // stays at canvas top, image bottom (south) 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); + // Draw image with normal orientation (no X-flip). The image + // content within each tile is readable (place names, streets + // not mirrored). The arrangement uses the X-swap formula + // (canvasX = -perp + ...) to place east tiles on the right of + // the screen, so the X arrangement reads naturally left to + // right. + groundCtx.drawImage(img, canvasX, canvasY, + GROUND_TILE_SIZE, GROUND_TILE_SIZE); groundLoadedTiles[tileX + '_' + tileY] = true; // Thin border so the user can see where one tile ends and the