From 5fa092f649f7b0999ae11ca623ece0f2d50f79d0 Mon Sep 17 00:00:00 2001 From: Patricio Gonzalez Vivo Date: Thu, 2 Apr 2015 17:27:45 -0400 Subject: [PATCH] shapes --- 07/README.md | 19 +++++++++---------- 07/rect-df.frag | 39 +++++++++++++++++++++++++++++++++++++++ 07/shapes.frag | 38 ++++++++++++++++++++++++++++++++++++++ examples/README.md | 8 ++++---- 4 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 07/rect-df.frag create mode 100644 07/shapes.frag diff --git a/07/README.md b/07/README.md index 073a4d7..c8c9aa2 100644 --- a/07/README.md +++ b/07/README.md @@ -145,16 +145,6 @@ In terms of computational power ```sqrt()``` function (and all the once that dep
-### More about shapes and distance fields - -Distance fields can be use to draw almost everything. Obviously the complex the shape is, the more complicated the equation will be, but it pays off; a convenient feature of this technique is the ability to smooth edges. Because the “topological” nature of them, sharp edges get blended together producing softer edges the more away you are from the center you sample. This is particularly useful on fonts rendering. - -Take a look to the following code and note how the space is mapped. Like concentric rings on a Zen garde the distance field values on edges get smooth and rounder the further away they get from the center. - -
- -If you play with the code you will discover that inside the triangle there is a negative area. Which in position makes shapes extremely sharp to the extreme. Because the values are under zero we can not see the difference but by changing ```fract()``` by ```sin()``` in line 43 you can see the triangle go shrink until disappear. This signed properties particular of **Signed Distance Fields**. - ### Polar shapes ![Robert Mangold - Untitled (2008)](mangold.jpg) @@ -185,6 +175,15 @@ Try to: * Combine different shaping functions to *cut holes* on the shape to make better flowers, snowflakes and gears. * Use the ```plot()``` function we were using on the *Shaping Functions Chapter* to draw just the contour. +### Combining powers + +As we saw at the beginning polar coordinates are very useful and particularly easy to map into distance field. As we saw +in the circle example you just need to compute the radius using a `length()` function. Also we already learn how to modulate that radius according to the angle using the `atan()` function. + +We can combine both to construct shapes according to how many sides it have. Check the following code from [Andrew Baldwin](https://twitter.com/baldand) [one of his blog post](http://thndl.com/square-shaped-shaders.html) + +
+ Congratulations! You have made it through the rough part! Take a break and let this concepts sediment, drawing simple shapes on Processing is really easy but not here. In shader-land everything the way to thing on shapes is twisted and can be exhausting to adapt to this new paradigm of coding. Now that you know how to draw shapes I'm sure new ideas will pop to your mind. In the following chapter we will learn more about how to move, rotate and scale them moving. This will allow you to compose them! diff --git a/07/rect-df.frag b/07/rect-df.frag new file mode 100644 index 0000000..49754af --- /dev/null +++ b/07/rect-df.frag @@ -0,0 +1,39 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Reference +// http://thndl.com/category/shaders.html + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + st.x *= u_resolution.x/u_resolution.y; + vec3 color = vec3(0.0); + float d = 0.0; + + // Remap the space to -1. to 1. + st = st *2.-1.; + + // Rectangular + vec2 r = abs(st); + color = vec3(r,0.); + + // d = max(r.x,r.y); + // color = vec3(d); + // color = vec3( step(.4,d) ); + // color = vec3( step(.4,d) * step(d,.5) ); + // color = vec3(smoothstep(.3,.4,d)* smoothstep(.6,.5,d)); + + // Rectangular round corners + // d = length( max( abs(st)-.3, 0.) ); + // color = vec3(d); + // color = vec3( step(.4,d) ); + // color = vec3( step(.4,d) * step(d,.5) ); + // color = vec3(smoothstep(.3,.4,d)* smoothstep(.6,.5,d)); + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file diff --git a/07/shapes.frag b/07/shapes.frag new file mode 100644 index 0000000..700ac9d --- /dev/null +++ b/07/shapes.frag @@ -0,0 +1,38 @@ +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Reference to +// http://thndl.com/square-shaped-shaders.html + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + st.x *= u_resolution.x/u_resolution.y; + vec3 color = vec3(0.0); + float d = 0.0; + + // Remap the space to -1. to 1. + st = st *2.-1.; + + // Number of sides of your shape + int N = 3; + + // Angle and radius from the current pixel + float a = atan(st.x,st.y)+PI; + float r = TWO_PI/float(N); + + // Shaping function that modulate the distance + d = cos(floor(.5+a/r)*r-a)*length(st); + + color = vec3(1.0-smoothstep(.4,.41,d)); + // color = vec3(d); + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file diff --git a/examples/README.md b/examples/README.md index 4589145..2b0be33 100644 --- a/examples/README.md +++ b/examples/README.md @@ -30,14 +30,14 @@ The following is a list of examples present in this book. - [HSB - Color Wheel](../edit.html#06/hsb-colorwheel.frag) * [Shapes](../07/) - - Rectangle: [making](../edit.html#07/rect-making.frag) and [function](../edit.html#07/rect.frag) + - Rectangle: [making](../edit.html#07/rect-making.frag), [function](../edit.html#07/rect.frag) and [distance-field](../edit.html#07/rect-df.frag) - Circle: [making](../edit.html#07/circle-making.frag) and [function](../edit.html#07/circle.frag) - - Triangle: [making](../edit.html#07/triangle-making.frag) and [function](../edit.html#07/triangle.frag) + - [Batman distance field](../edit.html#07/batman.frag) - [Line](../edit.html#07/line.frag) - [Cross](../edit.html#07/cross.frag) - [Polar](../edit.html#07/polar.frag) - - [Batman distance field](../edit.html#07/batman.frag) - + - [Other Shapes](../edit.html#07/shapes.frag) + ### Advance * [Moon](../edit.html#examples/moon.frag&examples/images/moon-texture.jpg)