Spaces:

awacke1
/

3DCityEvolutionSimulator

Running

App Files Files Community

awacke1 commited on Mar 4

Commit

4f867c3

verified ·

1 Parent(s): e7acb42

Update app.py

Browse files

Files changed (1) hide show

app.py +33 -22

app.py CHANGED Viewed

@@ -1,9 +1,9 @@
 import streamlit as st
 import streamlit.components.v1 as components
-st.set_page_config(page_title="City Evolution Simulator", layout="wide")
-st.title("City Evolution Simulator")
 st.write("Watch a 3D city grow with lakes, hills, and evolving blocks")
 html_code = """
@@ -11,9 +11,10 @@ html_code = """
 <html>
 <head>
     <meta charset="utf-8">
-    <title>City Evolution Simulator</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { width: 100%; height: 100%; display: block; }
         .ui-panel {
             position: absolute;
@@ -40,6 +41,7 @@ html_code = """
     </style>
 </head>
 <body>
     <div class="ui-panel">
         <h3>City Controls</h3>
         <button id="evolve">Evolve City</button>
@@ -89,8 +91,8 @@ html_code = """
                 const stack = [];
                 let position = basePos.clone();
                 let direction = new THREE.Vector3(0, 1, 0);
                 const structure = new THREE.Group();
                 for (let char of this.generate()) {
                     switch(char) {
                         case 'F':
@@ -131,7 +133,7 @@ html_code = """
         class CitySimulator {
             constructor() {
                 this.blocks = [];
-                this.blockSize = 10; // 10x10 units per block
                 this.maxBuildingsPerBlock = 5;
                 this.generation = 0;
                 this.lakeCenters = [
@@ -169,14 +171,14 @@ html_code = """
                     const building = lsystem.build(scene, basePos, block.maxHeight);
                     if (this.isWaterfront(block.position.x, block.position.y)) {
-                        building.scale.set(1.5, 2, 1.5); // Lavish waterfront buildings
                     }
                     scene.add(building);
                     block.buildings.push(building);
                 }
             }
-            evolve() {
                 this.generation++;
                 if (this.blocks.length < 20) {
                     const x = (Math.random() - 0.5) * 140;
@@ -208,25 +210,33 @@ html_code = """
         let city;
         function init() {
-            const container = document.body;
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87CEEB);
-            // Camera with 16:9 aspect ratio
             camera = new THREE.PerspectiveCamera(75, 16 / 9, 0.1, 1000);
             camera.position.set(0, 50, 80);
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight * (9/16));
             container.appendChild(renderer.domElement);
             // Lights
-            scene.add(new THREE.AmbientLight(0x404040));
             const sun = new THREE.DirectionalLight(0xffffff, 0.8);
             sun.position.set(50, 50, 50);
             scene.add(sun);
-            // Terrain and Lakes
             const groundGeo = new THREE.PlaneGeometry(160, 90, 32, 32);
             const groundMat = new THREE.MeshPhongMaterial({ color: 0x4a7043 });
             const ground = new THREE.Mesh(groundGeo, groundMat);
@@ -234,35 +244,36 @@ html_code = """
             ground.position.y = -0.1;
             scene.add(ground);
-            // Add lakes
             const lakeGeo = new THREE.CircleGeometry(10, 32);
             const lakeMat = new THREE.MeshPhongMaterial({ color: 0x4682b4 });
-            city.lakeCenters.forEach(center => {
                 const lake = new THREE.Mesh(lakeGeo, lakeMat);
                 lake.rotation.x = -Math.PI / 2;
-                lake.position.set(center.x, 0, center.y);
                 scene.add(lake);
             });
-            // Add bridges
             const bridgeGeo = new THREE.BoxGeometry(5, 0.2, 15);
             const bridgeMat = new THREE.MeshPhongMaterial({ color: 0x808080 });
-            const bridge1 = new THREE.Mesh(bridgeGeo, bridgeMat);
-            bridge1.position.set(15, 0.2, 20);
-            scene.add(bridge1);
             // Controls
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.target.set(0, 0, 0);
-            // Initialize city
             city = new CitySimulator();
             city.addBlock(scene, 0, 0);
             // Events
             window.addEventListener('resize', onWindowResize);
-            document.getElementById('evolve').addEventListener('click', () => city.evolve());
             document.getElementById('reset').addEventListener('click', resetView);
             animate();
@@ -288,7 +299,7 @@ html_code = """
             renderer.render(scene, camera);
         }
-        init();
     </script>
 </body>
 </html>
@@ -297,7 +308,7 @@ html_code = """
 # Render the HTML component
 components.html(html_code, height=600)
-st.sidebar.title("City Evolution Simulator")
 st.sidebar.write("""
 ## How to Play

 import streamlit as st
 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")
 html_code = """
 <html>
 <head>
     <meta charset="utf-8">
+    <title>3D City Evolution Simulator</title>
     <style>
         body { margin: 0; overflow: hidden; }
+        #container { width: 100%; height: 100%; }
         canvas { width: 100%; height: 100%; display: block; }
         .ui-panel {
             position: absolute;
     </style>
 </head>
 <body>
+    <div id="container"></div>
     <div class="ui-panel">
         <h3>City Controls</h3>
         <button id="evolve">Evolve City</button>
                 const stack = [];
                 let position = basePos.clone();
                 let direction = new THREE.Vector3(0, 1, 0);
                 const structure = new THREE.Group();
                 for (let char of this.generate()) {
                     switch(char) {
                         case 'F':
         class CitySimulator {
             constructor() {
                 this.blocks = [];
+                this.blockSize = 10;
                 this.maxBuildingsPerBlock = 5;
                 this.generation = 0;
                 this.lakeCenters = [
                     const building = lsystem.build(scene, basePos, block.maxHeight);
                     if (this.isWaterfront(block.position.x, block.position.y)) {
+                        building.scale.set(1.5, 2, 1.5);
                     }
                     scene.add(building);
                     block.buildings.push(building);
                 }
             }
+            evolve(scene) {
                 this.generation++;
                 if (this.blocks.length < 20) {
                     const x = (Math.random() - 0.5) * 140;
         let city;
         function init() {
+            const container = document.getElementById('container');
+            if (!container) {
+                console.error('Container not found');
+                return;
+            }
+            // Scene
             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);
+            // Renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight * (9/16));
             container.appendChild(renderer.domElement);
             // Lights
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
             const sun = new THREE.DirectionalLight(0xffffff, 0.8);
             sun.position.set(50, 50, 50);
             scene.add(sun);
+            // Ground
             const groundGeo = new THREE.PlaneGeometry(160, 90, 32, 32);
             const groundMat = new THREE.MeshPhongMaterial({ color: 0x4a7043 });
             const ground = new THREE.Mesh(groundGeo, groundMat);
             ground.position.y = -0.1;
             scene.add(ground);
+            // Lakes
             const lakeGeo = new THREE.CircleGeometry(10, 32);
             const lakeMat = new THREE.MeshPhongMaterial({ color: 0x4682b4 });
+            const lakeCenters = [new THREE.Vector2(20, 20), new THREE.Vector2(-30, 10)];
+            lakeCenters.forEach(center => {
                 const lake = new THREE.Mesh(lakeGeo, lakeMat);
                 lake.rotation.x = -Math.PI / 2;
+                lake.position.set(center.x, 0.01, center.y);
                 scene.add(lake);
             });
+            // Bridge
             const bridgeGeo = new THREE.BoxGeometry(5, 0.2, 15);
             const bridgeMat = new THREE.MeshPhongMaterial({ color: 0x808080 });
+            const bridge = new THREE.Mesh(bridgeGeo, bridgeMat);
+            bridge.position.set(15, 0.2, 20);
+            scene.add(bridge);
             // Controls
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.target.set(0, 0, 0);
+            // City
             city = new CitySimulator();
             city.addBlock(scene, 0, 0);
             // Events
             window.addEventListener('resize', onWindowResize);
+            document.getElementById('evolve').addEventListener('click', () => city.evolve(scene));
             document.getElementById('reset').addEventListener('click', resetView);
             animate();
             renderer.render(scene, camera);
         }
+        window.onload = init;
     </script>
 </body>
 </html>
 # Render the HTML component
 components.html(html_code, height=600)
+st.sidebar.title("3D City Evolution Simulator")
 st.sidebar.write("""
 ## How to Play