Submission

part1/WE-settings.xml

@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<webessentials version="1.9">
+  <settings>
+    <CoffeeScriptCompileOnBuild>false</CoffeeScriptCompileOnBuild>
+    <CoffeeScriptCompileToFolder>false</CoffeeScriptCompileToFolder>
+    <CoffeeScriptEnableIced>false</CoffeeScriptEnableIced>
+    <CoffeeScriptGenerateJsFile>true</CoffeeScriptGenerateJsFile>
+    <CoffeeScriptMinify>true</CoffeeScriptMinify>
+    <CoffeeScriptShowPreviewWindow>true</CoffeeScriptShowPreviewWindow>
+    <CoffeeScriptWrapClosure>true</CoffeeScriptWrapClosure>
+    <CssAutoCloseCurlyBraces>true</CssAutoCloseCurlyBraces>
+    <CssEnableGzipping>false</CssEnableGzipping>
+    <CssEnableMinification>true</CssEnableMinification>
+    <CssEnableSelectorHighligting>true</CssEnableSelectorHighligting>
+    <CssErrorLocation>1</CssErrorLocation>
+    <CssOnlyW3cAllowed>false</CssOnlyW3cAllowed>
+    <CssShowBrowserTooltip>true</CssShowBrowserTooltip>
+    <CssShowInitialInherit>false</CssShowInitialInherit>
+    <CssShowUnsupported>true</CssShowUnsupported>
+    <CssSyncVendorValues>true</CssSyncVendorValues>
+    <CSSValidateOverQualifiedSelector>false</CSSValidateOverQualifiedSelector>
+    <CssValidateStarSelector>false</CssValidateStarSelector>
+    <CssValidateZeroUnit>false</CssValidateZeroUnit>
+    <EnableSpeedTyping>false</EnableSpeedTyping>
+    <HtmlEnableMustache>true</HtmlEnableMustache>
+    <HtmlEnableZenCoding>true</HtmlEnableZenCoding>
+    <JavaScriptAutoCloseBraces>true</JavaScriptAutoCloseBraces>
+    <JavaScriptEnableGzipping>false</JavaScriptEnableGzipping>
+    <JavaScriptEnableMinification>true</JavaScriptEnableMinification>
+    <JavascriptEnableRegions>true</JavascriptEnableRegions>
+    <JavaScriptGenerateSourceMaps>true</JavaScriptGenerateSourceMaps>
+    <JavaScriptOutlining>true</JavaScriptOutlining>
+    <JsHint_asi>false</JsHint_asi>
+    <JsHint_bitwise>true</JsHint_bitwise>
+    <JsHint_boss>false</JsHint_boss>
+    <JsHint_browser>true</JsHint_browser>
+    <JsHint_camelcase>false</JsHint_camelcase>
+    <JsHint_couch>false</JsHint_couch>
+    <JsHint_curly>false</JsHint_curly>
+    <JsHint_debug>true</JsHint_debug>
+    <JsHint_devel>true</JsHint_devel>
+    <JsHint_dojo>false</JsHint_dojo>
+    <JsHint_eqeqeq>true</JsHint_eqeqeq>
+    <JsHint_eqnull>false</JsHint_eqnull>
+    <JsHint_es5>true</JsHint_es5>
+    <JsHint_esnext>false</JsHint_esnext>
+    <JsHint_evil>false</JsHint_evil>
+    <JsHint_expr>true</JsHint_expr>
+    <JsHint_forin>false</JsHint_forin>
+    <JsHint_funcscope>false</JsHint_funcscope>
+    <JsHint_globalstrict>false</JsHint_globalstrict>
+    <JsHint_immed>false</JsHint_immed>
+    <JsHint_indent>-1</JsHint_indent>
+    <JsHint_iterator>false</JsHint_iterator>
+    <JsHint_jquery>true</JsHint_jquery>
+    <JsHint_lastsemic>false</JsHint_lastsemic>
+    <JsHint_latedef>false</JsHint_latedef>
+    <JsHint_laxbreak>true</JsHint_laxbreak>
+    <JsHint_laxcomma>true</JsHint_laxcomma>
+    <JsHint_loopfunc>false</JsHint_loopfunc>
+    <JsHint_maxerr>50</JsHint_maxerr>
+    <JsHint_mootools>false</JsHint_mootools>
+    <JsHint_multistr>false</JsHint_multistr>
+    <JsHint_newcap>false</JsHint_newcap>
+    <JsHint_noarg>false</JsHint_noarg>
+    <JsHint_node>false</JsHint_node>
+    <JsHint_noempty>false</JsHint_noempty>
+    <JsHint_nonew>false</JsHint_nonew>
+    <JsHint_nonstandard>false</JsHint_nonstandard>
+    <JsHint_onecase>false</JsHint_onecase>
+    <JsHint_plusplus>false</JsHint_plusplus>
+    <JsHint_proto>false</JsHint_proto>
+    <JsHint_prototypejs>false</JsHint_prototypejs>
+    <JsHint_quotmark>false</JsHint_quotmark>
+    <JsHint_regexdash>true</JsHint_regexdash>
+    <JsHint_regexp>false</JsHint_regexp>
+    <JsHint_rhino>false</JsHint_rhino>
+    <JsHint_scripturl>false</JsHint_scripturl>
+    <JsHint_shadow>false</JsHint_shadow>
+    <JsHint_smarttabs>true</JsHint_smarttabs>
+    <JsHint_strict>false</JsHint_strict>
+    <JsHint_sub>false</JsHint_sub>
+    <JsHint_supernew>false</JsHint_supernew>
+    <JsHint_trailing>false</JsHint_trailing>
+    <JsHint_undef>false</JsHint_undef>
+    <JsHint_unused>false</JsHint_unused>
+    <JsHint_validthis>false</JsHint_validthis>
+    <JsHint_worker>false</JsHint_worker>
+    <JsHint_wsh>false</JsHint_wsh>
+    <JsHintEnable>true</JsHintEnable>
+    <JsHintErrorLocation>2</JsHintErrorLocation>
+    <JsHintRunOnBuild>true</JsHintRunOnBuild>
+    <KeepImportantComments>false</KeepImportantComments>
+    <LessGenerateCssFile>True</LessGenerateCssFile>
+    <LessMinify>True</LessMinify>
+    <LessShowPreviewWindow>True</LessShowPreviewWindow>
+    <ScssGenerateCssFile>True</ScssGenerateCssFile>
+    <ScssMinify>True</ScssMinify>
+    <ScssShowPreviewWindow>True</ScssShowPreviewWindow>
+    <ValidateVendorSpecifics>false</ValidateVendorSpecifics>
+  </settings>
+</webessentials>

part1/custom_wave.html

@@ -0,0 +1,49 @@
+<html>
+
+<head>
+<title>Custom 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 vec4 color;
+
+    void main(void)
+    {
+		// fun function 1
+        //float height = sin(5.0*(position.x * position.x +  position.y * position.y + u_time)) / 2.0;
+        // fun function 2
+        float height = sin(1.8 * (position.x * position.x * position.x + position.y * position.y * position.y - 3.0 * position.y) + 5.0 * u_time) / 2.0;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+		float offsetHeight = height + 1.0;
+		float alpha = offsetHeight / 2.0;
+		color = mix(vec4(1.0, 1.0, 0.2, 1.0), vec4(0.0, 0.2, 1.0, 1.0), alpha);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+	varying vec4 color;
+    void main(void)
+    {
+		gl_FragColor = color;
+    }
+</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>

part1/part1.sln

@@ -0,0 +1,41 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 2012
+Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "part1", "http://localhost:57772", "{966EC6A4-83C7-4DA0-AD4D-2794E42A56CE}"
+	ProjectSection(WebsiteProperties) = preProject
+		UseIISExpress = "true"
+		TargetFrameworkMoniker = ".NETFramework,Version%3Dv4.0"
+		Debug.AspNetCompiler.VirtualPath = "/localhost_57772"
+		Debug.AspNetCompiler.PhysicalPath = "D:\Dropbox\UPenn\CIS-565 (GPU Programming)\Assignments\Project5-WebGL\part1\"
+		Debug.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_57772\"
+		Debug.AspNetCompiler.Updateable = "true"
+		Debug.AspNetCompiler.ForceOverwrite = "true"
+		Debug.AspNetCompiler.FixedNames = "false"
+		Debug.AspNetCompiler.Debug = "True"
+		Release.AspNetCompiler.VirtualPath = "/localhost_57772"
+		Release.AspNetCompiler.PhysicalPath = "D:\Dropbox\UPenn\CIS-565 (GPU Programming)\Assignments\Project5-WebGL\part1\"
+		Release.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_57772\"
+		Release.AspNetCompiler.Updateable = "true"
+		Release.AspNetCompiler.ForceOverwrite = "true"
+		Release.AspNetCompiler.FixedNames = "false"
+		Release.AspNetCompiler.Debug = "False"
+		SlnRelativePath = "D:\Dropbox\UPenn\CIS-565 (GPU Programming)\Assignments\Project5-WebGL\part1\"
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{0DAD7304-27EA-4F17-B077-FC3E29C5660A}"
+	ProjectSection(SolutionItems) = preProject
+		WE-settings.xml = WE-settings.xml
+	EndProjectSection
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{966EC6A4-83C7-4DA0-AD4D-2794E42A56CE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{966EC6A4-83C7-4DA0-AD4D-2794E42A56CE}.Debug|Any CPU.Build.0 = Debug|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal

part1/simplex_wave.html

@@ -0,0 +1,89 @@
+<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 vec4 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, 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);
+
+		float offsetHeight = height + 1.0;
+		float alpha = offsetHeight / 2.0;
+		color = mix(vec4(1.0, 1.0, 0.2, 1.0), vec4(0.0, 0.8, 1.0, 1.0), alpha);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+	varying vec4 color;
+    void main(void)
+    {
+		gl_FragColor = color;
+    }
+</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>

part1/vert_wave.html

@@ -14,21 +14,30 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
-
+    uniform float u_time;
+
+	varying vec4 color;
+
     void main(void)
     {
-		float height = 0.0;
+		float s_contrib = sin(position.x*2.0*3.14159 + 2.0*u_time) / 1.2;
+		float t_contrib = cos(position.y*2.0*3.14159 + 2.0*u_time) / 1.2;
+		float height = s_contrib * t_contrib;
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+		float offsetHeight = height + 1.0;
+		float alpha = offsetHeight / 2.0;
+		color = mix(vec4(0.5, 1.0, 0.3, 1.0), vec4(0.5, 0.8, 1.0, 1.0), alpha);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
-
+	varying vec4 color;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
-    }    
+		gl_FragColor = color;
+    }
 </script>
 
 <script src ="gl-matrix.js" type ="text/javascript"></script>

part1/vert_wave.js

@@ -3,9 +3,10 @@
     /*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 = 80;
+    var NUM_HEIGHT_PTS = 80;
+	var delta = 0.005;
+	var time = 0.0;
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
     var context = createWebGLContext(canvas, message);
@@ -21,7 +22,6 @@
 
     var persp = mat4.create();
     mat4.perspective(45.0, 0.5, 0.1, 100.0, persp);
-
     var eye = [2.0, 1.0, 3.0];
     var center = [0.0, 0.0, 0.0];
     var up = [0.0, 0.0, 1.0];
@@ -31,6 +31,7 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+	var u_timeLocation;
 
     (function initializeShader() {
         var program;
@@ -40,7 +41,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);
     })();
 
@@ -136,12 +137,14 @@
         var mv = mat4.create();
         mat4.multiply(view, model, mv);
         var mvp = mat4.create();
+
         mat4.multiply(persp, mv, mvp);
-
+		time = time + delta;
+
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
-
+		context.uniform1f(u_timeLocation, time);
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);