CIS700-Procedural-Graphics · anvidalal · Feb 17, 2017 · Feb 17, 2017 · Feb 17, 2017 · Feb 17, 2017
diff --git a/README.md b/README.md
@@ -1,45 +1,53 @@
-
-# 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.
+## Procedural City
+<img src="top_view.png" width="500">
+
+## Objective
+Use L-Systems to create a procedurally generated city.
+
+## Inspiration
+My inspiration for this project was Asterix's village, which is a vision I kept for most part of my project until I realizzed technical incapabilities like slow obj loading that made me make a more simplistic version of the village that meets the requirements.
+<br>
+<img src="asterix.png" width="500">
+
+## Process
+I started by designing a grammar for my houses. I added variations like levels, color of the roof, chimney and subdivision. <br>
+This is what different instances of the same iteration look like -
+<br>
+<img src="house1.png" width=“200”>
+<img src="house2.png" width=“200”>
+<img src="house3.png" width=“200”>
+<img src="house4.png" width=“200”>
+<br>
+This is what different iterations look like - <br>
+<img src="it1.png" width=“200”>
+<img src="it2.png" width=“200”>
+<img src="it2.png" width=“200”>
+<img src="it4.png" width=“200”>
+<br>
+Once I was done with this, I thought about how I want to lay out my city. After several trials, I decided to use a pcurve to define my city shape and surround it with forests. I wanted this to change everytime too, so I now I change the bias of the curves everytime.<br>
+<img src="forest1.png" width=“200”>
+<img src="forest2.png" width=“200”>
+<br>
+Then, I wrote a function that takes in the radius and population to make a "cluster" of houses.<br>
+This is how the cluster of houses looks like for different populations.<br>
+<img src="pop1.png" width=“200”>
+<img src="pop2.png" width=“200”>
+<img src="pop3.png" width=“200”>
+<img src="pop4.png" width=“200”>
+<br>
+This is how the cluster of houses looks like for different radii.<br>
+<img src="rad1.png" width=“200>
+<img src="rad2.png" width=“200”>
+<img src="rad3.png" width=“200”>
+<img src="rad4.png" width=“200">
+<br>
+Finally, I integrated my cluster function into a nested for loop to place clusters in some parts of the land. This is also randomized, but stays within the city bounds.
+<br>
+Here are some instances of the city generation.<br>
+<img src="city1.png" width=“200">
+<img src="city2.png" width=“200">
+<img src="city3.png" width=“200">
+<br>
+And here are some city skyline photos.<br>
+<img src="skyline1.png" width="500">
+<img src="skyline2.png" width="500">
diff --git a/asterix.png b/asterix.png
diff --git a/bundle.js.map b/bundle.js.map
diff --git a/city1.png b/city1.png
diff --git a/city2.png b/city2.png
diff --git a/city3.png b/city3.png
diff --git a/forest1.png b/forest1.png
diff --git a/forest2.png b/forest2.png
diff --git a/house1.png b/house1.png
diff --git a/house2.png b/house2.png
diff --git a/house3.png b/house3.png
diff --git a/house4.png b/house4.png
diff --git a/images/skymap/nx.jpg b/images/skymap/nx.jpg
diff --git a/images/skymap/ny.jpg b/images/skymap/ny.jpg
diff --git a/images/skymap/nz.jpg b/images/skymap/nz.jpg
diff --git a/images/skymap/px.jpg b/images/skymap/px.jpg
diff --git a/images/skymap/py.jpg b/images/skymap/py.jpg
diff --git a/images/skymap/pz.jpg b/images/skymap/pz.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HW: Curves and Instancing</title>
+    <style>
+      html, body {
+        margin: 0;
+        overflow: hidden;
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/it1.png b/it1.png
diff --git a/it2.png b/it2.png
diff --git a/it3.png b/it3.png
diff --git a/it4.png b/it4.png
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/babylon b/node_modules/.bin/babylon
diff --git a/node_modules/.bin/errno b/node_modules/.bin/errno
diff --git a/node_modules/.bin/gasket b/node_modules/.bin/gasket
diff --git a/node_modules/.bin/gh-pages-deploy b/node_modules/.bin/gh-pages-deploy
diff --git a/node_modules/.bin/jsesc b/node_modules/.bin/jsesc
diff --git a/node_modules/.bin/json5 b/node_modules/.bin/json5
diff --git a/node_modules/.bin/loose-envify b/node_modules/.bin/loose-envify
diff --git a/node_modules/.bin/mime b/node_modules/.bin/mime
diff --git a/node_modules/.bin/mkdirp b/node_modules/.bin/mkdirp
diff --git a/node_modules/.bin/ncp b/node_modules/.bin/ncp
diff --git a/node_modules/.bin/ndjson b/node_modules/.bin/ndjson
diff --git a/node_modules/.bin/npm-execspawn b/node_modules/.bin/npm-execspawn
diff --git a/node_modules/.bin/regjsparser b/node_modules/.bin/regjsparser
diff --git a/node_modules/.bin/rimraf b/node_modules/.bin/rimraf
diff --git a/node_modules/.bin/sha.js b/node_modules/.bin/sha.js
diff --git a/node_modules/.bin/uglifyjs b/node_modules/.bin/uglifyjs
diff --git a/node_modules/.bin/webpack b/node_modules/.bin/webpack
diff --git a/node_modules/.bin/webpack-dev-server b/node_modules/.bin/webpack-dev-server
diff --git a/node_modules/accepts/HISTORY.md b/node_modules/accepts/HISTORY.md