Remove debug logs, init landscape

assets/index.html

@@ -14,8 +14,6 @@
         body {
             overflow: hidden;
             background: #000;
-            color: #ff0000;
-            font-family: monospace;
         }
 
         canvas {
@@ -24,34 +22,11 @@
             top: 0;
             left: 0;
         }
-
-        #log {
-            position: fixed;
-            top: 10px;
-            left: 10px;
-            z-index: 100;
-            font-size: 12px;
-            max-width: 90%;
-        }
     </style>
 </head>
 <body>
     <canvas id="bgCanvas"></canvas>
-    <div id="log"></div>
     <script>
-        const log = document.getElementById('log');
-        function addLog(msg) {
-            const div = document.createElement('div');
-            div.textContent = msg;
-            log.appendChild(div);
-        }
-
-        window.addEventListener('error', function(e) {
-            addLog('ERROR: ' + e.message + ' at line ' + e.lineno);
-        });
-
-        addLog('Script start');
-
         const canvas = document.getElementById('bgCanvas');
         const ctx = canvas.getContext('2d');
 
@@ -65,7 +40,7 @@
         window.addEventListener('resize', resize);
         resize();
 
-        const camera = { fov: 800 };
+        const camera = { fov: 600 };
 
         function rotateY(p, angle) {
             const cos = Math.cos(angle);
@@ -93,11 +68,12 @@
         class Landscape {
             constructor() {
                 this.gridSize = 120;
-                this.gridRange = 20;
+                this.gridRange = 25;
                 this.offsetX = 0;
                 this.offsetZ = 0;
                 this.triangles = [];
                 this.waterLevel = 20;
+                this.update();
             }
 
             generateHeight(x, z) {
@@ -137,13 +113,10 @@
                         const p3 = this.getPoint(x + 1, z + 1);
                         const p4 = this.getPoint(x, z + 1);
 
-                        const w1 = this.isWater(p1.y);
+                        const w = this.isWater(p1.y) || this.isWater(p2.y) || this.isWater(p3.y) || this.isWater(p4.y);
-                        const w2 = this.isWater(p2.y);
-                        const w3 = this.isWater(p3.y);
-                        const w4 = this.isWater(p4.y);
 
-                        this.triangles.push({ p1, p2, p3, isWater: w1 || w2 || w3, depth: (p1.z + p2.z + p3.z) / 3 });
+                        this.triangles.push({ p1, p2, p3, isWater: w, depth: (p1.z + p2.z + p3.z) / 3 });
-                        this.triangles.push({ p1, p3, p4, isWater: w1 || w3 || w4, depth: (p1.z + p3.z + p4.z) / 3 });
+                        this.triangles.push({ p1, p3, p4, isWater: w, depth: (p1.z + p3.z + p4.z) / 3 });
                     }
                 }
             }
@@ -151,25 +124,16 @@
             draw() {
                 this.triangles.sort((a, b) => b.depth - a.depth);
                 this.triangles.forEach(tri => {
-                    if (!tri || !tri.p1 || !tri.p2 || !tri.p3) return;
+                    const v1 = { x: tri.p2.x - tri.p1.x, y: tri.p2.y - tri.p1.y, z: tri.p2.z - tri.p1.z };
-
+                    const v2 = { x: tri.p3.x - tri.p1.x, y: tri.p3.y - tri.p1.y, z: tri.p3.z - tri.p1.z };
-                    const p1 = tri.p1;
-                    const p2 = tri.p2;
-                    const p3 = tri.p3;
-
-                    const proj1 = p1.project();
-                    const proj2 = p2.project();
-                    const proj3 = p3.project();
-
-                    if (!proj1 || !proj2 || !proj3) return;
-
-                    const v1 = { x: p2.x - p1.x, y: p2.y - p1.y, z: p2.z - p1.z };
-                    const v2 = { x: p3.x - p1.x, y: p3.y - p1.y, z: p3.z - p1.z };
                     const crossZ = v1.x * v2.y - v1.y * v2.x;
                     if (crossZ >= 0) return;
 
-                    const baseColor = tri.isWater ? 'rgba(0, 150, 220, 0.7)' : 'rgba(0, 200, 0, 0.7)';
+                    const proj1 = tri.p1.project();
-                    ctx.fillStyle = baseColor;
+                    const proj2 = tri.p2.project();
+                    const proj3 = tri.p3.project();
+
+                    ctx.fillStyle = tri.isWater ? 'rgba(0, 100, 200, 0.9)' : 'rgba(0, 180, 0, 0.9)';
                     ctx.beginPath();
                     ctx.moveTo(proj1.x, proj1.y);
                     ctx.lineTo(proj2.x, proj2.y);
@@ -233,30 +197,18 @@
                 ctx.shadowBlur = 15;
                 ctx.shadowColor = '#ff0000';
 
-                const transformedVerts = this.vertices.map(v => {
+                this.vertices.forEach(v => {
-                    const rot = rotateY(v, this.yaw || 0);
-                    const cosR = Math.cos(this.roll || 0), sinR = Math.sin(this.roll || 0);
-                    const x1 = rot.x * cosR - rot.y * sinR;
-                    const y1 = rot.x * sinR + rot.y * cosR;
-                    const cosP = Math.cos(this.pitch || 0), sinP = Math.sin(this.pitch || 0);
-                    const y2 = y1 * cosP - rot.z * sinP;
-                    const z2 = y1 * sinP + rot.z * cosP;
-                    return new Point3D(x1, y2, 150 + z2);
-                });
-
-                transformedVerts.forEach(v => {
-                    if (!v) return;
                     const proj = v.project();
                     if (!proj) return;
                     ctx.beginPath();
-                    ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2);
+                    ctx.arc(proj.x, proj.y, 4, 0, Math.PI * 2);
                     ctx.fillStyle = '#ff0000';
                     ctx.fill();
                 });
 
-                for (let i = 0; i < transformedVerts.length - 1; i++) {
+                for (let i = 0; i < this.vertices.length - 1; i++) {
-                    const v1 = transformedVerts[i];
+                    const v1 = this.vertices[i];
-                    const v2 = transformedVerts[i + 1];
+                    const v2 = this.vertices[i + 1];
                     if (!v1 || !v2) continue;
                     const p1 = v1.project();
                     const p2 = v2.project();
@@ -271,40 +223,23 @@
             }
         }
 
-        try {
+        const landscape = new Landscape();
-            const landscape = new Landscape();
+        const airplane = new Airplane();
-            addLog('Landscape created, triangles: ' + landscape.triangles.length);
 
-            const airplane = new Airplane();
+        function animate() {
-            addLog('Airplane created, vertices: ' + airplane.vertices.length);
+            ctx.fillStyle = '#000';
-function animate() {
+            ctx.fillRect(0, 0, width, height);
-                try {
-                    addLog('FRAME start');
-                    ctx.fillStyle = '#000';
-                    ctx.fillRect(0, 0, width, height);
 
-                    addLog('before landscape.update');
+            landscape.update();
-                    landscape.update();
+            landscape.draw();
-                    addLog('before landscape.draw');
-                    landscape.draw();
 
-                    addLog('before airplane.update');
+            airplane.update();
-                    airplane.update();
+            airplane.render();
-                    addLog('before airplane.render');
-                    airplane.render();
-                    addLog('FRAME end');
-                } catch (err) {
-                    addLog('ANIM ERR: ' + err.message + ' at line ' + (err.lineNumber || '?') + ' stack: ' + (err.stack || ''));
-                    return;
-                }
-                requestAnimationFrame(animate);
-            }
 
-            animate();
+            requestAnimationFrame(animate);
-            addLog('Animation started');
-        } catch (e) {
-            addLog('CATCH: ' + e.message + ' at line ' + (e.lineNumber || '?'));
         }
+
+        animate();
     </script>
 </body>
 </html>