From 99827e420be861d854744f8747517d228cde85c2 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Tue, 6 Oct 2026 15:17:32 +0200
Subject: [PATCH] Fix: isometric view, moving landscape with cleanup

---
 assets/index.html | 72 +++++++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index f0a6568..b36aa02 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -41,8 +41,8 @@
         resize();
 
         const camera = {
-            fov: 600,
-            zoom: 1
+            fov: 800,
+            angle: Math.PI / 4
         };
 
         class Point3D {
@@ -54,8 +54,10 @@
 
             project() {
                 const scale = camera.fov / (camera.fov + this.z);
-                const x2d = this.x * scale + width / 2;
-                const y2d = this.y * scale + height / 2;
+                const xIso = this.x - this.z;
+                const yIso = (this.x + this.z) * 0.5 - this.y;
+                const x2d = xIso * scale + width / 2;
+                const y2d = yIso * scale + height / 3;
                 return { x: x2d, y: y2d, scale: scale };
             }
         }
@@ -63,21 +65,12 @@
         class Landscape {
             constructor() {
                 this.gridSize = 60;
-                this.gridRange = 30;
-                this.offsetZ = 0;
+                this.gridRange = 40;
+                this.offsetX = -this.gridRange * this.gridSize;
+                this.offsetZ = -this.gridRange * this.gridSize;
                 this.points = new Map();
                 this.waterLevel = -15;
-                this.init();
-            }
-
-            init() {
-                const spacing = 40;
-                for (let x = -200; x <= 200; x += spacing) {
-                    for (let z = -200; z <= 200; z += spacing) {
-                        const y = Math.sin(x / 30) * 20 + Math.cos(z / 30) * 20 + Math.random() * 10;
-                        this.points.set(`${x},${z}`, new Point3D(x, y, z));
-                    }
-                }
+                this.updateOffset();
             }
 
             getKey(x, z) {
@@ -100,21 +93,22 @@
                 return y < this.waterLevel;
             }
 
-            update() {
+            updateOffset() {
+                this.offsetX -= 1;
                 this.offsetZ -= 0.5;
-                if (this.offsetZ < -this.gridSize) {
-                    this.offsetZ = 0;
+                if (this.offsetX < -this.gridSize) {
+                    this.offsetX = 0;
                 }
             }
 
             getPoint(x, z) {
-                const key = this.getKey(x, z + this.offsetZ);
+                const key = this.getKey(x + this.offsetX, z + this.offsetZ);
                 if (this.points.has(key)) {
                     return this.points.get(key);
                 }
 
-                const worldX = x * this.gridSize;
-                const worldZ = (z + this.offsetZ / this.gridSize) * this.gridSize;
+                const worldX = x * this.gridSize + this.offsetX;
+                const worldZ = z * this.gridSize + this.offsetZ;
                 const y = this.generateHeight(worldX, worldZ);
                 const point = new Point3D(worldX, y, worldZ);
                 point.isWater = this.isWater(worldX, worldZ, y);
@@ -122,12 +116,25 @@
                 return point;
             }
 
+            update() {
+                this.updateOffset();
+                this.points.forEach((val, key) => {
+                    const [gx, gz] = key.split(',').map(Number);
+                    if (gx > this.gridRange || gz > this.gridRange) {
+                        this.points.delete(key);
+                    }
+                });
+            }
+
             draw() {
                 ctx.lineWidth = 1;
                 ctx.globalAlpha = 0.6;
 
-                for (let x = -this.gridRange; x <= this.gridRange; x++) {
-                    for (let z = 0; z <= this.gridRange * 2; z++) {
+                const minIdx = -this.gridRange;
+                const maxIdx = this.gridRange;
+
+                for (let x = minIdx; x <= maxIdx; x++) {
+                    for (let z = minIdx; z <= maxIdx; z++) {
                         const p1 = this.getPoint(x, z);
                         const p2 = this.getPoint(x + 1, z);
                         const p3 = this.getPoint(x, z + 1);
@@ -144,14 +151,14 @@
                             ctx.globalAlpha = 0.6;
                         }
 
-                        if (x < this.gridRange) {
+                        if (x < maxIdx) {
                             ctx.beginPath();
                             ctx.moveTo(proj1.x, proj1.y);
                             ctx.lineTo(proj2.x, proj2.y);
                             ctx.stroke();
                         }
 
-                        if (z < this.gridRange * 2) {
+                        if (z < maxIdx) {
                             ctx.beginPath();
                             ctx.moveTo(proj1.x, proj1.y);
                             ctx.lineTo(proj3.x, proj3.y);
@@ -166,11 +173,10 @@
 
         class Airplane {
             constructor() {
-                this.z = 80;
-                this.vx = 1.5;
+                this.z = 100;
+                this.yaw = 0;
                 this.roll = 0;
                 this.pitch = 0;
-                this.yaw = 0;
                 this.wireframe = [];
                 this.init();
             }
@@ -200,9 +206,9 @@
             }
 
             update() {
-                this.yaw = (Date.now() / 1000) * 0.3;
-                this.roll = Math.sin(Date.now() / 800) * 0.4;
-                this.pitch = Math.cos(Date.now() / 600) * 0.25;
+                this.yaw = Math.sin(Date.now() / 1000) * 0.2;
+                this.roll = Math.sin(Date.now() / 600) * 0.4;
+                this.pitch = Math.cos(Date.now() / 800) * 0.25;
             }
 
             draw() {