{"id":2968,"date":"2009-04-15T12:00:12","date_gmt":"2009-04-15T16:00:12","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=2968"},"modified":"2010-10-24T08:05:58","modified_gmt":"2010-10-24T13:05:58","slug":"procedural-city-part-3-generating-buildings","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=2968","title":{"rendered":"Procedural City, Part 3: Generating Buildings"},"content":{"rendered":"<p><span class=\"date\">Buildings<\/span><\/p>\n<p>In my <a href=\"?p=2954\">previous step<\/a> I cranked out some plausible textures to go on my buildings.  But this next step takes a bit of audacity, since I&#8217;m going to need to write a program to engage in <em>architecture<\/em>.  Talented architects get paid huge sums of money to design buildings.  It&#8217;s a complex and highly creative process, and it would be insane to think I could just simulate all of that cognitive work with a a few hundred lines of code written in the space of an evening. Particularly since my ignorance of the subject is nearly all-encompassing.  <\/p>\n<p>Still, I&#8217;ve got some Google&#8217;d pictures of buildings and stuff.  Let&#8217;s see how this goes.<\/p>\n<p>Luckily, I don&#8217;t really need to duplicate proper architectural work.  For the more classic skyscrapers, a lot of the really artistic stuff goes into the surface of the building in the form of fancy stonework, and that sort of detail (or lack thereof) will be obscured by darkness.  Hopefully I can simply present the outline of such a building and the viewer will fill in those details based on previous experience. <\/p>\n<p>For more modern buildings, the process is even simpler.  No offense intended towards the people who design those buildings, but the really sleek (to my eye) modern stuff is little more than simple geometric shapes. In either case, all I need to do is come up with a simple set of rules that will lead to a building-ish shape. <\/p>\n<p><span class=\"date\">Blocky Buildings<\/span><\/p>\n<p><table width='256'  cellpadding='0' cellspacing='0' border='0' align='right'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/pixelcity_building.gif' class='insetimage' width='256' alt='pixelcity_building.gif' title='pixelcity_building.gif'\/><\/td><\/tr><\/table>So I&#8217;ll start with the blocky type buildings. You know, the kind shaped like cubist tumors. I&#8217;m sure there is a special architectural term for these  towers with little interesting bits added on to keep them from being simple cubes, but I&#8217;m too ignorant of the discipline .  The rules I come up with go like this:<\/p>\n<p>1. Starting on the ground, produce a rectangular region that a) fits within the building footprint and b) contains the exact center of the building somewhere within its area.  This rectangle is extruded up to the maximum building height.<\/p>\n<p>2. Make another rectangle using the same rules as before, with the additional limitation that at least one of the sides of the rectangle must protrude from the center further than any of the previous ones.  (Otherwise it would simply be hidden within the previous blocks.  Extrude the rectangle from the base up to a height some random value less than the previous one. <\/p>\n<p>3. Repeat step 2 until we hit some limit of tiers, the building footprint is filled, or we get to the bottom.<\/p>\n<p><span class=\"date\">Rounded Modern Buildings<\/span><\/p>\n<p><table width='384'  cellpadding='0' cellspacing='0' border='0' align='right'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/pixelcity_building1.jpg' class='insetimage' width='384' alt='pixelcity_building1.jpg' title='pixelcity_building1.jpg'\/><\/td><\/tr><\/table>These are simple.  This type of building is a cylinder, going around in ten-degree segments.  In the image to the right, the second one down is the default shape.  Randomly, during the building process it might choose to skip ahead 90 degrees. This will (from the viewpoint of the user) slice off a section of the cylinder.  A single skip produces the top-most building in the example image.  More skips can produce a variety of interesting and plausible shapes.  It&#8217;s sort of amazing how pleasing the shapes are. Any two cuts will form a nice symmetrical shape.  Three cuts will produce an interesting triangle-shape.  Four cuts would result in a boring old cube building, and so I prohibited that from happening. (It would be exceptionally unlikely anyway.)<\/p>\n<p>There is some ugly distortion on the top of the building, the result of screwy texture mapping.  I&#8217;m still thinking about adding some sort of cap piece to the tops of buildings at a later point.  I&#8217;m not sure what kind of speed \/ polygons tradeoffs I&#8217;ll be up against, so I&#8217;ll leave the distortion in place and revisit it later.<\/p>\n<p><span class=\"date\">Classic Buildings<\/span><\/p>\n<p><table width='384'  cellpadding='0' cellspacing='0' border='0' align='right'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/pixelcity_building2.jpg' class='insetimage' width='384' alt='pixelcity_building2.jpg' title='pixelcity_building2.jpg'\/><\/td><\/tr><\/table>This is the simplest type yet.  It&#8217;s a series of tiers.  Each one is half the height between the previous one and the top, and slightly narrower. Once a randomly chosen number of tiers have been added, it closes the remaining distance to the top with a simple spike.  And so&#8230;<\/p>\n<p>It sucks.  It just doesn&#8217;t look like a real building. I experiment with the dimensions of the building, adding ledges, changing the size of the spike, and a few other tricks.  None of them really help.  My approach is fundamentally flawed, most likely due to my lack of understanding.<\/p>\n<p>I study the reference pictures again.  Eventually I realize that the problem isn&#8217;t with the actual shape, the problem is with the shape suggested by the windows.  Buildings like this one have stonework on the corners and in long vertical stripes between the windows, and I haven&#8217;t left any room for that sort of thing.  It&#8217;s all windows, edge-to-edge.  <\/p>\n<p>I could make texture with those gaps built in.  I could leave (say) every other column of windows black, but then I&#8217;d have a texture for a specific building type. I very much wanted a completely mix-n-match system, both for the ease of coding and also for the greater variety.  Worse, buildings of different dimensions might need different specific textures.  Instead of wrapping an arbitrary texture around a building, I&#8217;ll have to make special textures and make them line up just right.  This is needlessly complex and inelegant.  <\/p>\n<p>I decide to shelve this issue until I get a bit more done.  These buildings will stay for now, but they will have to go before the end.<\/p>\n<p><span class=\"date\">Cube Buildings<\/span><\/p>\n<p>My plan is to have a few showy skyscrapers sprinkled around the city. Everything else is to be simple cube buildings of varying dimensions.  I don&#8217;t think I&#8217;ll waste page space showing you a picture of a cube.  I doubt you need help visualizing it. <\/p>\n<p><span class=\"date\">Other Buildings<\/span><\/p>\n<p>I&#8217;d wanted a few more types of building, but I think I need to see how it all looks together.  Once I can see the big panoramic view of the city I&#8217;ll consider adding more building types. <\/p>\n<p>Next up is the big step: City planning.  I&#8217;ll jam a bunch of buildings into the scene and see how they look and how fast it runs, and then reassess. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buildings In my previous step I cranked out some plausible textures to go on my buildings. But this next step takes a bit of audacity, since I&#8217;m going to need to write a program to engage in architecture. Talented architects get paid huge sums of money to design buildings. It&#8217;s a complex and highly creative [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,10],"tags":[],"class_list":["post-2968","post","type-post","status-publish","format-standard","hentry","category-programming","category-projects"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/2968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2968"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/2968\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}