shapes

07/README.md

@@ -145,16 +145,6 @@ In terms of computational power ```sqrt()``` function (and all the once that dep
 
 <div class="codeAndCanvas" data="circle.frag"></div>
 
-### 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.
-
-<div class="codeAndCanvas" data="triangle-making.frag"></div>
-
-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) 
+
+<div class="codeAndCanvas" data="shapes.frag"></div>
+
 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!

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

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

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)