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

X-swap via arrangement, no image X-flip

Browse Source 
User clarified: the X-swap should be in the ARRANGEMENT (east
tiles on screen right), NOT in the image (so map content is
readable). Previous attempts had it the other way around.

Combined state:
- canvasX = -perp + ... (X-swap): east (1102) on screen right,
  west (1098) on screen left. x increases left to right.
- drawImage with positive width: no image X-flip. Map content
  reads normally, place names not mirrored.
- Labels in normal orientation.

So the X mirror is in the corridor arrangement, not in the
satellite image content. The user can read the map normally.
This commit is contained in:
Richard Zink committed 2026-10-08 10:29:08 +02:00
1 parent f0641bd4bd
commit e4170bee62
1 file changed
+12 -10
Download Patch File Download Diff File Expand all files Collapse all files
vendor/clouds3d.js
Vendored
+12 -10
View File
@@ -337,10 +337,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
// UNPACK_FLIP_Y_WEBGL=true inverts V: canvas top -> texture V=1 (top). // UNPACK_FLIP_Y_WEBGL=true inverts V: canvas top -> texture V=1 (top).
// For lng axis (Y): invert canvasY so lng=+12 (corridor front in // For lng axis (Y): invert canvasY so lng=+12 (corridor front in
// N flight) lands at small canvasY (= screen top after flip). // N flight) lands at small canvasY (= screen top after flip).
// === NO X-SWAP, NO X-FLIP BUILD v5 === // === X-SWAP ARRANGEMENT, NO IMAGE FLIP BUILD v6 ===
// Natural order, no swap. East (perp=-2) -> canvasX 128 (left), // X-swap via arrangement: east (perp=-2) -> canvasX 1152 (right),
// west (perp=+2) -> canvasX 1152 (right). No image X-flip. // west (perp=+2) -> canvasX 128 (left). So x INCREASES left-to-right.
var canvasX = (perp + halfPerp + 0.5) * GROUND_TILE_SIZE; // No image X-flip: map content reads normally (place names not
// mirrored). Labels in normal orientation.
var canvasX = (-perp + halfPerp + 0.5) * GROUND_TILE_SIZE;
var canvasY = (lng + halfLong + 0.5) * GROUND_TILE_SIZE; var canvasY = (lng + halfLong + 0.5) * GROUND_TILE_SIZE;
if (canvasX < 0 || canvasX >= groundCanvas.width || canvasY < 0 || canvasY >= groundCanvas.height) { if (canvasX < 0 || canvasX >= groundCanvas.width || canvasY < 0 || canvasY >= groundCanvas.height) {
return Promise.resolve(false); return Promise.resolve(false);
@@ -350,12 +352,12 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
// the corridor orientation (east tiles have their image east // the corridor orientation (east tiles have their image east
// on the left of the drawn area, west tiles on the right). // on the left of the drawn area, west tiles on the right).
// Labels are drawn separately in normal orientation, so the // Labels are drawn separately in normal orientation, so the
// X-flip activated: draw with negative width to mirror // Normal orientation (no X-flip). The X-swap is done via the
// horizontally. The image is anchored at the right edge // arrangement formula (canvasX = -perp + ...) so east tiles
// (canvasX + TILE_SIZE) and extends leftward, producing a // are on the right of the screen. The map content within each
// horizontally mirrored image. // tile reads normally.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY, groundCtx.drawImage(img, canvasX, canvasY,
-GROUND_TILE_SIZE, GROUND_TILE_SIZE); GROUND_TILE_SIZE, GROUND_TILE_SIZE);
groundLoadedTiles[tileX + '_' + tileY] = true; groundLoadedTiles[tileX + '_' + tileY] = true;
// Thin border so the user can see where one tile ends and the // Thin border so the user can see where one tile ends and the