CIS700-Procedural-Graphics · zelliott · Apr 17, 2017 · Apr 17, 2017 · Apr 17, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.vscode/.browse.VC.db b/.vscode/.browse.VC.db
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
-# FinalProject
+# CIS700 Procedural Graphics: Final Project
+
+Design Doc: `./writeups/design_doc.md`
+Milestone #1 Doc: `./writeups/milestone1_doc.md`
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HW1: Noise</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/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --hot --inline",
+    "build": "webpack",
+    "deploy": "gh-pages-deploy"
+  },
+  "gh-pages-deploy": {
+    "prep": [
+      "build"
+    ],
+    "noprompt": true
+  },
+  "dependencies": {
+    "chroma-js": "^1.3.3",
+    "dat-gui": "^0.5.0",
+    "gl-matrix": "^2.3.2",
+    "lodash": "^4.17.4",
+    "noisejs": "^2.1.0",
+    "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",
+    "gh-pages-deploy": "^0.4.2",
+    "webpack": "^1.13.3",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-glsl-loader": "^1.0.1"
+  }
+}
diff --git a/src/framework.js b/src/framework.js
@@ -0,0 +1,75 @@
+
+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);
+    });
+
+    // 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
+}
+
+export const PI = 3.14159265
+export const e = 2.7181718
diff --git a/src/geography-manager/geography-manager.js b/src/geography-manager/geography-manager.js
@@ -0,0 +1,36 @@
+const THREE = require('three');
+const _ = require('lodash');
+const NOISEJS = require('noisejs');
+const CHROMA = require('chroma-js');
+
+export default class GeographyManager {
+  constructor(options, map) {
+    this.map = map;
+  }
+
+  generateElevationMap() {
+    var nodes = this.map.graphManager.nodes;
+    var cells = this.map.graphManager.cells;
+    var seed = Math.random();
+    var noise = new NOISEJS.Noise(seed);
+
+    nodes.forEach(function(node) {
+      var elevation = noise.simplex2(node.pos.x / 100, node.pos.y / 100);
+
+      var f = CHROMA.scale(['008ae5', 'yellow']).domain([-1, 1]);
+
+      node.color = f(elevation);
+      node.elevation = elevation;
+    });
+
+    cells.forEach(function(cell) {
+      var colors = [];
+
+      cell.corners.forEach(function(corner) {
+        colors.push(corner.color);
+      });
+
+      cell.color = CHROMA.average(colors);
+    });
+  }
+}
diff --git a/src/graph-manager/cell.js b/src/graph-manager/cell.js
@@ -0,0 +1,17 @@
+export default class Cell {
+  constructor() {
+    this.center = {};
+    this.halfedges = [];
+    this.corners = [];
+  }
+
+  getElevation() {
+    var elevation = 0;
+
+    _.forEach(this.corners, function(corner) {
+      elevation += corner.elevation;
+    });
+
+    return elevation / this.corners.length;
+  }
+}
diff --git a/src/graph-manager/edge.js b/src/graph-manager/edge.js
@@ -0,0 +1,6 @@
+export default class Edge {
+  constructor(nodeA, nodeB) {
+    this.nodeA = nodeA;
+    this.nodeB = nodeB;
+  }
+}