From 96dedf252de29af9efbc6f6388bb006189dd75a9 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Tue, 6 Oct 2026 16:48:39 +0200
Subject: [PATCH] Complete rewrite: isometric 32x32 tiles, 30deg camera angle

---
 assets/index.html | 251 ++++++++++++++--------------------------------
 1 file changed, 74 insertions(+), 177 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index dfcbef8..abb2b06 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wireframe Flight Background</title>
+    <title>Isometric Tiles</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { overflow: hidden; background: #000; }
@@ -15,7 +15,8 @@
     <script>
     var c = document.getElementById('c');
     var ctx = c.getContext('2d');
-    var W = 0, H = 0;
+    var W, H;
+    var TILE = 32;
 
     function resize() {
         W = c.width = window.innerWidth;
@@ -24,212 +25,108 @@
     window.addEventListener('resize', resize);
     resize();
 
-    var offX = 0, offZ = 0;
+    var offX = 0, offY = 0;
+    var speedX = 0, speedY = 0;
+    var targetSpeedX = -2, targetSpeedY = -1;
+
+    var angle = Math.PI / 6;
 
     function project(x, y, z) {
-        var fov = 800;
-        var scale = fov / (fov + z);
-        var isoX = y - x;
-        var isoY = ((x + y) * 0.5) - z;
+        var fov = 600;
+        var scale = fov / (600 + z);
+        var cosA = Math.cos(angle);
+        var sinA = Math.sin(angle);
+        var isoX = x * cosA - y * cosA;
+        var isoY = x * sinA + y * sinA - z;
         var sx = isoX * scale + W / 2;
         var sy = isoY * scale + H / 2;
-        return [sx, sy];
+        return [sx, sy, scale];
     }
 
-    function clipTriangle(p1, p2, p3, water) {
-        var points = [p1, p2, p3];
-        var clipped = [];
-
-        for (var i = 0; i < points.length; i++) {
-            var p1 = points[i];
-            var p2 = points[(i + 1) % 3];
-
-            var t1 = (300 - p1[2]) / (p2[2] - p1[2]);
-            var t2 = (300 - p2[2]) / (p1[2] - p2[2]);
-
-            if (p1[2] >= 300 && p2[2] >= 300) continue;
-            if (p1[2] < 300 && p2[2] < 300) {
-                clipped.push(p2);
-            } else {
-                var tt = (300 - p1[2]) / (p2[2] - p1[2]);
-                var ny = p1[1] + (p2[1] - p1[1]) * tt;
-                var nx = p1[0] + (p2[0] - p1[0]) * tt;
-                var nz = 300;
-                clipped.push([nx, ny, nz]);
-                if (p1[2] < 300) clipped.push(p1);
-            }
-        }
-        return clipped;
-    }
-
-    function getHeight(x, z) {
+    function getHeight(x, y) {
         var h = 0;
-        h += Math.sin(x / 200) * 60;
-        h += Math.cos(z / 200) * 60;
-        h += Math.sin(x / 100 + z / 200) * 30;
-        h += Math.cos(z / 100 - x / 200) * 25;
+        h += Math.sin(x * 0.05) * 8;
+        h += Math.cos(y * 0.05) * 8;
+        h += Math.sin(x * 0.1 + y * 0.05) * 4;
+        h += Math.cos(y * 0.1 - x * 0.05) * 3;
         return h;
     }
 
-    var triangles = [];
+    var tiles = [];
 
-    function generateLandscape() {
-        triangles = [];
-        var range = 30;
-        var size = 100;
-        for (var x = -range; x <= range; x++) {
-            for (var z = -range; z <= range; z++) {
-                var wx = x * size + offX;
-                var wz = z * size + offZ;
-                var h1 = getHeight(wx, wz);
-                var h2 = getHeight(wx + size, wz);
-                var h3 = getHeight(wx + size, wz + size);
-                var h4 = getHeight(wx, wz + size);
-                var water = (h1 < 30 || h2 < 30 || h3 < 30 || h4 < 30);
-                var p1 = [wx, h1, wz];
-                var p2 = [wx + size, h2, wz];
-                var p3 = [wx + size, h3, wz + size];
-                var p4 = [wx, h4, wz + size];
-                triangles.push({ p1: p1, p2: p2, p3: p3, water: water, depth: (p1[2] + p2[2] + p3[2]) / 3 });
-                triangles.push({ p1: p1, p2: p3, p3: p4, water: water, depth: (p1[2] + p3[2] + p4[2]) / 3 });
+    function generateTiles() {
+        tiles = [];
+        var rangeX = Math.ceil(W / TILE) + 4;
+        var rangeY = Math.ceil(H / TILE) + 4;
+
+        for (var x = -rangeX; x <= rangeX; x++) {
+            for (var y = -rangeY; y <= rangeY; y++) {
+                var wx = x * TILE + offX;
+                var wy = y * TILE + offY;
+                var h = getHeight(wx, wy);
+                tiles.push({ x: wx, y: wy, h: h });
             }
         }
     }
 
-    function drawLandscape() {
-        triangles.sort(function(a, b) { return b.depth - a.depth; });
-        for (var i = 0; i < triangles.length; i++) {
-            var t = triangles[i];
-            if (t.p1[2] > 250 && t.p2[2] > 250 && t.p3[2] > 250) continue;
+    function drawTiles() {
+        tiles.sort(function(a, b) {
+            return ((a.x + a.y) - (b.x + b.y));
+        });
 
-            var p1 = project(t.p1[0], t.p1[1], t.p1[2]);
-            var p2 = project(t.p2[0], t.p2[1], t.p2[2]);
-            var p3 = project(t.p3[0], t.p3[1], t.p3[2]);
+        for (var i = 0; i < tiles.length; i++) {
+            var t = tiles[i];
+            var wx = t.x, wy = t.y, h = t.h;
 
-            ctx.fillStyle = t.water ? 'rgba(0, 80, 200, 0.85)' : 'rgba(0, 160, 0, 0.85)';
+            var x1 = wx, y1 = wy + TILE, z1 = h;
+            var x2 = wx + TILE, y2 = wy + TILE, z2 = getHeight(wx + TILE, wy + TILE);
+            var x3 = wx + TILE, y3 = wy, z3 = getHeight(wx + TILE, wy);
+            var x4 = wx, y4 = wy, z4 = h;
+
+            var p1 = project(x1, y1, z1);
+            var p2 = project(x2, y2, z2);
+            var p3 = project(x3, y3, z3);
+            var p4 = project(x4, y4, z4);
+
+            if (p1[1] < -100 || p1[1] > H + 100) continue;
+            if (p4[1] < -100 || p4[1] > H + 100) continue;
+
+            var water = h < 2;
+            var baseR = water ? 0 : 0;
+            var baseG = water ? 80 : 140;
+            var baseB = water ? 180 : 0;
+
+            var lighting = 0.4 + Math.max(0, Math.sin(angle) * 0.5 + 0.3);
+            var r = Math.floor(baseR * lighting);
+            var g = Math.floor(baseG * lighting);
+            var b = Math.floor(baseB * lighting);
+
+            ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
             ctx.beginPath();
             ctx.moveTo(p1[0], p1[1]);
             ctx.lineTo(p2[0], p2[1]);
             ctx.lineTo(p3[0], p3[1]);
+            ctx.lineTo(p4[0], p4[1]);
             ctx.closePath();
             ctx.fill();
 
-            ctx.strokeStyle = t.water ? '#00ccff' : '#00ff66';
-            ctx.lineWidth = 1;
+            ctx.strokeStyle = water ? 'rgba(0, 200, 255, 0.5)' : 'rgba(0, 255, 100, 0.5)';
+            ctx.lineWidth = 0.5;
             ctx.stroke();
         }
     }
 
-    function drawHorizon() {
-        var hY = H / 2 - 50;
-        ctx.strokeStyle = 'rgba(255, 200, 100, 0.3)';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(0, hY);
-        ctx.lineTo(W, hY);
-        ctx.stroke();
-    }
-
-    var planeVertices = [];
-    function initPlane() {
-        planeVertices = [];
-        var segs = 8, len = 60, rad = 6;
-        for (var i = 0; i < segs; i++) {
-            var a = (i / segs) * Math.PI * 2;
-            planeVertices.push([Math.cos(a) * rad, 0, Math.sin(a) * rad]);
-        }
-        for (var i = 0; i < segs; i++) {
-            var a = (i / segs) * Math.PI * 2;
-            planeVertices.push([Math.cos(a) * rad, len, Math.sin(a) * rad]);
-        }
-        planeVertices.push([-40, 30, 0]);
-        planeVertices.push([-40, 50, 0]);
-        planeVertices.push([40, 50, 0]);
-        planeVertices.push([40, 30, 0]);
-    }
-
-    function drawPlane() {
-        var yaw = -0.4;
-        var roll = 0;
-        var pitch = 0.15;
-
-        var transformed = planeVertices.map(function(v) {
-            var x = v[0], y = v[1], z = v[2];
-            var cy = Math.cos(yaw), sy = Math.sin(yaw);
-            var x1 = x * cy - z * sy;
-            var z1 = x * sy + z * cy;
-            var cr = Math.cos(roll), sr = Math.sin(roll);
-            var x2 = x1 * cr - y * sr;
-            var y1 = x1 * sr + y * cr;
-            var cp = Math.cos(pitch), sp = Math.sin(pitch);
-            var y2 = y1 * cp - z1 * sp;
-            var z2 = y1 * sp + z1 * cp;
-            return [x2, y2 + 120, z2 + 100];
-        });
-
-        ctx.strokeStyle = '#ff0000';
-        ctx.lineWidth = 2;
-        ctx.shadowBlur = 12;
-        ctx.shadowColor = '#ff0000';
-
-        for (var i = 0; i < transformed.length; i++) {
-            var p = project(transformed[i][0], transformed[i][1], transformed[i][2]);
-            ctx.fillStyle = '#ff0000';
-            ctx.beginPath();
-            ctx.arc(p[0], p[1], 3, 0, Math.PI * 2);
-            ctx.fill();
-        }
-
-        for (var i = 0; i < 7; i++) {
-            var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
-            var p2 = project(transformed[i + 1][0], transformed[i + 1][1], transformed[i + 1][2]);
-            ctx.beginPath();
-            ctx.moveTo(p1[0], p1[1]);
-            ctx.lineTo(p2[0], p2[1]);
-            ctx.stroke();
-        }
-        ctx.beginPath();
-        var pFirst = project(transformed[0][0], transformed[0][1], transformed[0][2]);
-        var pLast = project(transformed[7][0], transformed[7][1], transformed[7][2]);
-        ctx.moveTo(pFirst[0], pFirst[1]);
-        ctx.lineTo(pLast[0], pLast[1]);
-        ctx.stroke();
-
-        for (var i = 8; i <= 11; i++) {
-            var j = (i + 1 > 11) ? 8 : i + 1;
-            var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
-            var p2 = project(transformed[j][0], transformed[j][1], transformed[j][2]);
-            ctx.beginPath();
-            ctx.moveTo(p1[0], p1[1]);
-            ctx.lineTo(p2[0], p2[1]);
-            ctx.stroke();
-        }
-
-        for (var i = 12; i <= 15; i++) {
-            var j = (i + 1 > 15) ? 12 : i + 1;
-            var p1 = project(transformed[i][0], transformed[i][1], transformed[i][2]);
-            var p2 = project(transformed[j][0], transformed[j][1], transformed[j][2]);
-            ctx.beginPath();
-            ctx.moveTo(p1[0], p1[1]);
-            ctx.lineTo(p2[0], p2[1]);
-            ctx.stroke();
-        }
-
-        ctx.shadowBlur = 0;
-    }
-
-    initPlane();
-
     function frame() {
-        ctx.fillStyle = '#000';
+        ctx.fillStyle = '#001020';
         ctx.fillRect(0, 0, W, H);
 
-        offX -= 1.5;
-        offZ -= 0.7;
-        generateLandscape();
-        drawLandscape();
-        drawHorizon();
-        drawPlane();
+        speedX += (targetSpeedX - speedX) * 0.05;
+        speedY += (targetSpeedY - speedY) * 0.05;
+        offX += speedX;
+        offY += speedY;
+
+        generateTiles();
+        drawTiles();
 
         requestAnimationFrame(frame);
     }