diff --git a/index.html b/index.html
index 40c34c2..8f14549 100644
--- a/index.html
+++ b/index.html
@@ -1,66 +1,104 @@
 <!DOCTYPE html>
 <html>
-    <header>
-        <title>Web Ocean</title>
-        <script id="shader-fs" type="x-shader/x-fragment"> 
+<header>
+    <title>Web Ocean</title>
+    <script id="shader-fs" type="x-shader/x-fragment">
             precision mediump float;
 
-            
-// Noise
-// Source: https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb
-// Description: https://flafla2.github.io/2014/08/09/perlinnoise.html
-//              https://mzucker.github.io/html/perlin-noise-math-faq.
-//              https://thebookofshaders.com/11/
-//ordered by importance
-vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
-vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
-vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
-float noise(vec3 P) {
-    vec3 i0 = mod289(floor(P)), i1 = mod289(i0 + vec3(1.0));
-    vec3 f0 = fract(P), f1 = f0 - vec3(1.0), f = fade(f0);
-    vec4 ix = vec4(i0.x, i1.x, i0.x, i1.x), iy = vec4(i0.yy, i1.yy);
-    vec4 iz0 = i0.zzzz, iz1 = i1.zzzz;
-    vec4 ixy = permute(permute(ix) + iy), ixy0 = permute(ixy + iz0), ixy1 = permute(ixy + iz1);
-    vec4 gx0 = ixy0 * (1.0 / 7.0), gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
-    vec4 gx1 = ixy1 * (1.0 / 7.0), gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
-    gx0 = fract(gx0); gx1 = fract(gx1);
-    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0), sz0 = step(gz0, vec4(0.0));
-    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1), sz1 = step(gz1, vec4(0.0));
-    gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-    gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-    vec3 g0 = vec3(gx0.x,gy0.x,gz0.x), g1 = vec3(gx0.y,gy0.y,gz0.y),
-        g2 = vec3(gx0.z,gy0.z,gz0.z), g3 = vec3(gx0.w,gy0.w,gz0.w),
-        g4 = vec3(gx1.x,gy1.x,gz1.x), g5 = vec3(gx1.y,gy1.y,gz1.y),
-        g6 = vec3(gx1.z,gy1.z,gz1.z), g7 = vec3(gx1.w,gy1.w,gz1.w);
-    vec4 norm0 = taylorInvSqrt(vec4(dot(g0,g0), dot(g2,g2), dot(g1,g1), dot(g3,g3)));
-    vec4 norm1 = taylorInvSqrt(vec4(dot(g4,g4), dot(g6,g6), dot(g5,g5), dot(g7,g7)));
-    g0 *= norm0.x; g2 *= norm0.y; g1 *= norm0.z; g3 *= norm0.w;
-    g4 *= norm1.x; g6 *= norm1.y; g5 *= norm1.z; g7 *= norm1.w;
-    vec4 nz = mix(vec4(dot(g0, vec3(f0.x, f0.y, f0.z)), dot(g1, vec3(f1.x, f0.y, f0.z)),
-        dot(g2, vec3(f0.x, f1.y, f0.z)), dot(g3, vec3(f1.x, f1.y, f0.z))),
-        vec4(dot(g4, vec3(f0.x, f0.y, f1.z)), dot(g5, vec3(f1.x, f0.y, f1.z)),
-            dot(g6, vec3(f0.x, f1.y, f1.z)), dot(g7, vec3(f1.x, f1.y, f1.z))), f.z);
-    return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x);
-}
+            uniform float uTime;
+
+            // Noise
+            // Source: https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb     function
+            // Description: https://flafla2.github.io/2014/08/09/perlinnoise.html   with octaves
+            //              https://mzucker.github.io/html/perlin-noise-math-faq    mathematics
+            //              http://www.huttar.net/lars-kathy/graphics/perlin-noise/perlin-noise.html    deeper look
+            //              https://thebookofshaders.com/11/
+            //ordered by importance
+            vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+            vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+            vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+            vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+            vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
+            float noise(vec3 P) {
+                vec3 i0 = mod289(floor(P)), i1 = mod289(i0 + vec3(1.0));
+                vec3 f0 = fract(P), f1 = f0 - vec3(1.0), f = fade(f0);
+                vec4 ix = vec4(i0.x, i1.x, i0.x, i1.x), iy = vec4(i0.yy, i1.yy);
+                vec4 iz0 = i0.zzzz, iz1 = i1.zzzz;
+                vec4 ixy = permute(permute(ix) + iy), ixy0 = permute(ixy + iz0), ixy1 = permute(ixy + iz1);
+                vec4 gx0 = ixy0 * (1.0 / 7.0), gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+                vec4 gx1 = ixy1 * (1.0 / 7.0), gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+                gx0 = fract(gx0); gx1 = fract(gx1);
+                vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0), sz0 = step(gz0, vec4(0.0));
+                vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1), sz1 = step(gz1, vec4(0.0));
+                gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+                gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+                vec3 g0 = vec3(gx0.x,gy0.x,gz0.x), g1 = vec3(gx0.y,gy0.y,gz0.y),
+                    g2 = vec3(gx0.z,gy0.z,gz0.z), g3 = vec3(gx0.w,gy0.w,gz0.w),
+                    g4 = vec3(gx1.x,gy1.x,gz1.x), g5 = vec3(gx1.y,gy1.y,gz1.y),
+                    g6 = vec3(gx1.z,gy1.z,gz1.z), g7 = vec3(gx1.w,gy1.w,gz1.w);
+                vec4 norm0 = taylorInvSqrt(vec4(dot(g0,g0), dot(g2,g2), dot(g1,g1), dot(g3,g3)));
+                vec4 norm1 = taylorInvSqrt(vec4(dot(g4,g4), dot(g6,g6), dot(g5,g5), dot(g7,g7)));
+                g0 *= norm0.x; g2 *= norm0.y; g1 *= norm0.z; g3 *= norm0.w;
+                g4 *= norm1.x; g6 *= norm1.y; g5 *= norm1.z; g7 *= norm1.w;
+                vec4 nz = mix(vec4(dot(g0, vec3(f0.x, f0.y, f0.z)), dot(g1, vec3(f1.x, f0.y, f0.z)),
+                    dot(g2, vec3(f0.x, f1.y, f0.z)), dot(g3, vec3(f1.x, f1.y, f0.z))),
+                    vec4(dot(g4, vec3(f0.x, f0.y, f1.z)), dot(g5, vec3(f1.x, f0.y, f1.z)),
+                        dot(g6, vec3(f0.x, f1.y, f1.z)), dot(g7, vec3(f1.x, f1.y, f1.z))), f.z);
+                return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x);
+            }
+
+            float octavedPerlinNoise(vec3 P,int octaves,float persistence) {
+                float total = 0.0;
+                float frequency = 128.0;
+                float amplitude = 4.0;
+                float maxValue = 0.0;
+                for(int i = 0; i < 8; i++) {
+                   total += noise((P*frequency)) * amplitude;
+
+                   maxValue += amplitude;
+                   amplitude *= persistence;
+                   frequency /= 2.;
+                }
+                return total/maxValue;
+            } 
+
+            float turbulence(vec3 P) {
+                float f = 0., s = 1.;
+                for (int i = 0 ; i < 9 ; i++) {
+                    f += abs(noise(s * P)) / s;
+                    s *= 2.;
+                    P = vec3(.866 * P.x + .5 * P.z, P.y + 100., -.5 * P.x + .866 * P.z);
+                }
+                return f;
+            }
+
+            vec3 clouds(float x, float y) {
+                float L = turbulence(vec3(x, y, 1. * .1));
+                return vec3(noise(vec3(.5, .5, L) * .7));
+            }
         
             void main(void) {
-                float n = noise(vec3(gl_FragCoord.xy*0.2,0.0));
-                gl_FragColor = vec4(n,n,n,1.0);
+                float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.1,uTime*0.05),8,2.0); //Should be scaled along arbitary axis
+                //float n = noise(vec3(gl_FragCoord.xy*0.01,uTime));
+                //vec3 cloudEffect = clouds(gl_FragCoord.x*0.005, gl_FragCoord.y*0.005);
+                vec3 color = n + (vec3(1., 1., 1.)/2.);
+                gl_FragColor = vec4(color,1.0);
             }
-        </script> 
-         
-        <script id="shader-vs" type="x-shader/x-vertex"> 
+        </script>
+
+    <script id="shader-vs" type="x-shader/x-vertex">
             attribute vec3 positionAttr;
          
             void main(void) {
                 gl_Position = vec4(positionAttr, 1.0);
             }
-        </script> 
-    </header>
-    <body>
-        <canvas id="window" width="800" height="600" style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas>
-        <script src="build/app.js"></script>
-    </body>
+        </script>
+</header>
+
+<body>
+    <canvas id="window" width="800" height="600"
+        style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas>
+    <script src="build/app.js"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index eb99f7a..1c16b10 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,6 @@ var gl: WebGLRenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 
-main();
-
 function initGL(canvas: HTMLCanvasElement) {
     var gltemp;
     try {
@@ -27,9 +25,9 @@ function initGL(canvas: HTMLCanvasElement) {
 
 function initGeometry() {
     let VBO = gl.createBuffer();
-    let vertexData = [-0.5, -0.5, 0.0,
-        0.5, -0.5, 0.0,
-        0.0, 0.5, 0.0];
+    let vertexData = [-1.0, -1.0, 0.0,
+        1.0, -1.0, 0.0,
+        0.0, 1.0, 0.0];
 
     gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
@@ -99,20 +97,24 @@ function initShaders() {
     return program;
 }
 
+var timeSpent = 0.0;
 function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
+    timeSpent += 1.0 / 60.0;
     gl.viewport(0, 0, viewportWidth, viewportHeight);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 
     // There are 7 floating-point values per vertex
-    var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
+    let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
 
     // Set up position stream
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
     gl.enableVertexAttribArray(0);
 
     gl.useProgram(program);
+    let uTime = gl.getUniformLocation(program, "uTime");
+    gl.uniform1f(uTime, timeSpent);
     gl.drawArrays(gl.TRIANGLES, 0, 3);
 }
 
@@ -130,10 +132,12 @@ function main() {
     gl.clear(gl.COLOR_BUFFER_BIT);
 
     if (triangleVBO != null && shaderProgram != null) {
-        drawScene(triangleVBO, shaderProgram);
+        window.setInterval(drawScene, 1000 / 60, triangleVBO, shaderProgram);
     }
 
-    if(gl.getError() != gl.NO_ERROR) {
+    if (gl.getError() != gl.NO_ERROR) {
         console.log("OpenGL Error!: ");
     }
 }
+
+main();
\ No newline at end of file
