Cityscapes - A Procedurally Generated City

Dec. 2019
Code
Live Demo (Hosted on Glitch)

Summary

Created over 2 weeks for my Generative Design class, I aimed to create a sprawling metropolis, procedurally generated upon providing a random world seed. I divided the city into “zones”, each with a unique feel (think biomes in Minecraft) but still tried to maintain cohesiveness in the overall city aesthetic. One zone produces massive skyscrapers with distinct features, pulling in population generation methods to make each building look unique. Another zone produces residential buildings and roads, while the last zone produces rural grasslands and nature imagery. The project allows interaction by letting the user “demolish” skyscrapers by clicking on them, and scroll around the map to look around and generate more terrain. Though the final result was not as cohesive of a city as I would have liked, and I would have wanted to generate a greater variety of "zones" given more time, I'm happy with the final product and learned a lot regarding procedural generation.

Other Contributors: Professor Adam Smith, TA Isaac Karth

Takeaways

  • P5js and Chromajs - I learned how to use both of these libraries to implement a low poly, but colorful and visually appealing city. Drawing 3D, isometric structures using only 2D shapes from p5js ended up being a difficult part of the process, and going back, I would probably implement this in a 3D library like ThreeJS instead. However, using p5js did give significant performance gain compared to using 3D models.
  • Realtime Procedural Generation - I learned how to generate the city using different levels of random sampling and noise functions - for instance, the way that each 8x8 tile "zone" is chosen is using a low scale noise function, to make the terrain seem more continuous. For the individual buildings, a higher scale noise function is used in order to determine the heights, colors, and orientations of the buildings. Finally, each zone samples the 8 zones surrounding it, and uses that information to alter its own contents in an attempt to make the zones more connected - skyscraper zones lying on the outskirts will tend to have fewer buildings, for instance.
  • Perlin Noise and Randomness - I learned how to utilize Perlin noise functions at different scales to generate random, but cohesive looking terrain. In order to create a realistic city, I couldn't just rely on pure randomness to do the job, so I had to use semi-random functions like noise to effectively connect different parts of the city.