Update app.py

app.py

@@ -92,13 +92,14 @@ html_code = """
                 let position = basePos.clone();
                 let direction = new THREE.Vector3(0, 1, 0);
                 const structure = new THREE.Group();
+                let baseWidth = 1.5; // Starting wider base
 
                 for (let char of this.generate()) {
                     switch(char) {
                         case 'F':
                             if (height < maxHeight) {
-                                const width = 0.8 + Math.random() * 0.4;
-                                const floorHeight = 1 + Math.random() * 2;
+                                const width = baseWidth * (1 - height / maxHeight); // Narrower as it goes up
+                                const floorHeight = 2 + Math.random() * 2; // Taller floors
                                 const geo = new THREE.BoxGeometry(width, floorHeight, width);
                                 const mat = new THREE.MeshPhongMaterial({
                                     color: new THREE.Color(0.5 + Math.random() * 0.5, 
@@ -146,7 +147,7 @@ html_code = """
                 const block = {
                     position: new THREE.Vector2(x, z),
                     buildings: [],
-                    maxHeight: this.isWaterfront(x, z) ? 15 : 8
+                    maxHeight: this.isWaterfront(x, z) ? 20 : 12 // Increased max height
                 };
                 this.blocks.push(block);
                 this.evolveBlock(scene, block, true);
@@ -181,8 +182,8 @@ html_code = """
             evolve(scene) {
                 this.generation++;
                 if (this.blocks.length < 20) {
-                    const x = (Math.random() - 0.5) * 120; // Adjusted for 4:3
-                    const z = (Math.random() - 0.5) * 90;
+                    const x = (Math.random() - 0.5) * 80; // Adjusted for 9:16
+                    const z = (Math.random() - 0.5) * 140;
                     if (!this.isInLake(x, z)) this.addBlock(scene, x, z);
                 }
                 this.blocks.forEach(block => this.evolveBlock(scene, block));
@@ -220,13 +221,13 @@ html_code = """
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87CEEB);
 
-            // 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
+            // Camera with 9:16 portrait aspect ratio
+            camera = new THREE.PerspectiveCamera(75, 9 / 16, 0.1, 1000);
+            camera.position.set(0, 80, 40); // Adjusted for portrait view
 
             // Renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight * (3/4));
+            renderer.setSize(window.innerWidth, window.innerHeight * (16/9));
             container.appendChild(renderer.domElement);
 
             // Lights
@@ -236,8 +237,8 @@ html_code = """
             sun.position.set(50, 50, 50);
             scene.add(sun);
 
-            // Ground with 4:3 ratio (120x90)
-            const groundGeo = new THREE.PlaneGeometry(120, 90, 32, 32);
+            // Ground with 9:16 ratio (90x160)
+            const groundGeo = new THREE.PlaneGeometry(90, 160, 32, 32);
             const groundMat = new THREE.MeshPhongMaterial({ color: 0x4a7043 });
             const ground = new THREE.Mesh(groundGeo, groundMat);
             ground.rotation.x = -Math.PI / 2;
@@ -265,7 +266,7 @@ html_code = """
             // Controls
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
-            controls.target.set(0, 0, 0); // Centered on city origin
+            controls.target.set(0, 0, 0);
 
             // City
             city = new CitySimulator();
@@ -280,15 +281,15 @@ html_code = """
         }
 
         function resetView() {
-            camera.position.set(0, 50, 60); // Adjusted for 4:3 and centered view
+            camera.position.set(0, 80, 40); // Adjusted for portrait view
             controls.target.set(0, 0, 0);
             controls.update();
         }
 
         function onWindowResize() {
             const width = window.innerWidth;
-            const height = width * (3/4);
-            camera.aspect = 4 / 3;
+            const height = width * (16/9); // Portrait orientation
+            camera.aspect = 9 / 16;
             camera.updateProjectionMatrix();
             renderer.setSize(width, height);
         }
@@ -322,9 +323,9 @@ Watch a 3D city evolve with lakes, hills, and building blocks.
 - **Scroll**: Zoom
 
 ### Features:
-- 4:3 play area
+- 9:16 portrait play area
 - Blocks (10x10 units) with up to 5 buildings
-- Buildings evolve floor-by-floor using L-systems
+- Buildings start wide, grow taller with smaller floors
 - Terrain with hills and lakes
 - Waterfront properties grow larger
 - Bridges connect land masses