CIS565-Fall-2013 · tiansijie · Nov 2, 2013 · Nov 4, 2013 · Nov 5, 2013 · Nov 6, 2013
diff --git a/README.md b/README.md
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -15,19 +15,33 @@
 
     uniform mat4 u_modelViewPerspective;
 
+    uniform float u_time;
+
+    varying vec3 f_color;
+
     void main(void)
     {
-		float height = 0.0;
+        float s_contrib = sin(position.x*2.0*3.14159 + u_time * 0.3);
+        float t_contrib = cos(position.y*2.0*3.14159 + u_time * 0.3);
+        float height = s_contrib*t_contrib;
+
+        vec3 highColor = vec3(1.0, 2.0, 0.0);
+        vec3 lowColor = vec3(0.0, 0.8, 1.0);
+
+        f_color = mix(lowColor, highColor, height);
+
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
 
+    varying vec3 f_color;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+        gl_FragColor = vec4(f_color,1.0);
     }    
 </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,8 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_timeLocation;
+    var deltaTime = 0;
 
     (function initializeShader() {
         var program;
@@ -41,6 +43,8 @@
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
 
+        u_timeLocation = context.getUniformLocation(program, "u_time");
+
         context.useProgram(program);
     })();
 
@@ -138,11 +142,15 @@
         var mvp = mat4.create();
         mat4.multiply(persp, mv, mvp);
 
+        deltaTime += 0.1;
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+
+        context.uniform1f(u_timeLocation, deltaTime);
+
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);

diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html
@@ -0,0 +1,56 @@
+<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 f_color;
+
+
+    void main(void)
+    {
+        float dis = distance(position, vec2(0.5,0.5))*30.0;
+        float height = sin(u_time - dis) / (u_time - dis);
+        height = clamp(height, -1.0, 1.0);
+
+        vec3 highColor = vec3(1.0, 0.2, 0.0);
+        vec3 lowColor = vec3(0.3, 0.8, 0.4);
+
+        f_color = mix(lowColor, highColor, height);
+
+		    gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+
+
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 f_color;
+    void main(void)
+    {
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+        gl_FragColor = vec4(f_color,1.0);
+    }    
+</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,98 @@
+<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 f_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)
+    {
+        float timeScale = 0.04;
+        vec2 simplexVec = vec2(u_time * timeScale, position.x);
+        float s_contrib = simplexNoise(simplexVec);
+        float t_contrib = simplexNoise(vec2(s_contrib,u_time * timeScale));
+        float height = s_contrib*t_contrib;
+
+        vec3 highColor = vec3(1.0, 2.0, 0.0);
+        vec3 lowColor = vec3(0.0, 0.8, 1.0);
+
+        f_color = mix(lowColor, highColor, height);
+
+		    gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+
+
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 f_color;
+    void main(void)
+    {
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+        gl_FragColor = vec4(f_color,1.0);
+    }    
+</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>