GAME OF SPRAWL

A web-based urban growth simulator powered by Conway's Game of Life, GPGPU shaders, and your imagination.

SEED

"In 1889, seven years after its foundation, the City of La Plata obtained the 1st Prize at the Universal Exposition in Paris as «City of the future» and «Best Built Realization», an event that symbolized the consecration of new hygienist, positivist and republican ideas after the Industrial Revolution. More than 100 years later, faced with an overflowing and disoriented current scenario, we asked ourselves how to update the foundational plan by reinterpreting the grid in a completely different way with the only premise of operating with the unpredictable condition of what has not yet arrived."
— Iñaki Harosteguy, 2019

My train of thought started with supraorder: La Plata. Seeing that the solution proposed for the future is replicating what was done a century ago popped some questions:

• Would the result be the same?
• Could we state for sure that the initial point is the same?
• What shaped La Plata's footprint?
• How do we imagine its future footprint?
• How would the result look a century in the future?

To try answering these questions, I realized I needed a tool to simulate the complexity of urban expansion. While implementing something like Michael Batty's system is highly complex, creating a diluted version using cellular automata is an excellent starting point.

The Web App Evolution

Originally built as a Processing sketch, the Game of Sprawl is now designed as a modern, high-performance web application.

Tech Stack

• HTML, CSS, Vanilla JavaScript: For a sleek, modern, and dependency-free user interface.
• Three.js & WebGL: The simulation runs entirely on the GPU via Fragment Shaders (Ping-Pong Framebuffer Objects). This allows for massive grids and complex rulesets to calculate at 60fps.

Features

1. Bring Your Own Map: Upload any image (a satellite view, a sketch, a gradient) to seed the initial state of the simulation.
2. Color-Based Zoning: Dynamically map the colors in your uploaded image to specific behaviors. Define which colors act as water, unbuildable terrain, or active city centers.
3. Play God with Parameters:
   • Tweak the Kernel Size to define how far a cell looks to determine its growth.
   • Set custom Survival and Birth rules per zone.
   • Adjust the Simulation Time Frame and speed.

Project Documentation

• Implementation Plan (plan.md): The technical blueprint for how the Three.js GPGPU simulation is architected.
• Future Ideas (next-steps.md): Fun, creative proposals for extending the simulation into 3D, adding agent-based traffic, and more.

Getting Started

Because the new Game of Sprawl uses vanilla web technologies, you don't need complex build tools to run it.

1. Clone the repository:

   git clone https://github.com/RLopez112/gameOfSprawl.git
   cd gameOfSprawl

2. Start a local web server (required to bypass CORS issues when loading local images/textures):

   # If you have Python 3 installed:
   python3 -m http.server
   
   # Or using Node.js:
   npx serve

3. Open your browser and navigate to http://localhost:8000 (or the port provided by your server).
4. Click Upload Image, tweak the parameters, and hit Run!

---