Ellen Duong

.gitignore

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

README.md

@@ -8,38 +8,22 @@ For this assignment you'll be building directly off of Project 3. To make things
 **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
+Shape class
 
 ## 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)
+- Subdivision of buildings
+- Floors
+- Roofs on top floor
+- Columns on bottom floor
+- I have the geometry to make onings, but alas I didn't end up using it.
+
 
 ## 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.
+- Regular ground plane (I understand, I'm sorry)
+- Made multiple buildings
 
 ## 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.
+- Well, I was going to go for the forbidden city, but that didn't work out.
+But I am satisfied to the point I got to despite the point allocation.
 
-## 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.
+Submitted Late.

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,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HW2: LSystems</title>
+    <style>
+      html, body {
+        margin: 0;
+        overflow: hidden;
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <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"
+  }
+}

src/framework.js

@@ -0,0 +1,72 @@
+
+const THREE = require('three');
+const OrbitControls = require('three-orbit-controls')(THREE)
+import Stats from 'stats-js'
+import DAT from 'dat-gui'
+
+// when the scene is done initializing, the function passed as `callback` will be executed
+// then, every frame, the function passed as `update` will be executed
+function init(callback, update) {
+  var stats = new Stats();
+  stats.setMode(1);
+  stats.domElement.style.position = 'absolute';
+  stats.domElement.style.left = '0px';
+  stats.domElement.style.top = '0px';
+  document.body.appendChild(stats.domElement);
+
+  var gui = new DAT.GUI();
+
+  var framework = {
+    gui: gui,
+    stats: stats
+  };
+
+  // run this function after the window loads
+  window.addEventListener('load', function() {
+
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
+    var renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x020202, 0);
+
+    var controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.enableZoom = true;
+    controls.target.set(0, 0, 0);
+    controls.rotateSpeed = 0.3;
+    controls.zoomSpeed = 1.0;
+    controls.panSpeed = 2.0;
+
+    document.body.appendChild(renderer.domElement);
+
+    // resize the canvas when the window changes
+    window.addEventListener('resize', function() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }, false);
+
+    // assign THREE.js objects to the object we will return
+    framework.scene = scene;
+    framework.camera = camera;
+    framework.renderer = renderer;
+
+    // begin the animation loop
+    (function tick() {
+      stats.begin();
+      update(framework); // perform any requested updates
+      renderer.render(scene, camera); // render the scene
+      stats.end();
+      requestAnimationFrame(tick); // register to call this again when the browser renders a new frame
+    })();
+
+    // we will pass the scene, gui, renderer, camera, etc... to the callback function
+    return callback(framework);
+  });
+}
+
+export default {
+  init: init
+}

src/linkedlist.js

@@ -0,0 +1,77 @@
+export default class LinkedList {
+	constructor() {
+		this.head = null;
+		this.tail = null;
+	};
+
+	// Pushes node with value into the LL
+	push(value) {
+		var node = {
+			value: value,
+			next: null,
+			prev: null
+		}
+
+		if (this.head === null) {
+			// First element
+			this.head = node;
+			this.tail = node;
+		} else {
+			// Add to end of list
+			node.prev = this.tail;
+			this.tail.next = node;
+			this.tail = node; // Update tail
+		}
+	};
+
+	// Pops node off of the LL
+	pop() {
+		// 0 Elements
+		if (this.head === null) {
+			return null;
+		}
+
+		// 1 Element
+		else if (this.tail === this.head) {
+			var node = this.head;
+
+			this.head = null;
+			this.tail = null;
+
+			return node;
+		}
+
+		// 2+ Elements
+		else {
+			var node = this.tail;
+			this.tail = this.tail.prev;
+			this.tail.next = null;
+
+			return node;
+		}
+	};
+
+	// Returns a string version of the LL
+	// Assuming that the value is a letter
+	toString() {
+		if (this.head === null) {
+			return '';
+		} else {
+			var curr = this.head;
+			var result = '';
+
+			while (curr !== null) {
+				result += curr.value;
+				curr = curr.next;
+			}
+
+			return result;
+		} 
+	};
+
+	// Clones the LL
+	clone() {
+		return JSON.parse(JSON.stringify(this));
+	};
+}
+

src/main.js

@@ -0,0 +1,66 @@
+
+const THREE = require('three'); // older modules are imported like this. You shouldn't have to worry about this much
+import Framework from './framework'
+import ShapeSystem from './shapesystem'
+import Shape from './shape.js'
+
+
+// Materials
+var lambertWhite = new THREE.MeshLambertMaterial( {color: 0xffffff} );
+
+// Geometry
+var boxGeo = new THREE.BoxGeometry( 1, 1, 1 );
+
+// Mesh
+var cubeMesh = new THREE.Mesh( boxGeo, lambertWhite );
+
+// called after the scene loads
+function onLoad(framework) {
+  var scene = framework.scene;
+  var camera = framework.camera;
+  var renderer = framework.renderer;
+  var gui = framework.gui;
+  var stats = framework.stats;
+
+  // initialize a simple box and material
+  var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+  directionalLight.color.setHSL(0.1, 1, 0.95);
+  directionalLight.position.set(1, 3, 2);
+  directionalLight.position.multiplyScalar(10);
+  scene.add(directionalLight);
+
+  // set camera position
+  camera.position.set(50, 100, 200);
+  camera.lookAt(new THREE.Vector3(0,0,0));
+
+  new Shape(null, )
+  var axiom = [new Shape(), new Shape(), new Shape(), new Shape(), new Shape(), new Shape(), new Shape()];
+  for (var i = 0; i < axiom.length; i++) {
+    var sc = axiom[i].mesh.scale;
+    axiom[i].mesh.position.set((3.0 + sc.x) * i , sc.y / 2.0, sc.z);
+  }
+
+  var ss = new ShapeSystem(axiom, scene);
+
+  gui.add(camera, 'fov', 0, 180).onChange(function(newVal) {
+    camera.updateProjectionMatrix();
+  });
+
+  gui.add(ss, 'iterate');
+
+  var geometry = new THREE.PlaneGeometry( 250, 50, 32 );
+  var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
+  var plane = new THREE.Mesh( geometry, material );
+  plane.rotateX(Math.PI / 2.0);
+  scene.add( plane );
+
+  // ss.axiom[0].subdivide(0);
+  ss.traverse(scene);
+}
+
+// called on frame updates
+function onUpdate(framework) {
+}
+
+// when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate
+Framework.init(onLoad, onUpdate);