Update app.py

app.py

@@ -181,8 +181,8 @@ html_code = """
             evolve(scene) {
                 this.generation++;
                 if (this.blocks.length < 20) {
-                    const x = (Math.random() - 0.5) * 140;
-                    const z = (Math.random() - 0.5) * 80;
+                    const x = (Math.random() - 0.5) * 120; // Adjusted for 4:3
+                    const z = (Math.random() - 0.5) * 90;
                     if (!this.isInLake(x, z)) this.addBlock(scene, x, z);
                 }
                 this.blocks.forEach(block => this.evolveBlock(scene, block));
@@ -220,13 +220,13 @@ html_code = """
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87CEEB);
 
-            // Camera
-            camera = new THREE.PerspectiveCamera(75, 16 / 9, 0.1, 1000);
-            camera.position.set(0, 50, 80);
+            // Camera with 4:3 aspect ratio
+            camera = new THREE.PerspectiveCamera(75, 4 / 3, 0.1, 1000);
+            camera.position.set(0, 50, 60); // Adjusted to center on city
 
             // Renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight * (9/16));
+            renderer.setSize(window.innerWidth, window.innerHeight * (3/4));
             container.appendChild(renderer.domElement);
 
             // Lights
@@ -236,8 +236,8 @@ html_code = """
             sun.position.set(50, 50, 50);
             scene.add(sun);
 
-            // Ground
-            const groundGeo = new THREE.PlaneGeometry(160, 90, 32, 32);
+            // Ground with 4:3 ratio (120x90)
+            const groundGeo = new THREE.PlaneGeometry(120, 90, 32, 32);
             const groundMat = new THREE.MeshPhongMaterial({ color: 0x4a7043 });
             const ground = new THREE.Mesh(groundGeo, groundMat);
             ground.rotation.x = -Math.PI / 2;
@@ -265,7 +265,7 @@ html_code = """
             // Controls
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
-            controls.target.set(0, 0, 0);
+            controls.target.set(0, 0, 0); // Centered on city origin
 
             // City
             city = new CitySimulator();
@@ -280,15 +280,15 @@ html_code = """
         }
 
         function resetView() {
-            camera.position.set(0, 50, 80);
+            camera.position.set(0, 50, 60); // Adjusted for 4:3 and centered view
             controls.target.set(0, 0, 0);
             controls.update();
         }
 
         function onWindowResize() {
             const width = window.innerWidth;
-            const height = width * (9/16);
-            camera.aspect = 16 / 9;
+            const height = width * (3/4);
+            camera.aspect = 4 / 3;
             camera.updateProjectionMatrix();
             renderer.setSize(width, height);
         }
@@ -322,7 +322,7 @@ Watch a 3D city evolve with lakes, hills, and building blocks.
 - **Scroll**: Zoom
 
 ### Features:
-- 16:9 play area
+- 4:3 play area
 - Blocks (10x10 units) with up to 5 buildings
 - Buildings evolve floor-by-floor using L-systems
 - Terrain with hills and lakes