watereffect.html

<!doctype html>
<html>
    
    <head>
	
		
        <meta charset="utf-8">
        <title>
            IFC : Demo Polygon Morph
        </title>
        <style>
            html, body, #map-div { margin: 0; padding: 0; height: 100%; }
        </style>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>	
		
		 <script src="CanvasLayer.js"></script>
        
        <script type="text/javascript" src="webgl-utils.js"></script>
        <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
        <script type="text/javascript" src="polyk.js"></script>
        <script type="text/javascript" src="morphing.js"></script>
		<script type="text/javascript" src="drawingToolbar.js"></script>
		<script type="text/javascript" src="data.js"></script>
		<script type="text/javascript" src="utils.js"></script>		
		<script type="text/javascript" src="main.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script>
	
    $('html').hide();

    $(document).ready(function() {
        $('html').show();
    });
</script>
		
		 <script id="pointVertexShader" type="x-shader/x-vertex">
    attribute vec4 worldCoord;
    attribute vec2 a_texCoord;
	uniform mat4 mapMatrix;	
	varying vec2 vtexCoord;    
    varying vec3 vPosition;
    
    void main() {
      
      // transform world coordinate by matrix uniform variable
      gl_Position = mapMatrix * worldCoord;
      vPosition = worldCoord.xyz / worldCoord.w;
      
      //console.log(gl_Position);
      
      // a constant size for points, regardless of zoom level
      gl_PointSize = 2.;
	  
	  vtexCoord = a_texCoord;
      //vTex = tex.xyz/tex.w;
    }
  </script>
 
<script id="pointFragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
 uniform sampler2D uimage;
 varying vec2 vtexCoord;
 varying vec3 vPosition;
 uniform float time;
 uniform float frequency;
 uniform float width;
 uniform float Parameter1;
 uniform float zoom;
 uniform float speed;
  uniform float parameter2;
 
uniform vec2 resolution;
 vec2 resolution1=vec2(128.0,128.0);

 void main() 
 { 
 
  if(vPosition.z==0.0){
  
 vec2 cPos = 0.0 + 2.0 * gl_FragCoord.xy / resolution1.xy;
 float width1=width;
 float p=parameter2;
float cLength = length(cPos*frequency)/width1;
//cLength=150.0;

vec2 uv = gl_FragCoord.xy/resolution1.xy+(cPos/cLength)*cos(cLength*Parameter1-time*22.0)*0.01;
vec3 col = texture2D(uimage,uv).xyz;

gl_FragColor = vec4(col,0.8);
}

 }
 
 
 
</script>
 </head>
<body>
  <table width="100%" height="100%" border=1;>
    <tr style="vertical-align:top">
      <td style="width:15em">
        <table>
          <tr>
            <h2>
              Flood Inundation Simulator on Google Maps using WebGL
            </h2>
            <input id="LoadMap" type="button" value="Click to  Load map" onclick="init();"
            />
          </tr>
          <tr>
            <div id="panel">
              <input id="StartMorphing" type="button" value="Start morphing" onclick="start_moprhing();"
              />
              <br/>
              <br/>
              <input id="PlayMorphing" type="button" value="Play/Pause Morphing" onclick="play_pause_moprhing();"
              />
              <div>
                <button id="delete-button"> Delete Selected Shape</button>
              </div>
            </div>
            <div id="color-palette" width="100%">
            </div>
			<div id="instructions"><br/><br/>
			1. Click on load map to load map with polygon<br/>
			2. Use the drawing toolbar to draw objects (dam, levee etc.)<br/>
			3. Then press start morphing<br/>
			4. To delete a shape select it with hand tool and then press delete selected shape<br/> 
			
			</div>
			<div name="control">
			Wave frequency: <input type="range" name="frequency" id="frequency" min="1" max="10" step="0.1" value="1.6"  onchange="updateFrequencyInput(this.value);">
			<div id="waveFrequency">Frquency = 1.6</div>
			
			
			Wave width: <input type="range" name="width" id="width" min="1" max="10" step="0.1" value="3.9" onchange="updateWidthInput(this.value);">
			<div id="waveWidth">Width = 3.9</div>
			
			Parameter1 : <input type="range" name="width" id="width" min="1" max="30" step="0.5" value="10.0" onchange="updateParameter1Input(this.value);">	
				<div id="Parameter1">a = 10.0</div>
<!--
			Parameter2 : <input type="range" name="width" id="width" min="0" max="2" step="0.01" value="0.03" onchange="updateParameter2Input(this.value);">
			<div id="Parameter2">b = 0.03</div>
-->	
			Speed : <input type="range" name="width" id="width" min="1" max="40" step="1.0" value="22.0" onchange="updateSpeedInput(this.value);">	
			<div id="Speed">Speed = 22.0</div>
		
			</div>
			
          </tr>
        </table>
        <table id="featuretable">
          <tbody id="featuretbody">
          </tbody>
        </table>
      </td>
      <td>
        <!-- The frame used to measure the screen size -->
        <!-- <div id="frame"></div>  -->
        <div id="map-div" style="width: 100%; height: 100%;">
        </div>
      </td>
    </tr>
  </table>
  
  </html>    
    