CIS565-Fall-2013 · rohith10 · Nov 4, 2013 · Nov 4, 2013 · Nov 4, 2013 · Nov 4, 2013
diff --git a/README.md b/README.md
diff --git a/part1/flag1024.png b/part1/flag1024.png
diff --git a/part1/flag_wave.html b/part1/flag_wave.html
@@ -0,0 +1,51 @@
+<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;
+    attribute vec2 Texcoord;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+
+    varying float height;
+    varying vec2 Texcoord2;
+
+    void main(void)
+    {
+		height = sin (2.0*3.141596*position.x + u_time) * cos (2.0*3.141596*position.y + u_time);
+		Texcoord2 = position;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    uniform sampler2D u_FlagSampler;
+    varying float height;
+    varying vec2 Texcoord2;
+
+    void main(void)
+    {
+//    	vec3 lowColour = vec3 (1.0, 0.0, 0.0);
+ //   	vec3 highColour = vec3 (0.0, 1.0, 0.0);
+ 		vec3 fl_Colour = texture2D (u_FlagSampler, Texcoord2).rgb;
+		gl_FragColor = vec4(fl_Colour, 1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="waveflag.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/my_wave.html b/part1/my_wave.html
@@ -0,0 +1,46 @@
+<html>
+
+<head>
+<title>Sawtooth 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 float height;
+
+    void main(void)
+    {
+    	float currentPos = position.y + u_time;
+		height = currentPos - floor (currentPos);
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying float height;
+    void main(void)
+    {
+    	vec3 lowColour = vec3 (1.0, 0.0, 0.0);
+    	vec3 highColour = vec3 (0.0, 1.0, 0.0);
+		gl_FragColor = vec4(mix (lowColour, highColour, height), 1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="wavebase.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/simplex_wave.html b/part1/simplex_wave.html
@@ -0,0 +1,88 @@
+<html>
+
+<head>
+<title>Simplex 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 float height;
+
+    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 value1 = simplexNoise (vec2 (u_time*0.5, position));
+	    float value2 = simplexNoise (vec2 (value1, u_time*0.5));
+		height = value1 * value2;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying float height;
+    void main(void)
+    {
+    	vec3 lowColour = vec3 (1.0, 0.0, 0.0);
+    	vec3 highColour = vec3 (0.0, 1.0, 0.0);
+		gl_FragColor = vec4(mix (lowColour, highColour, height+0.5), 1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="wavebase.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -14,26 +14,32 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+
+    varying float height;
 
     void main(void)
     {
-		float height = 0.0;
+		height = sin (2.0*3.141596*position.x + u_time) * cos (2.0*3.141596*position.y + u_time);
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
-
+
+    varying float height;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+    	vec3 lowColour = vec3 (1.0, 0.0, 0.0);
+    	vec3 highColour = vec3 (0.0, 1.0, 0.0);
+		gl_FragColor = vec4(mix (lowColour, highColour, height+0.5), 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>
+<script src ="wavebase.js" type ="text/javascript"></script>
 </body>
 
 </html>
diff --git a/part1/vert_wave.js → part1/wavebase.js b/part1/vert_wave.js → part1/wavebase.js
@@ -5,6 +5,8 @@
 
     var NUM_WIDTH_PTS = 32;
     var NUM_HEIGHT_PTS = 32;
+
+    var curTime = 0;
 
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
@@ -31,6 +33,7 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_timeLocation;
 
     (function initializeShader() {
         var program;
@@ -40,6 +43,7 @@
 		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");
 
         context.useProgram(program);
     })();
@@ -137,12 +141,15 @@
         mat4.multiply(view, model, mv);
         var mvp = mat4.create();
         mat4.multiply(persp, mv, mvp);
+        curTime += 0.01;
 
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f (u_timeLocation, curTime);
+
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);