From 273fcc23903e497461f19fc39707d5add025906c Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Tue, 6 Oct 2026 17:04:15 +0200
Subject: [PATCH] Convert to voxel terrain: stable tiles, animated heights only

---
 assets/index.html | 147 ++++++++++++++++++++++++++++------------------
 1 file changed, 90 insertions(+), 57 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index 24cf0ec..74016b6 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>Isometric Tiles</title>
+    <title>Isometric Voxel Terrain</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { overflow: hidden; background: #000; }
@@ -17,6 +17,7 @@
     var ctx = c.getContext('2d');
     var W, H;
     var TILE = 32;
+    var HEIGHT_UNIT = 6;
 
     function resize() {
         W = c.width = window.innerWidth;
@@ -25,45 +26,45 @@
     window.addEventListener('resize', resize);
     resize();
 
-    var offX = 0, offY = 0;
-    var speedX = 0, speedY = 0;
-    var targetSpeedX = 0, targetSpeedY = 2;
-
     var angle = Math.PI / 6;
+    var cosA = Math.cos(angle);
+    var sinA = Math.sin(angle);
 
     function project(x, y, 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, scale];
+        var scale = 1;
+        var isoX = (x - y) * cosA * scale;
+        var isoY = ((x + y) * sinA - z) * scale;
+        var sx = isoX + W / 2;
+        var sy = isoY + H / 2;
+        return [sx, sy];
     }
 
-    function getHeight(x, y) {
+    function getHeight(x, y, time) {
         var h = 0;
-        h += Math.sin(x * 0.02) * 4;
-        h += Math.cos(y * 0.02) * 4;
-        h += Math.sin(x * 0.04 + y * 0.02) * 2;
-        h += Math.cos(y * 0.04 - x * 0.02) * 1.5;
-        return h;
+        h += Math.sin(x * 0.03 + time * 0.5) * 3;
+        h += Math.cos(y * 0.03 + time * 0.4) * 3;
+        h += Math.sin(x * 0.05 + y * 0.03 + time * 0.3) * 1.5;
+        h += Math.cos(y * 0.05 - x * 0.03 + time * 0.6) * 1;
+        return Math.round(h);
     }
 
+    function isWater(h) {
+        return h <= -2;
+    }
+
+    var time = 0;
     var tiles = [];
 
     function generateTiles() {
         tiles = [];
-        var rangeX = Math.ceil(W / TILE) + 4;
-        var rangeY = Math.ceil(H / TILE) + 4;
+        var rangeX = Math.ceil(W / (TILE * cosA * 2)) + 2;
+        var rangeY = Math.ceil(H / (TILE * sinA * 2)) + 2;
 
         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);
+                var wx = x * TILE;
+                var wy = y * TILE;
+                var h = getHeight(wx, wy, time);
                 tiles.push({ x: wx, y: wy, h: h });
             }
         }
@@ -78,52 +79,84 @@
             var t = tiles[i];
             var wx = t.x, wy = t.y, h = t.h;
 
-            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 water = isWater(h);
+            var topColor = water ? '#2299dd' : '#33aa33';
+            var leftColor = water ? '#1166aa' : '#226622';
+            var rightColor = water ? '#0d4477' : '#114411';
 
-            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 (h > 0) {
+                var lighting = 0.5 + Math.max(0, sinA * 0.3 + 0.2);
+                topColor = applyLighting(topColor, lighting);
+                leftColor = applyLighting(leftColor, lighting * 0.7);
+                rightColor = applyLighting(rightColor, lighting * 0.5);
+            } else if (water) {
+                topColor = '#2299dd';
+                leftColor = '#1166aa';
+                rightColor = '#0d4477';
+            }
 
-            if (p1[1] < -100 || p1[1] > H + 100) continue;
-            if (p4[1] < -100 || p4[1] > H + 100) continue;
+            var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
+            var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
+            var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
+            var top4 = project(wx, wy, h * HEIGHT_UNIT);
 
-            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.fillStyle = topColor;
             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.moveTo(top1[0], top1[1]);
+            ctx.lineTo(top2[0], top2[1]);
+            ctx.lineTo(top3[0], top3[1]);
+            ctx.lineTo(top4[0], top4[1]);
             ctx.closePath();
             ctx.fill();
 
-            ctx.strokeStyle = water ? 'rgba(0, 200, 255, 0.5)' : 'rgba(0, 255, 100, 0.5)';
-            ctx.lineWidth = 0.5;
-            ctx.stroke();
+            if (h !== 0 || water) {
+                var bot1 = project(wx, wy + TILE, 0);
+                var bot2 = project(wx + TILE, wy + TILE, 0);
+                var bot3 = project(wx + TILE, wy, 0);
+                var bot4 = project(wx, wy, 0);
+
+                ctx.fillStyle = leftColor;
+                ctx.beginPath();
+                ctx.moveTo(bot4[0], bot4[1]);
+                ctx.lineTo(top4[0], top4[1]);
+                ctx.lineTo(top1[0], top1[1]);
+                ctx.lineTo(bot1[0], bot1[1]);
+                ctx.closePath();
+                ctx.fill();
+
+                ctx.fillStyle = rightColor;
+                ctx.beginPath();
+                ctx.moveTo(bot3[0], bot3[1]);
+                ctx.lineTo(top3[0], top3[1]);
+                ctx.lineTo(top4[0], top4[1]);
+                ctx.lineTo(bot4[0], bot4[1]);
+                ctx.closePath();
+                ctx.fill();
+            }
+
+            if (h > 0) {
+                ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
+                ctx.lineWidth = 1;
+                ctx.strokeRect(top1[0], top1[1], top3[0] - top1[0], top3[1] - top1[1]);
+            }
         }
     }
 
+    function applyLighting(color, factor) {
+        var r = parseInt(color.substr(1, 2), 16);
+        var g = parseInt(color.substr(3, 2), 16);
+        var b = parseInt(color.substr(5, 2), 16);
+        r = Math.floor(r * factor);
+        g = Math.floor(g * factor);
+        b = Math.floor(b * factor);
+        return 'rgb(' + r + ',' + g + ',' + b + ')';
+    }
+
     function frame() {
         ctx.fillStyle = '#001020';
         ctx.fillRect(0, 0, W, H);
 
-        speedX += (targetSpeedX - speedX) * 0.05;
-        speedY += (targetSpeedY - speedY) * 0.05;
-        offX += speedX;
-        offY += speedY;
+        time += 0.02;
 
         generateTiles();
         drawTiles();