Brian Tong

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

README.md

@@ -1,45 +1,56 @@
 
 # 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.
+## Generating Buildings
+All buildings start off as a single box geometry of sizes (small, medium, large)
+with some minor variations. The height of the buildings are determined by a population map
+that can be imported from an image file.
+
+The first iteration of the shape grammar determines whether the building will have
+side panels.
+
+A=>C,  A=>S
+
+In the next iteration, the side panels will terminate. The other symbols will randomly
+select between uniform vertical division of the block, or the same division with
+differentiation of the top and bottom levels.
+
+C=>U, C=>T/U/B, S=>X
+
+The next iteration adds details to the levels. The top levels have a ticker or a
+scaled block. The bottom levels are scaled larger. The middle levels select between
+alternating level sizes, billboards or signs.
+
+U=>{billboards, signs, alternating scaling}
+
+## Placing Buildings
+The entire city is represented by a grid system like Sim City. Each time
+a building is placed, the grid locations are marked as occupied to prevent overlapping buildings.
+
+Buildings are placed probabilistically based on the population map using
+the pointalism algorithm we talked about in class. Random points are selected from
+the grid and will be kept or discarded using the population map value as a threshold.
+
+I also implemented a HTML5 canvas based lsystem to generate the roads. This is
+still a work in progress as it does not take into account any additional parameters.
+My intention is to translate the canvas values into the city grid. This way, buildings
+will not over lap with roads.
+
+## Fun Features
+The ticker textures on the top of buildings are generated procedurally. Normally,
+we load an image into Three.js to use as a texture, but its actually possible to use
+an HTML5 canvas instead [[2]](http://learningthreejs.com/blog/2013/08/02/how-to-do-a-procedural-city-in-100lines/) ! Just draw on a canvas element and then pass it directly
+into THREE.texture(canvas).
+
+## Demo
+![image](https://i.imgur.com/HrDAwEA.jpg)
+Demo: https://iambrian.github.io/Project4-Shape-Grammar/
+
+# Resources
+[1] Borrowed some of the ticker messages from Sim City: http://simcity.wikia.com/wiki/List_of_news_ticker_messages
+
+[2] Procedural Textures using canvas: http://learningthreejs.com/blog/2013/08/02/how-to-do-a-procedural-city-in-100lines/
+
+[3] Subversion city generator for inspiration: https://www.youtube.com/watch?v=FR9xI0GgrBY
+
+[4] Also Mirror's Edge for inspiration: http://imgur.com/LsvEPJW

deploy.js

@@ -0,0 +1,38 @@
+var colors = require('colors');
+var path = require('path');
+var git = require('simple-git')(__dirname);
+var deploy = require('gh-pages-deploy');
+var packageJSON = require('require-module')('./package.json');
+
+var success = 1;
+git.fetch('origin', 'master', function(err) {
+    if (err) throw err;
+    git.status(function(err, status) {
+        if (err) throw err;
+        if (!status.isClean()) {
+            success = 0;
+            console.error('Error: You have uncommitted changes! Please commit them first'.red);   
+        }
+
+        if (status.current !== 'master') {
+            success = 0;
+            console.warn('Warning: Please deploy from the master branch!'.yellow)
+        }
+
+        git.diffSummary(['origin/master'], function(err, diff) {
+            if (err) throw err;
+
+            if (diff.files.length || diff.insertions || diff.deletions) {
+                success = 0;
+                console.error('Error: Current branch is different from origin/master! Please push all changes first'.red)
+            }
+
+            if (success) {
+                var cfg = packageJSON['gh-pages-deploy'] || {};
+                var buildCmd = deploy.getFullCmd(cfg);
+                deploy.displayCmds(deploy.getFullCmd(cfg));
+                deploy.execBuild(buildCmd, cfg);
+            }
+        })
+    })
+})

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HW2: LSystems</title>
+    <style>
+      html, body {
+        margin: 0;
+        overflow: hidden;
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- <div id="debug" style="height:200px;width:200px;position:absolute;bottom:0;left:0;"></div> -->
+    <script src="bundle.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,31 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --hot --inline",
+    "build": "webpack",
+    "deploy": "node deploy.js"
+  },
+  "gh-pages-deploy": {
+    "prep": [
+      "build"
+    ],
+    "noprompt": true
+  },
+  "dependencies": {
+    "dat-gui": "^0.5.0",
+    "gl-matrix": "^2.3.2",
+    "stats-js": "^1.0.0-alpha1",
+    "three": "^0.82.1",
+    "three-orbit-controls": "^82.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.8",
+    "babel-preset-es2015": "^6.18.0",
+    "colors": "^1.1.2",
+    "gh-pages-deploy": "^0.4.2",
+    "simple-git": "^1.65.0",
+    "webpack": "^1.13.3",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-glsl-loader": "^1.0.1"
+  }
+}