title: Generating a city/town on a grid (Simply my approach)
body: <p><strong>Problem</strong></p>
  
  <p>I am trying to make a city generator for a game that creates blocks that have a type (residential, industrial, commercial). All of my streets will be at 90 degrees and there for I want it to be blocky (instead of zig zagging). </p>
  
  <p><strong>Approaches</strong></p>
  
  <p>My first approach was picking a starting point and then randomly moving around the map for X number of moves. If I hit a dead end I back tracked some random number, kind of like a maze generator but this left me with lots of areas where roads where next to roads and roads that didn't travel in straight lines. I've also looked at using perlin noise, but I believe this two would give me roads that zig zagged to often.</p>
  
  <p><strong>Current Solution</strong></p>
  
  <p>I have come up with an approach that gives me pretty much what I want but I think its more complex than it needs to be or at least less efficient than it can be. Currently if I try to scale it up to a larger map it can take a few seconds to process.</p>
  
  <p><em>JS Fiddle</em></p>
  
  <p><a href="https://jsfiddle.net/jrj2211/0exe9jne/" rel="nofollow noreferrer">https://jsfiddle.net/jrj2211/0exe9jne/</a></p>
  
  <p><em>Algorithm</em></p>
  
  <ol>
  <li>Make a 2D grid and populate with empty cells</li>
  <li>Get a list of all possible cells and shuffle it</li>
  <li>Loop through each cell in shuffled list
  
  <ul>
  <li>Generate a randomly sized rectangle off of the cell and give it a unique ID</li>
  <li>Give each cell in the rectangle the unique ID </li>
  <li>Randomly pick its type (Residential, commercial, industrial)</li>
  </ul></li>
  <li>Scale the entire array up by 2</li>
  <li>Loop through the scaled up array and replace any tiles that have a neighboring tile with a different unique ID as a ROAD tile.</li>
  </ol>
  
  <p>Scaling the array example (kind of like scaling an image):</p>
  
  <pre><code>[1, 2, 2]     [1, 1, 2, 2, 2, 2]
  [1, 3, 3] =&gt;  [1, 1, 3, 3, 3 ,3]
  [4, 4, 4]     [4, 4, 4, 4, 4, 4] 
  </code></pre>
  
  <p>The reason I scale up the grid is if I don't, any tile that was previously an area of 1x1 it would generate a map where two or more roads tiles would be neighbors.</p>
  
  <p><strong>Visualization</strong></p>
  
  <p><a href="https://i.stack.imgur.com/GH1Hr.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GH1Hr.gif" alt="enter image description here"></a></p>
  
  <p><strong>Final output</strong></p>
  
  <p><em>Note: This is not the same output as in the visualization</em></p>
  
  <p><a href="https://i.stack.imgur.com/WHMO3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WHMO3.png" alt="enter image description here"></a></p>
  
  <p><strong>Summary</strong></p>
  
  <p>So to sum up my question, does anyone have any suggestions on how to make this more efficient or cleaner. I think its hard to write pseudo code for my current process so I think there's room for improvement. I also will have to make it even more complex to do things like removing cells that are 1x1 because no house would be surrounded by streets on all sides. I also don't want the city to be a perfect square (so I'd have to delete random zones along the border and close off their streets).</p>