Update app.py

app.py

@@ -4,11 +4,11 @@ import streamlit.components.v1 as components
 st.set_page_config(page_title="3D City Evolution Simulator", layout="wide")
 
 st.title("3D City Evolution Simulator")
-st.write("Watch a 3D city grow with lakes, hills, and evolving blocks")
+st.write("Watch a 3D city grow with roads, vegetation, and dynamic weather")
 
 # Sliders for container size with initial 3:4 aspect ratio
-max_width = min(1200, st.session_state.get('window_width', 1200))  # Use a reasonable max or screen width
-max_height = min(1600, st.session_state.get('window_height', 1600))  # Use a reasonable max or screen height
+max_width = min(1200, st.session_state.get('window_width', 1200))
+max_height = min(1600, st.session_state.get('window_height', 1600))
 
 col1, col2 = st.columns(2)
 with col1:
@@ -102,14 +102,32 @@ html_code = f"""
                 let position = basePos.clone();
                 let direction = new THREE.Vector3(0, 1, 0);
                 const structure = new THREE.Group();
-                let baseWidth = 1.5; // Starting wider base
+                let baseWidth = 1.5;
+
+                // Add small attached buildings horizontally
+                const attachCount = Math.floor(Math.random() * 3); // 0-2 attachments
+                for (let i = 0; i < attachCount; i++) {{
+                    const attachWidth = baseWidth * 0.6;
+                    const attachHeight = 1 + Math.random() * 2;
+                    const geo = new THREE.BoxGeometry(attachWidth, attachHeight, attachWidth);
+                    const mat = new THREE.MeshPhongMaterial({{
+                        color: new THREE.Color(0.5 + Math.random() * 0.5, 
+                                            0.5 + Math.random() * 0.5, 
+                                            0.5 + Math.random() * 0.5)
+                    }});
+                    const attach = new THREE.Mesh(geo, mat);
+                    const offsetX = (i + 1) * (baseWidth + attachWidth) * (Math.random() > 0.5 ? 1 : -1);
+                    attach.position.set(position.x + offsetX, attachHeight / 2, position.z);
+                    attach.castShadow = true;
+                    structure.add(attach);
+                }}
 
                 for (let char of this.generate()) {{
                     switch(char) {{
                         case 'F':
                             if (height < maxHeight) {{
-                                const width = baseWidth * (1 - height / maxHeight); // Narrower as it goes up
-                                const floorHeight = 2 + Math.random() * 2; // Taller floors
+                                const width = baseWidth * (1 - height / maxHeight);
+                                const floorHeight = 2 + Math.random() * 2;
                                 const geo = new THREE.BoxGeometry(width, floorHeight, width);
                                 const mat = new THREE.MeshPhongMaterial({{
                                     color: new THREE.Color(0.5 + Math.random() * 0.5, 
@@ -118,6 +136,7 @@ html_code = f"""
                                 }});
                                 const floor = new THREE.Mesh(geo, mat);
                                 floor.position.copy(position).add(new THREE.Vector3(0, floorHeight/2, 0));
+                                floor.castShadow = true;
                                 structure.add(floor);
                                 position.y += floorHeight;
                                 height += floorHeight;
@@ -144,6 +163,7 @@ html_code = f"""
         class CitySimulator {{
             constructor() {{
                 this.blocks = [];
+                this.roads = [];
                 this.blockSize = 10;
                 this.maxBuildingsPerBlock = 5;
                 this.generation = 0;
@@ -189,14 +209,58 @@ html_code = f"""
                 }}
             }}
 
+            addRoad(scene, start, end) {{
+                const distance = start.distanceTo(end);
+                const roadGeo = new THREE.PlaneGeometry(2, distance);
+                const roadMat = new THREE.MeshPhongMaterial({{ color: 0x555555 }});
+                const road = new THREE.Mesh(roadGeo, roadMat);
+                road.rotation.x = -Math.PI / 2;
+                const midPoint = start.clone().add(end).multiplyScalar(0.5);
+                road.position.set(midPoint.x, 0.02, midPoint.y);
+                road.lookAt(new THREE.Vector3(end.x, 0, end.y));
+                road.receiveShadow = true;
+                scene.add(road);
+                this.roads.push(road);
+            }}
+
+            addVegetation(scene) {{
+                const treeGeo = new THREE.ConeGeometry(1, 3, 8);
+                const treeMat = new THREE.MeshPhongMaterial({{ color: 0x228B22 }});
+                const shrubGeo = new THREE.SphereGeometry(0.5, 8, 8);
+                const shrubMat = new THREE.MeshPhongMaterial({{ color: 0x32CD32 }});
+
+                for (let i = 0; i < 10; i++) {{
+                    const x = (Math.random() - 0.5) * 90;
+                    const z = (Math.random() - 0.5) * 120;
+                    if (!this.isInLake(x, z)) {{
+                        const tree = new THREE.Mesh(treeGeo, treeMat);
+                        tree.position.set(x, this.getTerrainHeight(x, z) + 1.5, z);
+                        tree.castShadow = true;
+                        scene.add(tree);
+
+                        const shrub = new THREE.Mesh(shrubGeo, shrubMat);
+                        shrub.position.set(x + 1, this.getTerrainHeight(x, z) + 0.5, z + 1);
+                        shrub.castShadow = true;
+                        scene.add(shrub);
+                    }}
+                }}
+            }}
+
             evolve(scene) {{
                 this.generation++;
                 if (this.blocks.length < 20) {{
-                    const x = (Math.random() - 0.5) * 90; // Adjusted for 3:4
+                    const x = (Math.random() - 0.5) * 90;
                     const z = (Math.random() - 0.5) * 120;
-                    if (!this.isInLake(x, z)) this.addBlock(scene, x, z);
+                    if (!this.isInLake(x, z)) {{
+                        this.addBlock(scene, x, z);
+                        if (this.blocks.length > 1) {{
+                            const lastBlock = this.blocks[this.blocks.length - 2];
+                            this.addRoad(scene, lastBlock.position, this.blocks[this.blocks.length - 1].position);
+                        }}
+                    }}
                 }}
                 this.blocks.forEach(block => this.evolveBlock(scene, block));
+                this.addVegetation(scene);
                 this.updateStats();
             }}
 
@@ -218,7 +282,6 @@ html_code = f"""
         }}
 
         let scene, camera, renderer, controls;
-        let city;
 
         function init() {{
             const container = document.getElementById('container');
@@ -238,6 +301,8 @@ html_code = f"""
             // Renderer
             renderer = new THREE.WebGLRenderer({{ antialias: true }});
             renderer.setSize({container_width}, {container_height});
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             container.appendChild(renderer.domElement);
 
             // Lights
@@ -245,14 +310,41 @@ html_code = f"""
             scene.add(ambientLight);
             const sun = new THREE.DirectionalLight(0xffffff, 0.8);
             sun.position.set(50, 50, 50);
+            sun.castShadow = true;
+            sun.shadow.mapSize.width = 1024;
+            sun.shadow.mapSize.height = 1024;
+            sun.shadow.camera.near = 0.5;
+            sun.shadow.camera.far = 500;
             scene.add(sun);
 
-            // Ground with 3:4 ratio (90x120)
-            const groundGeo = new THREE.PlaneGeometry(90, 120, 32, 32);
-            const groundMat = new THREE.MeshPhongMaterial({{ color: 0x4a7043 }});
+            // Ground with bump mapping
+            const groundGeo = new THREE.PlaneGeometry(1000, 1000, 32, 32); // Extended to horizon
+            const groundMat = new THREE.MeshPhongMaterial({{ 
+                color: 0x4a7043,
+                bumpScale: 0.5,
+                shininess: 10
+            }});
             const ground = new THREE.Mesh(groundGeo, groundMat);
             ground.rotation.x = -Math.PI / 2;
             ground.position.y = -0.1;
+            ground.receiveShadow = true;
+
+            // Simple bump map (noise)
+            const canvas = document.createElement('canvas');
+            canvas.width = 256;
+            canvas.height = 256;
+            const ctx = canvas.getContext('2d');
+            for (let x = 0; x < 256; x++) {{
+                for (let y = 0; y < 256; y++) {{
+                    const value = Math.random() * 255;
+                    ctx.fillStyle = `rgb(${value},${value},${value})`;
+                    ctx.fillRect(x, y, 1, 1);
+                }}
+            }}
+            const bumpTexture = new THREE.Texture(canvas);
+            bumpTexture.needsUpdate = true;
+            groundMat.bumpMap = bumpTexture;
+
             scene.add(ground);
 
             // Lakes
@@ -263,6 +355,7 @@ html_code = f"""
                 const lake = new THREE.Mesh(lakeGeo, lakeMat);
                 lake.rotation.x = -Math.PI / 2;
                 lake.position.set(center.x, 0.01, center.y);
+                lake.receiveShadow = true;
                 scene.add(lake);
             }});
 
@@ -271,15 +364,31 @@ html_code = f"""
             const bridgeMat = new THREE.MeshPhongMaterial({{ color: 0x808080 }});
             const bridge = new THREE.Mesh(bridgeGeo, bridgeMat);
             bridge.position.set(15, 0.2, 20);
+            bridge.castShadow = true;
+            bridge.receiveShadow = true;
             scene.add(bridge);
 
+            // Clouds
+            const cloudGeo = new THREE.SphereGeometry(5, 8, 8);
+            const cloudMat = new THREE.MeshPhongMaterial({{ color: 0xFFFFFF, opacity: 0.8, transparent: true }});
+            for (let i = 0; i < 5; i++) {{
+                const cloud = new THREE.Mesh(cloudGeo, cloudMat);
+                cloud.position.set(
+                    (Math.random() - 0.5) * 200,
+                    50 + Math.random() * 20,
+                    (Math.random() - 0.5) * 200
+                );
+                cloud.castShadow = true;
+                scene.add(cloud);
+            }}
+
             // Controls
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.target.set(0, 0, 0);
 
             // City
-            city = new CitySimulator();
+            const city = new CitySimulator();
             city.addBlock(scene, 0, 0);
 
             // Events
@@ -323,7 +432,7 @@ st.sidebar.title("3D City Evolution Simulator")
 st.sidebar.write("""
 ## How to Play
 
-Watch a 3D city evolve with lakes, hills, and building blocks.
+Watch a 3D city evolve with roads, vegetation, and dynamic weather.
 
 ### Controls:
 - **Evolve City**: Grow the city
@@ -335,9 +444,9 @@ Watch a 3D city evolve with lakes, hills, and building blocks.
 
 ### Features:
 - 3:4 initial play area (768x1024)
-- Blocks (10x10 units) with up to 5 buildings
-- Buildings start wide, grow taller with smaller floors
-- Terrain with hills and lakes
-- Waterfront properties grow larger
-- Bridges connect land masses
+- Roads connect blocks
+- Trees and shrubs added each evolution
+- Extended green ground with bump mapping
+- Clouds and sunlight with shadows
+- Buildings with horizontal attachments
 """)