diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..5172429
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 08c69b7..9cd9277 100644
--- a/README.md
+++ b/README.md
@@ -1,123 +1,42 @@
-
 # Project 5: Shaders
 
-## Project Instructions
-
-Implement at least 75 points worth of shaders from the following list. We reserve the right to grant only partial credit for shaders that do not meet our standards, as well as extra credit for shaders that we find to be particularly impressive.
-
-Some of these shading effects were covered in lecture -- some were not. If you wish to implement the more complex effects, you will have to perform some extra research. Of course, we encourage such academic curiosity which is why we’ve included these advanced shaders in the first place!
-
-Document each shader you implement in your README with at least a sentence or two of explanation. Well-commented code will earn you many brownie (and probably sanity) points.
-
-If you use shadertoy or any materials as reference, please properly credit your sources in the README and on top of the shader file. Failing to do so will result in plagiarism and will significantly reduce your points.
-
-Examples: [https://cis700-procedural-graphics.github.io/Project5-Shaders/](https://cis700-procedural-graphics.github.io/Project5-Shaders/)
-
-### 15 points each: Instagram-like filters
-
-- Tone mapping:
-    - Linear (+5 points)
-    - Reinhard (+5 points)
-    - Filmic (+5 points)
-- Gaussian blur (no double counting with Bloom)
-- Iridescence
-- Pointilism
-- Vignette
-- Fish-eye bulge
-
-### 25 points each: 
-- Bloom
-- Noise Warp
-- Hatching
-- Lit Sphere ([paper](http://www.ppsloan.org/publications/LitSphere.pdf))
-
-### 37.5 points each:
-- K-means color compression (unless you are extremely clever, the k-means clusterer has to be CPU side)
-- Dithering
-- Edge detection with Sobel filtering
-- Uncharted 2 customizable filmic curve, following John Hable’s presetantion. 
-    - Without Linear, Reinhard, filmic (+10 points)
-    - With all of linear, Reinhard, filmic (+10 points)
-    - Customizable via GUI (+17.5 points)
-    - Controlling Exposure (4 points)
-    - Side by side comparison between linear, Reinhard, filmic, and Uncharted2 (13.5 points). 
-
-### 5 points - Interactivity
-Implement a dropdown GUI to select different shader effects from your list.
-
-### ??? points
-Propose your own shading effects!
-
-### For the overachievers:
-Weave all your shading effects into one aesthetically-coherent scene, perhaps by incorporating some of your previous assignments!
-
-
-## Getting Started
-
-### main.js
-
-`main.js` is responsible for setting up the scene with the Mario mesh, initializing GUI and camera, etc.
-
-### Adding Shaders
-
-To add a shader, you'll want to add a file to the `src/shaders` or `src/post` folder. As examples, we've provided two shaders `lambert.js` and `grayscale.js`. Here, I will give a brief overview of how these work and how everything hooks together.
-
-**shaders/lambert.js**
-
-IMPORTANT: I make my lambert shader available by exporting it in `shaders/index.js`. 
-
-```javascript
-export {default as Lambert} from './Lambert'
-```
-
-Each shader should export a function that takes in the `renderer`, `scene`, and `camera`. That function should return a `Shader` Object.
+[Demo](http://josephgao.me/Project5-Shaders)
 
-`Shader.initGUI` is a function that will be called to initialize the GUI for that shader. in `lambert.js`, you can see that it's here that I set up all the parameters that will affect my shader.
+* Author: Joseph Gao
+* PennKey: gaoj
 
-`Shader.material` should be a `THREE.ShaderMaterial`. This should be pretty similar to what you've seen in previous projects. `Shader.material.vertexShader` and `Shader.material.fragmentShader` are the vertex and fragment shaders used.
+**Goal:** Create some cool shaders using WebGL.
 
-At the bottom, I have the following snippet of code. All it does is bind the Mario texture once it's loaded.
+* DISCLAIMER - I accidentally made Hatching a Shader rather than a Post Shader. I was too lazy to change it (also it's 6AM), but I understand that Cross Hatching is considered a Post rather than a render step.
 
-```javascript
-textureLoaded.then(function(texture) {
-    Shader.material.uniforms.texture.value = texture;
-});
-```
+## 95 points worth of shaders implemented.
 
-So when you change the Shader parameter in the GUI, `Shader.initGUI(gui)` will be called to initialize the GUI, and then the Mario mesh will have `Shader.material` applied to it.
+## Render Time Shaders
 
-**post/grayscale.js**
+### Iridescence (15 pts)
+![](./ss1.png)
+- My iridescence implementation responds to the lightColor slider as well as the ambient light slider. The shading is done at render time, not in post. The iridescence itself is a default magenta/blue color. I added in a magenta outline as well (in the same way a toon outline is added) because I thought it would look nice!
 
-GUI parameters here are initialized the same way they are for the other shaders.
 
-Post process shaders should use the THREE.js `EffectComposer`. To set up the grayscale filter, I first create a new composer: `var composer = new EffectComposer(renderer);`. Then I add a a render pass as the first pass: `composer.addPass(new EffectComposer.RenderPass(scene, camera));`. This will set up the composer to render the scene as normal into a buffer. I add my filter to operate on that buffer: `composer.addPass(GrayscaleShader);`, and mark it as the final pass that will write to the screen `GrayscaleShader.renderToScreen = true;`
+### Hatching (25 pts)
+![](./ss2.png)
+- As mentioned above, I accidentally implemented my Hatching shader as a render time shader rather than a post render shader. I understand the difference, but on the bright side, the albedo slider works nicely with my hatching shader. The ambient light and light color sliders simply re-adjust how many hatches will appear. The hatching algorithm was borrowed from a unity3D forum (I mixed in some fundamentals from our own slides and attempted to improve on the evenly distributed hatches produced by the method suggested in the class slides by incorporating ideas from the forum). The forum link can be found in the GLSL file!
 
-GrayscaleShader is a `EffectComposer.ShaderPass` which basically takes the same arguments as `THREE.ShaderMaterial`. Note, that one uniform that will have to include is `tDiffuse`. This is the texture sampler which the EffectComposer will automatically bind the previously rendered pass to. If you look at `glsl/grayscale-frag.glsl`, this is the texture we read from to get the previous pixel color: `vec4 col = texture2D(tDiffuse, f_uv);`.
+### Static (??? pts)
+![](./ss3.png)
+- This is my own proposed shader. I was attempting to perform iridescence and accidentally ran into this shader that is based largely on noise. The effect was really cool and reminded me of a antenna TV with no signal, receiving only static, hence the name. I decided this would be the shader we were to submit for the "your own shader" section. 
 
-IMPORTANT: You initially define your shader passes like so:
 
-```javascript
-var GrayscaleShader = new EffectComposer.ShaderPass({
-    uniforms: {
-        tDiffuse: {
-            type: 't',
-            value: null
-        },
-        u_amount: {
-            type: 'f',
-            value: options.amount
-        }
-    },
-    vertexShader: require('../glsl/pass-vert.glsl'),
-    fragmentShader: require('../glsl/grayscale-frag.glsl')
-});
-```
+## Post Render Shaders
 
-BUT, if you want to modify the uniforms, you need to do so like so: `GrayscaleShader.material.uniforms.u_amount.value = val;`. Note the extra `.material` property.
+### Pointilism (15 pts)
+![](./ss4.png)
+- You are able to modify the amount of points used to draw Mario, as well as the color of the points for some pretty cool effects. The login behind my code is well documented in the GLSL file, and I used a glsl random function that everyone seems to be able to find on Stack Overflow.
 
-## Deploy
+### Vignette (15 pts)
+![](./ss5.png)
+- Like my Pointilism shader, you are able to modify both the color and the intensity of the vignette filter. While brighter colors may make the circle harder to see, I promise it is there.
 
-1. Create a `gh-pages` branch on GitHub
-2. Do `npm run build`
-3. Commit and add all your changes.
-4. Do `npm run deploy`
\ No newline at end of file
+### NoiseWarp (25 pts)
+![](./ss6.png)
+- Okay, I know. It doesn't look as good as the one presented in the demo, and in fact just looks like Mario is vibrating on the X and Y axes indefinitely. The frequency slider does alter the intensity of his vibrations, though! In all seriousness, the most amount of work went into this shader. I first brought back concepts from Project 1 by calculating and interpolating a noise value for each fragment using techniques we have already studied (linear, cosine interpolation), and then I use these noise values to offset the UV coordinates in a way very similar to Mini Minecraft from my CIS 460 days.
diff --git a/index.html b/index.html
index 8bc7d8a..9197461 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Shader Demos</title>
+    <title>HW5: Shaders</title>
     <style>
       html, body {
         margin: 0;
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000..5c6665d
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/glsl/flux-frag.glsl b/src/glsl/flux-frag.glsl
new file mode 100644
index 0000000..53337af
--- /dev/null
+++ b/src/glsl/flux-frag.glsl
@@ -0,0 +1,13 @@
+
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+uniform vec3 u_color;
+varying vec2 f_uv;
+
+void main() {
+    vec4 col = texture2D(tDiffuse, f_uv);
+    col.rgb = u_color * (u_amount) + col.rgb * (1.0 - u_amount);
+    gl_FragColor = col;
+
+}
+
diff --git a/src/glsl/grayscale-frag.glsl b/src/glsl/grayscale-frag.glsl
index 223a9c5..f5fca28 100644
--- a/src/glsl/grayscale-frag.glsl
+++ b/src/glsl/grayscale-frag.glsl
@@ -12,4 +12,4 @@ void main() {
     col.rgb = vec3(gray, gray, gray) * (u_amount) + col.rgb * (1.0 - u_amount);
 
     gl_FragColor = col;
-}   
\ No newline at end of file
+}   
diff --git a/src/glsl/hatch-frag.glsl b/src/glsl/hatch-frag.glsl
new file mode 100644
index 0000000..970cbb0
--- /dev/null
+++ b/src/glsl/hatch-frag.glsl
@@ -0,0 +1,56 @@
+// source - https://forum.unity3d.com/threads/ported-cross-hatching-shader-from-webgl.136100/
+
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos; 
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 u_cameraPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+
+void main() {
+    vec4 color = vec4(u_albedo, 1.0);
+    gl_FragColor = color;
+
+    vec3 light_direction = normalize(u_lightPos - f_position);
+    float light_direction_weight = max(dot(normalize(f_normal), light_direction), 0.0);
+    vec3 light_weight = u_ambient + u_lightCol * light_direction_weight;
+
+    // check for outline
+    vec3 camera_dir = normalize(u_cameraPos - f_position);
+    if (dot(f_normal, camera_dir) < 0.2) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    }
+    else {
+        // originally i just have a simple sin function + noise, but it didn't look that great.
+        // vary the mod values from 10 to 40 for different line distances, and use the sin method shown in class.
+        if (length(light_weight) < 1.00) { 
+            if (mod(gl_FragCoord.x + gl_FragCoord.y, 40.0) == 0.0) {
+                gl_FragColor = color * (sin(gl_FragCoord.x + gl_FragCoord.y));
+            }
+        }
+
+        if (length(light_weight) < 0.75) { 
+            if (mod(gl_FragCoord.x - gl_FragCoord.y, 30.0) == 0.0) { 
+                gl_FragColor = color * (sin(gl_FragCoord.x - gl_FragCoord.y));
+            } 
+        } 
+
+        if (length(light_weight) < 0.50) {
+            if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 16.0) == 0.0) { 
+                gl_FragColor = color * (sin(gl_FragCoord.x + gl_FragCoord.y));
+            }
+        } 
+
+        if (length(light_weight) < 0.3465) { 
+            if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) { 
+                gl_FragColor = color * (sin(gl_FragCoord.x - gl_FragCoord.y));
+            } 
+        }
+        gl_FragColor = gl_FragColor * u_lightIntensity;
+    }
+}
diff --git a/src/glsl/hatch-vert.glsl b/src/glsl/hatch-vert.glsl
new file mode 100644
index 0000000..5c3446c
--- /dev/null
+++ b/src/glsl/hatch-vert.glsl
@@ -0,0 +1,12 @@
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+
+void main() {
+    f_uv = uv;
+    f_normal = normal;
+    f_position = position;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+
diff --git a/src/glsl/iridescence-frag.glsl b/src/glsl/iridescence-frag.glsl
new file mode 100644
index 0000000..27af3f4
--- /dev/null
+++ b/src/glsl/iridescence-frag.glsl
@@ -0,0 +1,43 @@
+
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 u_cameraPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+// this function is from SO
+float rand(float x){
+    return fract(sin(dot(vec3(x, x, x), vec3(12.9898, 78.233, 78.233))) * 43758.5453);
+}
+
+void main() {
+    vec4 color = vec4(u_albedo, 1.0);
+
+    if (u_useTexture == 1) {
+        color = texture2D(texture, f_uv);
+    }
+
+    vec3 camera_dir = normalize(u_cameraPos - f_position);
+    float d = clamp(dot(f_normal, camera_dir), 0.0, 1.0);
+
+    // i like using outlines
+    if (d < 0.08) {
+        gl_FragColor = vec4(0.5, 0.0, 1.0, 0.5);
+    }
+    else {
+        float r = 0.1 + 0.25 * sin(1.34 * fract(d));
+        float g = 0.4 + 0.25 * sin(3.56 * fract(d) + 0.25);
+        float b = 0.6 + 0.25 * sin(2.53 * fract(d) + 0.5);
+
+        // randomize the resulting dot product
+        color = vec4(r, g, b, 1.0);
+        gl_FragColor = vec4(d * color.rgb * u_lightCol * u_lightIntensity + u_ambient, 1.0);
+    }
+}
diff --git a/src/glsl/iridescence-vert.glsl b/src/glsl/iridescence-vert.glsl
new file mode 100644
index 0000000..5c3446c
--- /dev/null
+++ b/src/glsl/iridescence-vert.glsl
@@ -0,0 +1,12 @@
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+
+void main() {
+    f_uv = uv;
+    f_normal = normal;
+    f_position = position;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+
diff --git a/src/glsl/lambert-frag.glsl b/src/glsl/lambert-frag.glsl
index 848be5e..cafae0b 100644
--- a/src/glsl/lambert-frag.glsl
+++ b/src/glsl/lambert-frag.glsl
@@ -13,7 +13,7 @@ varying vec2 f_uv;
 
 void main() {
     vec4 color = vec4(u_albedo, 1.0);
-    
+
     if (u_useTexture == 1) {
         color = texture2D(texture, f_uv);
     }
@@ -21,4 +21,4 @@ void main() {
     float d = clamp(dot(f_normal, normalize(u_lightPos - f_position)), 0.0, 1.0);
 
     gl_FragColor = vec4(d * color.rgb * u_lightCol * u_lightIntensity + u_ambient, 1.0);
-}
\ No newline at end of file
+}
diff --git a/src/glsl/lambert-vert.glsl b/src/glsl/lambert-vert.glsl
index 86e2661..7556051 100644
--- a/src/glsl/lambert-vert.glsl
+++ b/src/glsl/lambert-vert.glsl
@@ -9,4 +9,4 @@ void main() {
     f_normal = normal;
     f_position = position;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
\ No newline at end of file
+}
diff --git a/src/glsl/noisewarp-frag.glsl b/src/glsl/noisewarp-frag.glsl
new file mode 100644
index 0000000..2f8c244
--- /dev/null
+++ b/src/glsl/noisewarp-frag.glsl
@@ -0,0 +1,65 @@
+// change the color of the points as well!
+
+uniform sampler2D tDiffuse;
+uniform float u_freq;
+uniform vec3 u_color;
+uniform float u_time;
+uniform float u_amp;
+varying vec2 f_uv;
+
+
+// our favorite SO glsl random function! 
+float rand(float x, float y, float z){
+    return fract(sin(dot(vec3(x, y, z), vec3(12.9898, 12.9898, 78.233))) * 43758.5453);
+}
+
+
+// my noise functions
+float lerp(float a, float b, float t) {
+  return a * (1.0 - t) + b * t;
+}
+
+float cosine_interpolate(float a, float b, float t) {
+  float cos_t = (1.0 - cos(t * 3.1459)) * 0.5;
+  return lerp(a, b, cos_t);
+}
+
+float interpolate_noise(float x, float y, float z) {
+  //pos
+  float pos_NE = rand(ceil(x), ceil(y), ceil(z));
+  float pos_NW = rand(floor(x), ceil(y), ceil(z));
+  float pos_SW = rand(floor(x), ceil(y), floor(z));
+  float pos_SE = rand(ceil(x), ceil(y), floor(z));
+
+  //neg
+  float neg_NE = rand(ceil(x), floor(y), ceil(z));
+  float neg_NW = rand(floor(x), floor(y), ceil(z));
+  float neg_SW = rand(floor(x), floor(y), floor(z));
+  float neg_SE = rand(ceil(x), floor(y), floor(z));
+
+  float x_t = ceil(x) - x;
+  float z_t = ceil(z) - z;
+  float y_t = ceil(y) - y;
+
+  float pos_north = cosine_interpolate(pos_NE, pos_NW, x_t);
+  float pos_south = cosine_interpolate(pos_SE, pos_SW, x_t);
+  float pos_ns = cosine_interpolate(pos_north, pos_south, z_t);
+
+  float neg_north = cosine_interpolate(neg_NE, neg_NW, x_t);
+  float neg_south = cosine_interpolate(neg_SE, neg_SW, x_t);
+  float neg_ns = cosine_interpolate(neg_north, neg_south, z_t);
+
+  float res_noise = cosine_interpolate(pos_ns, neg_ns, y_t);
+
+  // returned interpolated noise for a single point
+  return res_noise;
+}
+
+
+void main() {
+    float warp = interpolate_noise(f_uv.x, f_uv.y, u_amp * sin(u_time * 0.01));
+    vec2 new_uv = f_uv + vec2(-0.3 * sin(warp), 0.2 * sin(warp));
+    gl_FragColor = texture2D(tDiffuse, new_uv); 
+   
+}
+
diff --git a/src/glsl/pass-vert.glsl b/src/glsl/pass-vert.glsl
index 2166f7a..0cc253e 100644
--- a/src/glsl/pass-vert.glsl
+++ b/src/glsl/pass-vert.glsl
@@ -5,4 +5,4 @@ varying vec2 f_uv;
 void main() {
     f_uv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
\ No newline at end of file
+}
diff --git a/src/glsl/pointilism-frag.glsl b/src/glsl/pointilism-frag.glsl
new file mode 100644
index 0000000..2d5dbf0
--- /dev/null
+++ b/src/glsl/pointilism-frag.glsl
@@ -0,0 +1,37 @@
+// change the color of the points as well!
+
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+uniform vec3 u_color;
+varying vec2 f_uv;
+
+
+// our favorite SO glsl random function! 
+float rand(float x, float y, float z){
+    return fract(sin(dot(vec3(x, y, z), vec3(12.9898, 12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+    vec4 col = texture2D(tDiffuse, f_uv);
+
+    // since r, g, b values are between 0.0 and 1.0, we can just take the length of the components
+    // and treat that as a probability. Thus, (r, g, b) = (0, 0, 0) would mean the length
+    // of the rgb vector would be 0, and thus, any value of the scaled probability
+    // would cause this pixel to be black. 
+    float threshold = length(vec3(col));
+
+    // the probability of coloring this pixel should scale with the original darkness.
+    // we divide by threshold because the darker this pixel is, the higher our p value
+    // will be to color it dark. A higher p value is more significant as statistics teaches
+    // us, so when pval > threshold we should draw a pixel black and reject the null hypothesis.  
+    // float pval = rand(f_uv.x, f_uv.y, 1.0) * (u_amount * 2.5) / threshold;
+    float pval = rand(f_uv.x, f_uv.y, 1.0) * (u_amount * 2.5) / threshold;
+    if (pval > threshold) {
+    	gl_FragColor = vec4(u_color, 1.0);
+    }
+    else {
+    	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+
+}
+
diff --git a/src/glsl/static-frag.glsl b/src/glsl/static-frag.glsl
new file mode 100644
index 0000000..3d4621f
--- /dev/null
+++ b/src/glsl/static-frag.glsl
@@ -0,0 +1,37 @@
+// my own proposed shader: Static! Best in action when mario is moving.
+// random function pulled from stack overflow: http://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl
+
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 u_cameraPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+// this function is from SO
+float rand(float x){
+    return fract(sin(x) * 43758.5453);
+}
+
+void main() {
+    vec4 color = vec4(u_albedo, 1.0);
+
+    if (u_useTexture == 1) {
+        color = texture2D(texture, f_uv);
+    }
+
+    // start off just like the toon shader... 
+    vec3 camera_dir = normalize(u_cameraPos - f_position);
+    float d = clamp(dot(f_normal, camera_dir), 0.0, 1.0);
+
+    // randomize the resulting dot product
+    color = vec4(rand(d), rand(d), rand(d), 1.0);
+    gl_FragColor = vec4(d * color.rgb * u_lightCol * u_lightIntensity + u_ambient, 1.0);
+    
+}
diff --git a/src/glsl/static-vert.glsl b/src/glsl/static-vert.glsl
new file mode 100644
index 0000000..5c3446c
--- /dev/null
+++ b/src/glsl/static-vert.glsl
@@ -0,0 +1,12 @@
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+
+void main() {
+    f_uv = uv;
+    f_normal = normal;
+    f_position = position;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+
diff --git a/src/glsl/toon-frag.glsl b/src/glsl/toon-frag.glsl
new file mode 100644
index 0000000..66082e1
--- /dev/null
+++ b/src/glsl/toon-frag.glsl
@@ -0,0 +1,36 @@
+
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+uniform vec3 u_cameraPos;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+
+void main() {
+    vec4 color = vec4(u_albedo, 1.0);
+
+    if (u_useTexture == 1) {
+        color = texture2D(texture, f_uv);
+    }
+
+    float d = clamp(dot(f_normal, normalize(u_lightPos - f_position)), 0.0, 1.0);
+
+    vec3 camera_dir = normalize(u_cameraPos - f_position);
+    vec4 final_col;
+
+    // check for outline
+    if (dot(f_normal, camera_dir) < 0.5) {
+      final_col = vec4(0.0, 0.0, 0.0, 1.0);
+    }
+    else {
+      vec4 bucketColor = vec4(floor((d * color.rgb * u_lightCol + 0.3) * 5.0) / 5.0, 1.0);
+      final_col = bucketColor;
+    }
+    gl_FragColor = final_col;
+}
diff --git a/src/glsl/toon-vert.glsl b/src/glsl/toon-vert.glsl
new file mode 100644
index 0000000..5c3446c
--- /dev/null
+++ b/src/glsl/toon-vert.glsl
@@ -0,0 +1,12 @@
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+
+void main() {
+    f_uv = uv;
+    f_normal = normal;
+    f_position = position;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+
diff --git a/src/glsl/vignette-frag.glsl b/src/glsl/vignette-frag.glsl
new file mode 100644
index 0000000..15bec35
--- /dev/null
+++ b/src/glsl/vignette-frag.glsl
@@ -0,0 +1,19 @@
+
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+uniform vec3 u_color;
+uniform float u_width;
+uniform float u_height;
+varying vec2 f_uv;
+
+void main() {
+    vec4 col = texture2D(tDiffuse, f_uv);
+
+    // set origin
+    vec2 mid_point = vec2(0.5, 0.5);
+    float dist = length(mid_point - f_uv);
+    float vignette = clamp((2.0 - dist * dist) / (2.0 - 0.05), 0.0, 1.0);
+    gl_FragColor = vec4(col.rgb * vignette * u_amount + u_color * 0.5, 1.0);
+
+}
+
diff --git a/src/main.js b/src/main.js
index d7c08ae..eedcc48 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,7 +36,7 @@ window.addEventListener('load', function() {
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
     });
-    
+
     var mesh, shader, post;
     // this gets called when we set the shader
     function shaderSet(Shader, gui) {
@@ -78,4 +78,4 @@ window.addEventListener('load', function() {
         stats.end();
         requestAnimationFrame(tick);
     })();
-});
\ No newline at end of file
+});
diff --git a/src/post/flux.js b/src/post/flux.js
new file mode 100644
index 0000000..2e45135
--- /dev/null
+++ b/src/post/flux.js
@@ -0,0 +1,56 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 0.5,
+    color: '#ffc183'
+}
+
+var FluxShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        // this tDiffuse MUST be defined, basically going to be the texture to which it renders the frame to
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        },
+        u_color: {
+            type: 'v3',
+            value: new THREE.Color(options.color)
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/flux-frag.glsl')
+});
+
+export default function flux(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the FluxShader
+    composer.addPass(FluxShader);
+
+    // set this to true on the shader for your last pass to write to the screen
+    FluxShader.renderToScreen = true;
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                FluxShader.material.uniforms.u_amount.value = val;
+            });
+            gui.addColor(options, 'color').onChange(function(val) {
+                FluxShader.material.uniforms.u_color.value = new THREE.Color(val);
+            });
+        },
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/post/grayscale.js b/src/post/grayscale.js
index 728df40..a549af6 100644
--- a/src/post/grayscale.js
+++ b/src/post/grayscale.js
@@ -7,6 +7,7 @@ var options = {
 
 var GrayscaleShader = new EffectComposer.ShaderPass({
     uniforms: {
+        // this tDiffuse MUST be defined, basically going to be the texture to which it renders the frame to
         tDiffuse: {
             type: 't',
             value: null
@@ -21,7 +22,7 @@ var GrayscaleShader = new EffectComposer.ShaderPass({
 });
 
 export default function Grayscale(renderer, scene, camera) {
-    
+
     // this is the THREE.js object for doing post-process effects
     var composer = new EffectComposer(renderer);
 
@@ -40,9 +41,9 @@ export default function Grayscale(renderer, scene, camera) {
                 GrayscaleShader.material.uniforms.u_amount.value = val;
             });
         },
-        
+
         render: function() {;
             composer.render();
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/post/index.js b/src/post/index.js
index 9c0d763..652cf55 100644
--- a/src/post/index.js
+++ b/src/post/index.js
@@ -15,4 +15,8 @@ export function None(renderer, scene, camera) {
 }
 
 // follow this syntax to make your shaders available to the GUI
-export {default as Grayscale} from './grayscale'
\ No newline at end of file
+export {default as Grayscale} from './grayscale'
+export {default as flux} from './flux'
+export {default as Pointilism} from './pointilism'
+export {default as NoiseWarp} from './noise-warp'
+export {default as Vignette} from './vignette'
\ No newline at end of file
diff --git a/src/post/noise-warp.js b/src/post/noise-warp.js
new file mode 100644
index 0000000..43ca641
--- /dev/null
+++ b/src/post/noise-warp.js
@@ -0,0 +1,62 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    frequency: 0.5,
+    time: 0
+}
+
+var NoiseWarpShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        // this tDiffuse MUST be defined, basically going to be the texture to which it renders the frame to
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_freq: {
+            type: 'f',
+            value: options.frequency
+        },
+        u_time: {
+            type: 'f',
+            value: options.time
+        },
+        u_amp: {
+            type: 'f',
+            value: 1
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/noisewarp-frag.glsl')
+});
+
+export default function noisewarp(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the noisewarp shader
+    composer.addPass(NoiseWarpShader);
+
+    // set this to true on the shader for your last pass to write to the screen
+    NoiseWarpShader.renderToScreen = true;
+    var time = 1;
+    var amp = 1;
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'frequency', 0, 1).onChange(function(val) {
+                NoiseWarpShader.material.uniforms.u_freq.value = val;
+            });
+        },
+        render: function() {;
+            time += 1;
+            amp = Math.sin(amp) * (Math.random() * 10 + 1);
+            NoiseWarpShader.material.uniforms.u_time.value = time;
+            NoiseWarpShader.material.uniforms.u_amp.value = amp;
+            composer.render();
+        }
+    }
+}
diff --git a/src/post/pointilism.js b/src/post/pointilism.js
new file mode 100644
index 0000000..708f1a9
--- /dev/null
+++ b/src/post/pointilism.js
@@ -0,0 +1,56 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 0.5,
+    color: '#005cff'
+}
+
+var PointilismShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        // this tDiffuse MUST be defined, basically going to be the texture to which it renders the frame to
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        },
+        u_color: {
+            type: 'v3',
+            value: new THREE.Color(options.color)
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/pointilism-frag.glsl')
+});
+
+export default function pointilism(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the pointilism shader
+    composer.addPass(PointilismShader);
+
+    // set this to true on the shader for your last pass to write to the screen
+    PointilismShader.renderToScreen = true;
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                PointilismShader.material.uniforms.u_amount.value = val;
+            });
+            gui.addColor(options, 'color').onChange(function(val) {
+                PointilismShader.material.uniforms.u_color.value = new THREE.Color(val);
+            });
+        },
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/post/vignette.js b/src/post/vignette.js
new file mode 100644
index 0000000..1a47c48
--- /dev/null
+++ b/src/post/vignette.js
@@ -0,0 +1,58 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 0.5,
+    color: '#000000'
+}
+
+var VignetteShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        // this tDiffuse MUST be defined, basically going to be the texture to which it renders the frame to
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        },
+        u_color: {
+            type: 'v3',
+            value: new THREE.Color(options.color)
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/vignette-frag.glsl')
+});
+
+export default function vignette(renderer, scene, camera) {
+
+    console.log(window.width);
+    console.log(window.height);
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the VignetteShader
+    composer.addPass(VignetteShader);
+
+    // set this to true on the shader for your last pass to write to the screen
+    VignetteShader.renderToScreen = true;
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                VignetteShader.material.uniforms.u_amount.value = val;
+            });
+            gui.addColor(options, 'color').onChange(function(val) {
+                VignetteShader.material.uniforms.u_color.value = new THREE.Color(val);
+            });
+        },
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/shaders/hatch.js b/src/shaders/hatch.js
new file mode 100644
index 0000000..4fee57f
--- /dev/null
+++ b/src/shaders/hatch.js
@@ -0,0 +1,63 @@
+
+const THREE = require('three');
+import {textureLoaded} from '../mario'
+
+// options
+var options = {
+    lightColor: '#ffffff',
+    lightIntensity: 1,
+    albedo: '#dddddd',
+    ambient: '#111111',
+}
+
+export default function(renderer, scene, camera) {
+    const Shader = {
+        initGUI: function(gui) {
+            gui.addColor(options, 'lightColor').onChange(function(val) {
+                Shader.material.uniforms.u_lightCol.value = new THREE.Color(val);
+            });
+            gui.add(options, 'lightIntensity').onChange(function(val) {
+                Shader.material.uniforms.u_lightIntensity.value = val;
+            });
+            gui.addColor(options, 'albedo').onChange(function(val) {
+                Shader.material.uniforms.u_albedo.value = new THREE.Color(val);
+            });
+            gui.addColor(options, 'ambient').onChange(function(val) {
+                Shader.material.uniforms.u_ambient.value = new THREE.Color(val);
+            });
+        },
+
+        material: new THREE.ShaderMaterial({
+            uniforms: {
+                u_albedo: {
+                    type: 'v3',
+                    value: new THREE.Color(options.albedo)
+                },
+                u_ambient: {
+                    type: 'v3',
+                    value: new THREE.Color(options.ambient)
+                },
+                u_lightPos: {
+                    type: 'v3',
+                    value: new THREE.Vector3(30, 50, 40)
+                },
+                u_lightCol: {
+                    type: 'v3',
+                    value: new THREE.Color(options.lightColor)
+                },
+                u_lightIntensity: {
+                    type: 'f',
+                    value: options.lightIntensity
+                },
+                u_cameraPos: {
+                    type: 'v3',
+                    value: camera.position
+                }
+            },
+            vertexShader: require('../glsl/hatch-vert.glsl'),
+            fragmentShader: require('../glsl/hatch-frag.glsl')
+        })
+    }
+    return Shader;
+}
+
diff --git a/src/shaders/index.js b/src/shaders/index.js
index e5b85c1..d568a51 100644
--- a/src/shaders/index.js
+++ b/src/shaders/index.js
@@ -1,4 +1,8 @@
 
 // This file exports available shaders to the GUI.
 // follow this syntax to make your shaders available to the GUI
-export {default as Lambert} from './lambert'
\ No newline at end of file
+export {default as Lambert} from './lambert'
+export {default as Toon} from './toon'
+export {default as Hatch} from './hatch'
+export {default as Static} from './static'
+export {default as Iridescence} from './iridescence'
\ No newline at end of file
diff --git a/src/shaders/iridescence.js b/src/shaders/iridescence.js
new file mode 100644
index 0000000..1305592
--- /dev/null
+++ b/src/shaders/iridescence.js
@@ -0,0 +1,81 @@
+
+const THREE = require('three');
+import {textureLoaded} from '../mario'
+
+// options
+var options = {
+    lightColor: '#ffffff',
+    lightIntensity: 2,
+    albedo: '#dddddd',
+    ambient: '#111111',
+    useTexture: true
+}
+
+export default function(renderer, scene, camera) {
+    const Shader = {
+        initGUI: function(gui) {
+            gui.addColor(options, 'lightColor').onChange(function(val) {
+                Shader.material.uniforms.u_lightCol.value = new THREE.Color(val);
+            });
+            gui.add(options, 'lightIntensity').onChange(function(val) {
+                Shader.material.uniforms.u_lightIntensity.value = val;
+            });
+            gui.addColor(options, 'albedo').onChange(function(val) {
+                Shader.material.uniforms.u_albedo.value = new THREE.Color(val);
+            });
+            gui.addColor(options, 'ambient').onChange(function(val) {
+                Shader.material.uniforms.u_ambient.value = new THREE.Color(val);
+            });
+            gui.add(options, 'useTexture').onChange(function(val) {
+                Shader.material.uniforms.u_useTexture.value = val;
+            });
+        },
+
+        material: new THREE.ShaderMaterial({
+            uniforms: {
+                texture: {
+                    type: "t", 
+                    value: null
+                },
+                u_useTexture: {
+                    type: 'i',
+                    value: options.useTexture
+                },
+                u_albedo: {
+                    type: 'v3',
+                    value: new THREE.Color(options.albedo)
+                },
+                u_ambient: {
+                    type: 'v3',
+                    value: new THREE.Color(options.ambient)
+                },
+                u_lightPos: {
+                    type: 'v3',
+                    value: new THREE.Vector3(30, 50, 40)
+                },
+                u_lightCol: {
+                    type: 'v3',
+                    value: new THREE.Color(options.lightColor)
+                },
+                u_lightIntensity: {
+                    type: 'f',
+                    value: options.lightIntensity
+                },
+                u_cameraPos: {
+                    type: 'v3',
+                    value: camera.position
+                }
+            },
+            vertexShader: require('../glsl/iridescence-vert.glsl'),
+            fragmentShader: require('../glsl/iridescence-frag.glsl')
+        })
+    }
+
+    // once the Mario texture loads, bind it to the material
+    textureLoaded.then(function(texture) {
+        Shader.material.uniforms.texture.value = texture;
+    });
+
+    return Shader;
+}
+
diff --git a/src/shaders/lambert.js b/src/shaders/lambert.js
index 3e7abd1..1be5ec3 100644
--- a/src/shaders/lambert.js
+++ b/src/shaders/lambert.js
@@ -12,7 +12,7 @@ var options = {
 }
 
 export default function(renderer, scene, camera) {
-    
+
     const Shader = {
         initGUI: function(gui) {
             gui.addColor(options, 'lightColor').onChange(function(val) {
@@ -31,7 +31,7 @@ export default function(renderer, scene, camera) {
                 Shader.material.uniforms.u_useTexture.value = val;
             });
         },
-        
+
         material: new THREE.ShaderMaterial({
             uniforms: {
                 texture: {
@@ -74,4 +74,4 @@ export default function(renderer, scene, camera) {
     });
 
     return Shader;
-}
\ No newline at end of file
+}
diff --git a/src/shaders/static.js b/src/shaders/static.js
new file mode 100644
index 0000000..3d661c3
--- /dev/null
+++ b/src/shaders/static.js
@@ -0,0 +1,81 @@
+
+const THREE = require('three');
+import {textureLoaded} from '../mario'
+
+// options
+var options = {
+    lightColor: '#ffffff',
+    lightIntensity: 2,
+    albedo: '#dddddd',
+    ambient: '#111111',
+    useTexture: true
+}
+
+export default function(renderer, scene, camera) {
+    const Shader = {
+        initGUI: function(gui) {
+            gui.addColor(options, 'lightColor').onChange(function(val) {
+                Shader.material.uniforms.u_lightCol.value = new THREE.Color(val);
+            });
+            gui.add(options, 'lightIntensity').onChange(function(val) {
+                Shader.material.uniforms.u_lightIntensity.value = val;
+            });
+            gui.addColor(options, 'albedo').onChange(function(val) {
+                Shader.material.uniforms.u_albedo.value = new THREE.Color(val);
+            });
+            gui.addColor(options, 'ambient').onChange(function(val) {
+                Shader.material.uniforms.u_ambient.value = new THREE.Color(val);
+            });
+            gui.add(options, 'useTexture').onChange(function(val) {
+                Shader.material.uniforms.u_useTexture.value = val;
+            });
+        },
+
+        material: new THREE.ShaderMaterial({
+            uniforms: {
+                texture: {
+                    type: "t", 
+                    value: null
+                },
+                u_useTexture: {
+                    type: 'i',
+                    value: options.useTexture
+                },
+                u_albedo: {
+                    type: 'v3',
+                    value: new THREE.Color(options.albedo)
+                },
+                u_ambient: {
+                    type: 'v3',
+                    value: new THREE.Color(options.ambient)
+                },
+                u_lightPos: {
+                    type: 'v3',
+                    value: new THREE.Vector3(30, 50, 40)
+                },
+                u_lightCol: {
+                    type: 'v3',
+                    value: new THREE.Color(options.lightColor)
+                },
+                u_lightIntensity: {
+                    type: 'f',
+                    value: options.lightIntensity
+                },
+                u_cameraPos: {
+                    type: 'v3',
+                    value: camera.position
+                }
+            },
+            vertexShader: require('../glsl/static-vert.glsl'),
+            fragmentShader: require('../glsl/static-frag.glsl')
+        })
+    }
+
+    // once the Mario texture loads, bind it to the material
+    textureLoaded.then(function(texture) {
+        Shader.material.uniforms.texture.value = texture;
+    });
+
+    return Shader;
+}
+
diff --git a/src/shaders/toon.js b/src/shaders/toon.js
new file mode 100644
index 0000000..1a2f61f
--- /dev/null
+++ b/src/shaders/toon.js
@@ -0,0 +1,81 @@
+
+const THREE = require('three');
+import {textureLoaded} from '../mario'
+
+// options
+var options = {
+    lightColor: '#ffffff',
+    lightIntensity: 2,
+    albedo: '#dddddd',
+    ambient: '#111111',
+    useTexture: true
+}
+
+export default function(renderer, scene, camera) {
+    const Shader = {
+        initGUI: function(gui) {
+            gui.addColor(options, 'lightColor').onChange(function(val) {
+                Shader.material.uniforms.u_lightCol.value = new THREE.Color(val);
+            });
+            gui.add(options, 'lightIntensity').onChange(function(val) {
+                Shader.material.uniforms.u_lightIntensity.value = val;
+            });
+            gui.addColor(options, 'albedo').onChange(function(val) {
+                Shader.material.uniforms.u_albedo.value = new THREE.Color(val);
+            });
+            gui.addColor(options, 'ambient').onChange(function(val) {
+                Shader.material.uniforms.u_ambient.value = new THREE.Color(val);
+            });
+            gui.add(options, 'useTexture').onChange(function(val) {
+                Shader.material.uniforms.u_useTexture.value = val;
+            });
+        },
+
+        material: new THREE.ShaderMaterial({
+            uniforms: {
+                texture: {
+                    type: "t", 
+                    value: null
+                },
+                u_useTexture: {
+                    type: 'i',
+                    value: options.useTexture
+                },
+                u_albedo: {
+                    type: 'v3',
+                    value: new THREE.Color(options.albedo)
+                },
+                u_ambient: {
+                    type: 'v3',
+                    value: new THREE.Color(options.ambient)
+                },
+                u_lightPos: {
+                    type: 'v3',
+                    value: new THREE.Vector3(30, 50, 40)
+                },
+                u_lightCol: {
+                    type: 'v3',
+                    value: new THREE.Color(options.lightColor)
+                },
+                u_lightIntensity: {
+                    type: 'f',
+                    value: options.lightIntensity
+                },
+                u_cameraPos: {
+                    type: 'v3',
+                    value: camera.position
+                }
+            },
+            vertexShader: require('../glsl/toon-vert.glsl'),
+            fragmentShader: require('../glsl/toon-frag.glsl')
+        })
+    }
+
+    // once the Mario texture loads, bind it to the material
+    textureLoaded.then(function(texture) {
+        Shader.material.uniforms.texture.value = texture;
+    });
+
+    return Shader;
+}
+
diff --git a/ss1.png b/ss1.png
new file mode 100644
index 0000000..e91bbe5
Binary files /dev/null and b/ss1.png differ
diff --git a/ss2.png b/ss2.png
new file mode 100644
index 0000000..99beac4
Binary files /dev/null and b/ss2.png differ
diff --git a/ss3.png b/ss3.png
new file mode 100644
index 0000000..6cfa6be
Binary files /dev/null and b/ss3.png differ
diff --git a/ss4.png b/ss4.png
new file mode 100644
index 0000000..8466f0e
Binary files /dev/null and b/ss4.png differ
diff --git a/ss5.png b/ss5.png
new file mode 100644
index 0000000..961784f
Binary files /dev/null and b/ss5.png differ
diff --git a/ss6.png b/ss6.png
new file mode 100644
index 0000000..432de82
Binary files /dev/null and b/ss6.png differ