From 640e570fb6d8f6bfaa272020dbf772a07edd180a Mon Sep 17 00:00:00 2001 From: Yosuke Sakai Date: Wed, 20 Jan 2016 17:12:15 +0900 Subject: [PATCH 1/2] added 2 example for Shaping functions --- 05/draw-multi-shaping-func.frag | 34 +++++++++++++++++++++++++++++++++ 05/stepwise.frag | 33 ++++++++++++++++++++++++++++++++ examples/README.md | 4 +++- 3 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 05/draw-multi-shaping-func.frag create mode 100644 05/stepwise.frag diff --git a/05/draw-multi-shaping-func.frag b/05/draw-multi-shaping-func.frag new file mode 100644 index 0000000..4b36bab --- /dev/null +++ b/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); +} diff --git a/05/stepwise.frag b/05/stepwise.frag new file mode 100644 index 0000000..132de68 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/examples/README.md b/examples/README.md index a89d686..882fe3c 100644 --- a/examples/README.md +++ b/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 \ No newline at end of file + - [Villareal instalation](../edit.html#examples/06/wangl073-villareal.frag) by Luobin Wang From 76019342a1f07f1aa4e7f04a1adc52495647458b Mon Sep 17 00:00:00 2001 From: Yosuke Sakai Date: Thu, 21 Jan 2016 00:08:13 +0900 Subject: [PATCH 2/2] moved the 2 examples from /05 directory to /examples/05 directory --- {05 => examples/05}/draw-multi-shaping-func.frag | 8 ++++---- {05 => examples/05}/stepwise.frag | 0 examples/README.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename {05 => examples/05}/draw-multi-shaping-func.frag (71%) rename {05 => examples/05}/stepwise.frag (100%) diff --git a/05/draw-multi-shaping-func.frag b/examples/05/draw-multi-shaping-func.frag similarity index 71% rename from 05/draw-multi-shaping-func.frag rename to examples/05/draw-multi-shaping-func.frag index 4b36bab..dea95e5 100644 --- a/05/draw-multi-shaping-func.frag +++ b/examples/05/draw-multi-shaping-func.frag @@ -18,17 +18,17 @@ float plot(vec2 st, float pct){ } void main() { - vec2 st = gl_FragCoord.xy/u_resolution; + vec2 st = gl_FragCoord.xy / u_resolution; //backgoud gradient vec3 bkcolor = vec3(st.x); // Plot a lines - float pct1 = plot(st,st.x); + 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); + 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); + gl_FragColor = vec4(color, 1.0); } diff --git a/05/stepwise.frag b/examples/05/stepwise.frag similarity index 100% rename from 05/stepwise.frag rename to examples/05/stepwise.frag diff --git a/examples/README.md b/examples/README.md index 882fe3c..e935cb8 100644 --- a/examples/README.md +++ b/examples/README.md @@ -26,8 +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) + - [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)