Suzanne Knop

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.DS_Store
+build

README.md

@@ -1,45 +1,52 @@
 
-# Project 4: Shape Grammar
-
-For this assignment you'll be building directly off of Project 3. To make things easier to keep track of, please fork and clone this repository [https://github.com/CIS700-Procedural-Graphics/Project4-Shape-Grammar](https://github.com/CIS700-Procedural-Graphics/Project4-Shape-Grammar) and copy your Project 3 code to start.
-
-**Goal:** to model an urban environment using a shape grammar. 
-
-**Note:** We’re well aware that a nice-looking procedural city is a lot of work for a single week. Focus on designing a nice building grammar. The city layout strategies outlined in class (the extended l-systems) are complex and not expected. We will be satisfied with something reasonably simple, just not a uniform grid!
-
-## Symbol Node (5 points)
-Modify your symbol node class to include attributes necessary for rendering, such as
-- Associated geometry instance
-- Position
-- Scale 
-- Anything else you may need
-
-## Grammar design (55 points)
-- Design at least five shape grammar rules for producing procedural buildings. Your buildings should vary in geometry and decorative features (beyond just differently-scaled cubes!). At least some of your rules should create child geometry that is in some way dependent on its parent’s state. (20 points)
-    - Eg. A building may be subdivided along the x, y, or z axis into two smaller buildings
-    - Some of your rules must be designed to use some property about its location. (10 points)
-    - Your grammar should have some element of variation so your buildings are non-deterministic.  Eg. your buildings sometimes subdivide along the x axis, and sometimes the y. (10 points)   
-- Write a renderer that will interpret the results of your shape grammar parser and adds the appropriate geometry to your scene for each symbol in your set. (10 points)
-
-## Create a city (30 points)
-- Add a ground plane or some other base terrain to your scene (0 points, come on now)
-- Using any strategy you’d like, procedurally generate features that demarcate your city into different areas in an interesting and plausible way (Just a uniform grid is neither interesting nor plausible). (20 points)
-    - Suggestions: roads, rivers, lakes, parks, high-population density
-    - Note, these features don’t have to be directly visible, like high-population density, but they should somehow be visible in the appearance or arrangement of your buildings. Eg. High population density is more likely to generate taller buildings
-- Generate buildings throughout your city, using information about your city’s features. Color your buildings with a method that uses some aspect of its state. Eg. Color buildings by height, by population density, by number of rules used to generate it. (5 points)
-- Document your grammar rules and general approach in the readme. (5 points)
-- ???
-- Profit.
-
-## Make it interesting (10)
-Experiment! Make your city a work of art.
-
-
-## Warnings:
-You can very easily blow up three.js with this assignment. With a very simple grammar, our medium quality machine was able to handle 100 buildings with 6 generations each, but be careful if you’re doing this all CPU-side.
-
-## Suggestions for the overachievers:
-Go for a very high level of decorative detail!
-Place buildings with a strategy such that buildings have doors and windows that are always accessible.
-Generate buildings with coherent interiors
-If dividing your city into lots, generate odd-shaped lots and create building meshes that match their shape ie. rather than working with cubes, extrude upwards from the building footprints you find to generate a starting mesh to subdivide rather than starting with platonic geometry.
+# Suzville
+## Procedurally generated by a shape grammar
+For this project, I designed a shape grammar that creates urban buildings, and designed a city layout to place the buildings generated by my shape grammar. The overall result is a proceedurally generated city!
+
+![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/main%201.png)
+### Shape Grammar Design
+* **Shape Node**: This is the basic building block for my grammar. A shape node knows its shape, its max height, its position/rotation/scale, its iteration number, and its color.
+  * All transformations while performing the iterations are done directly to each shape node, and then finally rendered into the corresponded loaded geometry mesh by my renderer.
+* **Grammar rules**
+
+| Skyscrapers | Apartments | Parks |
+| --- | --- | --- |
+|![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/skyscraper_example.png)| ![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/apartment_example.png) | ![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/park_view.png) |
+
+  * Skyscrapers
+    * Skyscrapers grow non-deterministically, but with a greater probability than apartments.
+    * Skyscrapers shrink non-deterministically, to mimic 
+  * Apartments
+    * Apartments when first placed, subdivide into two components at right angles, to mimic the appearance of actual apartment buildings I have seen. The configuration of the two parts and the axis along which I subdivide is random.
+    * Apartments also grow non-deterministically, but for equivalent max heights, an apartment's and a skyscraper's height will be controlled by the max height multiplied by a size ratio determined by the city design (i.e. apartment: 1.5, skyscraper: 4), so that they grow to approprate heights. 
+  * Parks 
+    * Parks generate trees. 
+    * Both the number and placement of trees within a park are non-deterministic.
+
+
+
+* **Renderer**: Parses the shape grammar by applying the rules for a given number of iterations. The result is a set of nodes for which the renderer finds the corresponding geometry and texture (loaded at the start), applies the node's transformations, and adds it to the scene.
+
+### City Layout Design
+* **City configurability**: I have written a city class so that each city has a city size, a block size, and a road size.
+* **City Blocks**
+![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/block_view.png)
+  * Blocks are placed according to city size, road size, and block size (set and easily changed by a city instance)
+  * Block size is flexible: building placement adapts to the block size by scaling each building accordingly, so that there are no buildings unreachable in the middle of a block, and so that the block is filled length-wise like in actual cities.
+  * Building choice: blocks are filled according to a shape ratio calculated by the block generator. For example, higher density blocks will have a higher ratio of skyscrapers to apartments.
+  * Park blocks: in the real cities I have seen, parks usually fill up an entire block. Going off that, I decide block-wise whether there will be a park, and then fill the block with park nodes. 
+* **City density**
+![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/taller_center.png)
+  * In my layout design, I have equated city density with building height and building choice.
+  * Buildings toward the center are more likely to be taller and fatter, and more likely to be skyscrapers
+  * While high-level density is determined by a buildings location within the city (center or marginal), local density is calculated by a multi-octave noise function.
+
+### Interactivity
+* Shadows: the user can turn shadows on and off
+* Iteration number: the user can see how the buildings are placed and then subsequently grow
+* Rerendering: a rerender button has been included for easy regeneration
+* More to come!
+
+![](https://github.com/sknop8/Project4-Shape-Grammar/blob/master/imgs/main%203.png)
+
+

assets/apartment_roof.mtl

@@ -0,0 +1,59 @@
+newmtl blinn2SG
+illum 4
+Kd 0.14 0.31 0.09
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+Ks 0.50 0.50 0.50
+newmtl blinn3SG
+illum 4
+Kd 0.51 0.21 0.13
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+Ks 0.50 0.50 0.50
+newmtl blinn4SG
+illum 4
+Kd 1.00 0.97 0.88
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+Ks 0.50 0.50 0.50
+newmtl blinn5SG
+illum 4
+Kd 0.77 0.86 1.00
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+Ks 0.50 0.50 0.50
+newmtl blinn6SG
+illum 4
+Kd 0.28 0.50 0.24
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+Ks 0.50 0.50 0.50
+newmtl initialShadingGroup
+illum 4
+Kd 0.50 0.50 0.50
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+newmtl lambert2SG
+illum 4
+Kd 0.00 0.00 0.00
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+newmtl lambert3SG
+illum 4
+Kd 0.50 0.24 0.24
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00
+newmtl lambert4SG
+illum 4
+Kd 0.48 0.50 0.02
+Ka 0.00 0.00 0.00
+Tf 1.00 1.00 1.00
+Ni 1.00