added 2 example for Shaping functions

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);
+}

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#05/stepwise.frag)
+        - [Drawing multiple shaping functions](../edit.html#05/draw-multi-shaping-func.frag)
 
     * [Color](../06/)
         - [Mix](../edit.html#06/mix.frag)
@@ -106,4 +108,4 @@ The following is a list of examples present in this book.
 	- [Villareal instalation 2](../edit.html#examples/06/mahau289-villareal2.frag) by Udit Mahajan
 	- [Sunrise/Sunset](../edit.html#examples/06/randj063-sunset.frag) by Jaskirat Randhawa
 	- [Villareal instalation](../edit.html#examples/06/tothn598-villareal.frag) by Nitcha Tothong
-	- [Villareal instalation](../edit.html#examples/06/wangl073-villareal.frag) by Luobin Wang 
+	- [Villareal instalation](../edit.html#examples/06/wangl073-villareal.frag) by Luobin Wang