CIS565-Fall-2013 · zxyzhu · Nov 6, 2013 · Nov 6, 2013 · Nov 6, 2013 · Nov 6, 2013
diff --git a/README.md b/README.md
diff --git a/part1/simplexWave.png b/part1/simplexWave.png
diff --git a/part1/sineWave.png b/part1/sineWave.png
diff --git a/part1/stats.min.js b/part1/stats.min.js
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -14,23 +14,37 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
 
+    varying vec3 color;
+
     void main(void)
     {
-		float height = 0.0;
+        float s_contrib = sin(position.x*2.0*3.14159 + u_time);
+        float t_contrib = cos(position.y*2.0*3.14159 + u_time);
+		float height = s_contrib*t_contrib;
+
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+        vec3 color1 = vec3(1.0, 215.0/255.0, 0.0);
+        vec3 color2 = vec3 (128.0/255.0, 0.0, 128.0/255.0);
+
+        //blend them
+        color = height*color1 + (1.0 - height)*color2;
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
 
+    varying vec3 color;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(color, 1.0);
     }    
 </script>
 
+<script src ="stats.min.js" type ="text/javascript"></script>
 <script src ="gl-matrix.js" type ="text/javascript"></script>
 <script src ="webGLUtility.js" type ="text/javascript"></script>
 <script src ="vert_wave.js" type ="text/javascript"></script>

diff --git a/part1/vert_wave.js b/part1/vert_wave.js
@@ -3,8 +3,8 @@
     /*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/
     /*global getShaderSource,createWebGLContext,createProgram*/
 
-    var NUM_WIDTH_PTS = 32;
-    var NUM_HEIGHT_PTS = 32;
+    var NUM_WIDTH_PTS = 64;
+    var NUM_HEIGHT_PTS = 64;
 
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
@@ -31,6 +31,13 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_gridCenterLocation;
+    var u_gridCenter = [NUM_WIDTH_PTS / 2.0, NUM_HEIGHT_PTS / 2.0];
+
+    //time
+    var u_timeLocation;
+    var u_time = 0.02;
+    var add = true;
 
     (function initializeShader() {
         var program;
@@ -40,6 +47,8 @@
 		var program = createProgram(context, vs, fs, message);
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
+		u_timeLocation = context.getUniformLocation(program, "u_time");
+		u_gridCenterLocation = context.getUniformLocation(program, "u_gridCenter");
 
         context.useProgram(program);
     })();
@@ -126,6 +135,16 @@
         numberOfIndices = indices.length;
     })();
 
+    var stats = new Stats();
+    stats.setMode(1); // 0: fps, 1: ms
+
+    // Align top-left
+    stats.domElement.style.position = 'absolute';
+    stats.domElement.style.left = '0px';
+    stats.domElement.style.top = '0px';
+
+    document.body.appendChild(stats.domElement);
+
     (function animate(){
         ///////////////////////////////////////////////////////////////////////////
         // Update
@@ -142,10 +161,28 @@
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
+        //pass in uniforms
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f(u_timeLocation, u_time);
+        context.uniform2f(u_gridCenterLocation, u_gridCenter[0], u_gridCenter[1]);
+
+        stats.begin();
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+        stats.end();
+
+        window.requestAnimFrame(animate);
+
+        if (u_time < 50.0 && add) {
+            u_time += 0.05;
+        }
+        else {
+            u_time += -0.05;
+            add = false;
+            if (u_time < 0.0) {
+                add = true;
+            }
+        }
 
-		window.requestAnimFrame(animate);
     })();
 
 }());
diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html
@@ -0,0 +1,57 @@
+<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 id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+    uniform vec2 u_gridCenter;
+
+    varying vec3 color;
+
+    void main(void)
+    {
+
+        float distToCenter = length(position - vec2(0.5, 0.5)) ;
+
+        float s_contrib = 4.0*distToCenter * sin(u_time * distToCenter*0.5);
+        float t_contrib = 4.0*distToCenter * cos(u_time * distToCenter*0.5);
+		float height = s_contrib*t_contrib;
+
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, 0.1*height), 1.0);
+
+        vec3 color1 = vec3(0.43, 0.05, 0.48);
+        vec3 color2 = vec3 (1.0, 0.3, 0.09);
+
+        //blend them
+        color = height*color1 + (1.0 - height)*color2;
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 color;
+    void main(void)
+    {
+		gl_FragColor = vec4(color, 1.0);
+    }    
+</script>
+
+<script src ="stats.min.js" type ="text/javascript"></script>
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="vert_wave.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/vert_wave_simplex.html b/part1/vert_wave_simplex.html
@@ -0,0 +1,94 @@
+<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 id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+
+    varying vec3 color;
+
+    vec3 permute(vec3 x) {
+        x = ((x*34.0)+1.0)*x;
+        return x - floor(x * (1.0 / 289.0)) * 289.0;
+    }
+
+    float simplexNoise(vec2 v){
+      const vec4 C = vec4(0.211324865405187, 0.366025403784439,  -0.577350269189626, 0.024390243902439); 
+
+      vec2 i  = floor(v + dot(v, C.yy) );
+      vec2 x0 = v -   i + dot(i, C.xx);
+
+      vec2 i1;
+      i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+
+      vec4 x12 = x0.xyxy + C.xxzz;
+      x12.xy -= i1;
+
+      i = i - floor(i * (1.0 / 289.0)) * 289.0;
+
+      vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+            + i.x + vec3(0.0, i1.x, 1.0 ));
+
+      vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+      m = m*m ;
+      m = m*m ;
+
+      vec3 x = 2.0 * fract(p * C.www) - 1.0;
+      vec3 h = abs(x) - 0.5;
+      vec3 ox = floor(x + 0.5);
+      vec3 a0 = x - ox;
+
+      m *= inversesqrt( a0*a0 + h*h );
+
+      vec3 g;
+      g.x  = a0.x  * x0.x  + h.x  * x0.y;
+      g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+      return 130.0 * dot(m, g);
+    }
+
+    void main(void){
+
+        vec2 simplexVec = vec2(u_time/10.0, position);
+        float s_contrib = simplexNoise(simplexVec);
+        float t_contrib = simplexNoise(vec2(s_contrib,u_time));
+		float height = s_contrib*t_contrib;
+
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+        vec3 color1 = vec3(1.0, 215.0/255.0, 0.0);
+        vec3 color2 = vec3 (128.0/255.0, 0.0, 128.0/255.0);
+
+        //blend them
+        color = height*color1 + (1.0 - height)*color2;
+    }
+
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 color;
+    void main(void)
+    {
+		gl_FragColor = vec4(color, 1.0);
+    }    
+</script>
+
+<script src ="stats.min.js" type ="text/javascript"></script>
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="vert_wave.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/waterWave.png b/part1/waterWave.png
diff --git a/part2/earthheight1024.png b/part2/earthheight1024.png
diff --git a/part2/elevation.png b/part2/elevation.png