CIS565-Fall-2013 · uriahjb · Nov 5, 2013 · Nov 7, 2013 · Nov 7, 2013 · Nov 7, 2013
diff --git a/README.md b/README.md
@@ -1,3 +1,46 @@
+Fully Featured Globe:
+
+![Globe fully featured](resources/globe_best_water.png)
+
+Animated Butterfly Function:
+
+![Butterfly](resources/butterfly0.png)
+
+-------------------------------------------------------------------------------
+CIS565: Project 5: WebGL
+-------------------------------------------------------------------------------
+
+Part1:
+Implemented:
+* Sine and Simplex waves
+* Animated butterfly function. 
+  * A description of the butterfly function can be found here: http://mathworld.wolfram.com/ButterflyFunction.html
+  * Video can be found here: http://youtu.be/lUHQKqqMGtc
+
+Part2:
+Implemented:
+* Bump mapped terrain
+* Rim lighting to simulate atmosphere
+* Night-time lights on the dark side of the globe
+* Specular mapping
+* Moving clouds
+Additionally:
+* Procedural water rendering and animation using noise 
+  * This was a pretty good attempt but it could definitely be more physically motivated. 
+    It leads to some interesting artifacts but also some great looking bits. 
+
+Video of my globe can be found here: http://youtu.be/C0MUYax2qEw
+
+Images showing water effect:
+
+![water0](resources/water0.png)
+![water1](resources/water1.png)
+![water2](resources/water2.png)
+
+
+
+
+
 -------------------------------------------------------------------------------
 CIS565: Project 5: WebGL
 -------------------------------------------------------------------------------

diff --git a/part1/butterfly.html b/part1/butterfly.html
@@ -0,0 +1,65 @@
+<html>
+
+<head>
+<title>Butterfly</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 v_color;
+
+    vec3 min_color = vec3(1.0, 0.2, 0.0);
+    vec3 max_color = vec3(0.0, 0.8, 1.0);
+    float max_height = 2.0;
+    float min_height = -2.0;
+    float scl;
+
+    float tanh( float x ) {
+      return (exp(2.0 * x) - 1.0) / (exp(2.0 * x) + 1.0);
+    }
+
+    void main(void)
+    {
+                float x = 10.0*(position.x - 0.5);
+                float y = 10.0*(position.y - 0.5);
+                float t = 2.0*sin(0.25*u_time);
+                float a = (0.1*t*t+0.05);
+                float height = (x*x - y*y)*sin( (position.x + position.y)/a ) / (x*x + y*y);
+                //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;
+
+                // Clamp and scale height 
+                float scl = 0.5*clamp( height, min_height, max_height ) + 0.5;
+                // Linearly interpolate between min and max color
+                v_color = scl*min_color + (1.0 - scl)*max_color;
+
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 v_color;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(v_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/simplex.html b/part1/simplex.html
@@ -0,0 +1,100 @@
+<html>
+
+<head>
+<title>Simplex</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 v_color;
+
+    vec3 min_color = vec3(1.0, 0.2, 0.0);
+    vec3 max_color = vec3(0.0, 0.8, 1.0);
+    float max_height = 2.0;
+    float min_height = -2.0;
+    float scl;
+
+    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, position);
+      float s_contrib = simplexNoise(simplexVec);
+      float t_contrib = simplexNoise(vec2(s_contrib,u_time));
+      //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;
+
+      // Clamp and scale height 
+      float scl = 0.5*clamp( height, min_height, max_height ) + 0.5;
+      // Linearly interpolate between min and max color
+      v_color = scl*min_color + (1.0 - scl)*max_color;
+
+      gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 v_color;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(v_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.html b/part1/vert_wave.html
@@ -12,22 +12,39 @@
 
 <script id="vs" type="x-shader/x-vertex">
     attribute vec2 position;
-    
+
     uniform mat4 u_modelViewPerspective;
+    uniform float u_time;    
+    varying vec3 v_color;
+
+    vec3 min_color = vec3(1.0, 0.2, 0.0);
+    vec3 max_color = vec3(0.0, 0.8, 1.0);
+    float max_height = 2.0;
+    float min_height = -2.0;
+    float scl;
 
     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;
+
+                // Clamp and scale height 
+                float scl = 0.5*clamp( height, min_height, max_height ) + 0.5;
+                // Linearly interpolate between min and max color
+                v_color = scl*min_color + (1.0 - scl)*max_color;
+
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
+    varying vec3 v_color;
 
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(v_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 = 200;
+    var NUM_HEIGHT_PTS = 200;
 
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
@@ -31,6 +31,9 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_timeLocation;
+    //var u_color = vec3(0.0, 0.0, 0.0);
+    var u_time = 0.0;
 
     (function initializeShader() {
         var program;
@@ -40,6 +43,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_color = context.getUniformLocation(program, "u_color");
 
         context.useProgram(program);
     })();
@@ -138,11 +143,14 @@
         var mvp = mat4.create();
         mat4.multiply(persp, mv, mvp);
 
+        u_time += 0.01;
+
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
-
+          
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f( u_timeLocation, u_time );
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);