CIS565-Fall-2014 · stephengou · Oct 31, 2014 · Oct 31, 2014 · Oct 31, 2014 · Nov 1, 2014
diff --git a/README.md b/README.md
diff --git a/assets/Thumbs.db b/assets/Thumbs.db
diff --git a/custom_vert_wave.html b/custom_vert_wave.html
@@ -0,0 +1,292 @@
+<html>
+
+<head>
+<title>Vertex Wave</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
+<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
+<script src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
+<script src ="js/webGLUtility.js" type ="text/javascript"></script>
+<script src="js/lib/dat.gui.min.js" type="text/javascript"></script>
+
+<script id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+    uniform vec4 u_lowCol;
+    uniform vec4 u_highCol;
+    uniform vec4 u_setting;//[0] freq [1] speed  [2]height  [3] dist
+
+    varying vec4 f_color;
+
+    void main(void)
+    {   
+         float freq = u_setting[0];
+         float speed = u_setting[1];
+         float dx =  (0.5 - position.x);
+         float dy =  (0.5 - position.y);
+         float D =  sqrt(dx*dx+dy*dy) + 0.00001;
+         float height = u_setting[2] * (1.0/D) * sin((freq *D - speed * u_time));
+
+		 gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+         f_color = mix(u_lowCol,u_highCol, D);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec4 f_color;
+
+    void main(void)
+    {
+
+		  gl_FragColor = f_color;
+    }    
+</script>
+
+<script>
+  // Globals
+  var positionLocation = 0;
+  var heightLocation = 1;
+  var u_modelViewPerspectiveLocation;
+  var u_lowColorLocation;
+  var u_highColorLocation;
+  var u_timeLocation;
+  var u_settingLocation; 
+
+  var colorController;
+  var setting = [40.0, 5.0, 0.01, 0.5]; //[0] freq [1] speed  [2]height  [3] dist
+
+  var lowCol = [0.0,1.0,0.0,1.0];
+  var highCol = [0.0, 1.0, 0.0, 1.0];
+  var time = 0.0;
+  var deltaT = 0.02;
+
+  var heights;
+  var numberOfIndices;
+
+  var eye = [2.0, 1.0, 3.0];
+  var center = [0.0, 0.0, 0.0];
+  var up = [0.0, 0.0, 1.0];
+
+
+  var NUM_WIDTH_PTS = 64;
+  var NUM_HEIGHT_PTS = 64;
+
+  var message;
+  var canvas;
+  var context;
+
+  var persp = mat4.create();
+  var view = mat4.create();
+
+
+  var ColorControl = function () {
+
+      this.minCol = [255,0,0,1]; 
+      this.maxCol = [0, 0, 255, 1];
+      this.frequency = 20.0;
+      this.amplitude = 0.02;
+
+  };
+
+  window.onload = function () {
+
+      colorController = new ColorControl();
+      var gui = new dat.GUI();
+
+      gui.addColor(colorController, 'minCol').onChange(function()
+      {
+          for (var i = 0; i < 4; ++i) {
+              lowCol[i] = colorController.minCol[i]/255.0;
+          }
+      });
+
+
+      gui.addColor(colorController, 'maxCol').onChange(function()
+      {
+          for (var i = 0; i < 4; ++i) {
+              highCol[i] = colorController.maxCol[i]/255.0;
+          }
+      });
+      //init color
+      for (var i = 0; i < 4; ++i) {
+          lowCol[i] = colorController.minCol[i] / 255.0;
+          highCol[i] = colorController.maxCol[i] / 255.0;
+      }
+
+      gui.add(colorController, 'frequency', 5.0, 40.0).onChange(function ()
+      {
+          setting[0] = colorController.frequency;
+      });
+
+
+
+      gui.add(colorController, 'amplitude', 0.0, 0.03).onChange(function () 
+      {
+          setting[2] = colorController.amplitude;
+      });
+
+      init();
+
+      animate();
+
+  };
+
+  function init() {
+    message = document.getElementById("message");
+    canvas = document.getElementById("canvas");
+    context = createWebGLContext(canvas, message);
+
+    if (!context) {
+      return;
+    }
+
+    // SET UP WEBGL CONTEXT
+    context.viewport(0, 0, canvas.width, canvas.height);
+    context.clearColor(1.0, 1.0, 1.0, 1.0);
+    context.enable(context.DEPTH_TEST);
+
+
+    mat4.perspective(45.0, 0.5, 0.1, 100.0, persp);
+
+    mat4.lookAt(eye, center, up, view);
+
+    initializeShader();
+    initializeGrid(); 
+  }
+
+
+  function animate() {
+    time += deltaT;
+
+    // Update
+    var model = mat4.create();
+    mat4.identity(model);
+    mat4.translate(model, [-0.5, -0.5, 0.0]);
+    var mv = mat4.create();
+    mat4.multiply(view, model, mv);
+    var mvp = mat4.create();
+    mat4.multiply(persp, mv, mvp);
+
+    // clear  
+    context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
+
+    //pass uniforms to shader
+    context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+    context.uniform1f(u_timeLocation, time);
+    context.uniform4fv(u_lowColorLocation, lowCol);
+    context.uniform4fv(u_highColorLocation, highCol);
+    context.uniform4fv(u_settingLocation, setting);
+
+    //render
+    context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+
+    window.requestAnimFrame(animate);
+  }
+
+  function initializeShader() {
+    var program;
+    var vs = getShaderSource(document.getElementById("vs"));
+    var fs = getShaderSource(document.getElementById("fs"));
+
+	var program = createProgram(context, vs, fs, message);
+	context.bindAttribLocation(program, positionLocation, "position");
+
+    //set up uniform locations
+	u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
+	u_lowColorLocation = context.getUniformLocation(program, "u_lowCol");
+	u_highColorLocation = context.getUniformLocation(program, "u_highCol");
+	u_timeLocation = context.getUniformLocation(program, "u_time");
+	u_settingLocation = context.getUniformLocation(program, "u_setting");
+
+    context.useProgram(program);
+  }
+
+  function initializeGrid() {
+    function uploadMesh(positions, heights, indices) {
+      // Positions
+      var positionsName = context.createBuffer();
+      context.bindBuffer(context.ARRAY_BUFFER, positionsName);
+      context.bufferData(context.ARRAY_BUFFER, positions, context.STREAM_DRAW);
+      context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);
+      context.enableVertexAttribArray(positionLocation);
+
+      if (heights){
+        // Heights
+        var heightsName = context.createBuffer();
+        context.bindBuffer(context.ARRAY_BUFFER, heightsName);
+        context.bufferData(context.ARRAY_BUFFER, heights.length *
+                            heights.BYTES_PER_ELEMENT, context.STATIC_DRAW);
+        context.vertexAttribPointer(heightLocation, 1, context.FLOAT, false, 0, 0);
+        context.enableVertexAttribArray(heightLocation);
+      }
+
+      // Indices
+      var indicesName = context.createBuffer();
+      context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, indicesName);
+      context.bufferData(context.ELEMENT_ARRAY_BUFFER, indices, context.STATIC_DRAW);
+    }
+
+    var WIDTH_DIVISIONS = NUM_WIDTH_PTS - 1;
+    var HEIGHT_DIVISIONS = NUM_HEIGHT_PTS - 1;
+
+    var numberOfPositions = NUM_WIDTH_PTS * NUM_HEIGHT_PTS;
+
+    var positions = new Float32Array(2 * numberOfPositions);
+    var indices = new Uint16Array(2 * ((NUM_HEIGHT_PTS * (NUM_WIDTH_PTS - 1)) +
+                                (NUM_WIDTH_PTS * (NUM_HEIGHT_PTS - 1))));
+
+    var positionsIndex = 0;
+    var indicesIndex = 0;
+    var length;
+
+    for (var j = 0; j < NUM_WIDTH_PTS; ++j){
+      positions[positionsIndex++] = j /(NUM_WIDTH_PTS - 1);
+      positions[positionsIndex++] = 0.0;
+
+      if (j>=1){
+        length = positionsIndex / 2;
+        indices[indicesIndex++] = length - 2;
+        indices[indicesIndex++] = length - 1;
+      }
+    }
+
+    for (var i = 0; i < HEIGHT_DIVISIONS; ++i){
+      var v = (i + 1) / (NUM_HEIGHT_PTS - 1);
+      positions[positionsIndex++] = 0.0;
+      positions[positionsIndex++] = v;
+
+      length = (positionsIndex / 2);
+      indices[indicesIndex++] = length - 1;
+      indices[indicesIndex++] = length - 1 - NUM_WIDTH_PTS;
+
+      for (var k = 0; k < WIDTH_DIVISIONS; ++k){
+        positions[positionsIndex++] = (k + 1) / (NUM_WIDTH_PTS - 1);
+        positions[positionsIndex++] = v;
+
+        length = positionsIndex / 2;
+        var new_pt = length - 1;
+        indices[indicesIndex++] = new_pt - 1;  // Previous side
+        indices[indicesIndex++] = new_pt;
+
+        indices[indicesIndex++] = new_pt - NUM_WIDTH_PTS;  // Previous bottom
+        indices[indicesIndex++] = new_pt;
+      }
+    }
+
+    uploadMesh(positions, heights, indices);
+    numberOfIndices = indices.length;
+}
+
+</script>
+
+</body>
+
+</html>
diff --git a/day1.jpg b/day1.jpg
diff --git a/day2.jpg b/day2.jpg