Merge pull request #38 from flush11/master

added 2 example for Shaping functions

examples/05/draw-multi-shaping-func.frag

@@ -0,0 +1,34 @@
+// Yosuke SAKAI(@flush_11, http://yosuke-sakai.com/)
+// Drawing multiple shaping functions on gradient background
+// A sample for the book of the shaders.
+// http://thebookofshaders.com/05/
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+// Plot a line on Y using a value between 0.0-1.0
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
+}
+
+void main() {
+	vec2 st = gl_FragCoord.xy / u_resolution;
+    
+    //backgoud gradient
+    vec3 bkcolor = vec3(st.x);
+    
+    // Plot a lines
+    float pct1 = plot(st, st.x);
+    float pct2 = plot(st,pow(st.x, 0.5));
+    float pct3 = plot(st, pow(st.x, 2.0));
+    
+    vec3 color = (1.0 - pct1) * (1.0 - pct2) * (1.0 - pct3) * bkcolor + pct1 * vec3(1.0, 0.0, 0.0) + pct2 * vec3(0.0, 1.0, 0.0) + pct3 * vec3(0.0, 1.0, 1.0);
+    
+	gl_FragColor = vec4(color, 1.0);
+}

examples/05/stepwise.frag

@@ -0,0 +1,33 @@
+// Yosuke SAKAI(@flush_11, http://yosuke-sakai.com/)
+// Stepwise shaping function
+// A sample for the book of the shaders.
+// http://thebookofshaders.com/05/
+
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+// Plot a line on Y using a value between 0.0-1.0
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
+}
+
+void main() {
+	vec2 st = gl_FragCoord.xy/u_resolution;
+
+    float y = floor(10.0 * st.x) * 0.1;
+
+    vec3 color = vec3(y);
+    
+    // Plot a line
+    float pct = plot(st, y);
+    color = (1.0 - pct) * color + pct * vec3(0.0, 1.0, 0.0);
+    
+	gl_FragColor = vec4(color,1.0);
+}

examples/README.md

@@ -26,6 +26,8 @@ The following is a list of examples present in this book.
         - [Iñigo Quiles's Parabola](../edit.html#05/parabola.frag)
         - [Iñigo Quiles's Power Curve](../edit.html#05/pcurve.frag)
         - [Easing functions](../edit.html#05/easing.frag)
+        - [Stepwise function](../edit.html#examples/05/stepwise.frag)
+        - [Drawing multiple shaping functions](../edit.html#examples/05/draw-multi-shaping-func.frag)
 
     * [Color](../06/)
         - [Mix](../edit.html#06/mix.frag)