Finally! We have been building skills for this moment! You have learned most of the GLSL foundations, types and functions. You have practiced your shaping equations over and over. Now is the time to put it all together. You are up for this challenge! In this chapter you'll learn how to draw simple shapes in a parallel procedural way.
Imagine we have grid paper, like the one we used in math classes, and the homework is to draw a square. The paper size is 10x10 and the square is supposed to be 8x8. What will you do?
You'd paint everything except the first and last rows and the first and last column, right? How does this relate to shaders? Each little square of our grid paper is a thread (a pixel). Each little square knows its position, like the coordinates of a chess board. In previous chapters we have mapped *x* and *y* to the *red* and *green* color channels, ____we learn that’s our field and space. A narrow two dimensional territory between 0.0 and 1.0.____ How we can use this to draw a centered square in the middle of our billboard?
* Sketch a piece of code that uses ```if``` statements over our spatial field. The principles to do this are remarkably similar to how we think of the grid paper scenario.
____the above is really confusing... what are people supposed to sketch a piece of code about???____
Well done! ____people aren't going to be able to do the above by themselves, so this "Well done!" is almost kind of rude____ This is a great step and accomplishment. And speaking about steps, how can we simplify this code that uses ```if``` statements with [```step()```](../glossary/index.html#step.md) functions? Take a look at the following code. ____you need to step people through this more, and include the 'if' statement code____
____in general more commenting of the code would be useful throughout the whole chapter____
Here we are using [```step()```](../glossary/index.html#step.md) to turn everything below 0.1 to black (```vec3(0.0)```). That makes a line on the bottom and left side of the canvas.
If we look closely, in the previous code we repeat the structure for each axis (left and bottom). We can save some lines of code by passing two values directly to [```step()```](../glossary/index.html#step.md) and treating them in the same way with the same function. Check out the following code.
____above needs some commenting to make it more clear____
But this rectangle is not centered ____??? it looks centered____; it's in the top right corner. We need to “take out” equal pieces from both extremes on bottom-left and top-right to obtain a centered square.
So, to repeat this on the top-right side, by uncommenting lines 21 and 22 we invert the ```st``` gradient and repeat the same [```step()```](../glossary/index.html#step.md) function. That way the ```vec2(0.0,0.0)``` will be in the top right corner. This is the digital equivalent of flipping the page and repeating the previous procedure.
____this is just really, really confusing to me but that might just be my brain right now____
Interesting right? This drawing method works for any square with the assumption ____that each one only know it coordinate position____. This drawing technique is all about flipping and stretching this coordinate system.
____you need an example here of what you're describing above - a bunch of different rectangles at different positions____
* Experiment with the same code but using [```smoothstep()```](../glossary/index.html#smoothstep.md) instead of [```step()```](../glossary/index.html#step.md). Note that by changing values, you can go from blurred edges to elegant smooth borders.
* How do you think you can move and place different rectangles in the same billboard? If you figure out how, show off your skills by making a composition of rectangles and colors that resembles a [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) painting.
It's easy to draw squares on grid paper; in the same way it's simple to draw rectangles on cartesian coordinates. But circles requires another approach, especially ____if we need to come up with a "per-pixel" or "per-square" approach____. One solution is to *re-map* the spatial coordinates so that we can use a [```step()```](../glossary/index.html#step.md) function to draw a circle.
How? Let's start by going back to math class and the grid paper, where we used to open a compass to the desired radius of a circle, press one of the compass points at the center of the circle and then trace the edge of the circle with a simple spin.
Translating this to a shader where each square on the grid paper is a pixel implies *asking* each pixel (or thread) if it is inside the area of the circle. We do this by computing the distance from the pixel to the center of the circle.
There are several ways to calculate that distance. The easiest one uses the [```distance()```](../glossary/index.html#distance.md) function, which internally computes the [```length()```](../glossary/index.html#length.md) of the difference between two points (in our case the pixel coordinate and the center of the canvas). The ```length()``` function is nothing but a shortcut of the [hypotenuse equation](http://en.wikipedia.org/wiki/Hypotenuse) that uses square root ([```sqrt()```](../glossary/index.html#sqrt.md)) internally.
You can use [```distance()```](../glossary/index.html#distance.md), [```length()```](../glossary/index.html#length.md) or [```sqrt()```](../glossary/index.html#sqrt.md)) to calculate the distance to the center of the billboard. The following code contains these three functions and the non-surprising fact that each one returns exactly same result.
* Comment and uncomment lines to try the different ways to get the same result.
In the previous example we map the distance to the center of the billboard to the color brightness of the pixel. The closer a pixel is to the center, the lower (darker) value it has. Notice that the values don't get too high because from the center ( ```vec2(0.5, 0.5)``` ) the maximum distance barely goes over 0.5. Contemplate this map and think:
Imagine the above example as an inverse altitude map, where darker implies taller. The gradient shows us something similar to the pattern made by a cone. ____Imagine yourself on the top of that cone, under your foot you hold the tip of a ruled tape while the rest of it goes down the hill. Because you are in the center of the canvas, the ruler will mark "0.5" in the extreme. (This isn't quite right the way it's written)________This will be constant in all your directions. (This is confusing) ____ By choosing where to “cut” the cone you will get a bigger or smaller circular surface.
Basically we are using a re-interpretation of the space (based on the distance to the center) to make shapes. This technique is known as a “distance field” and is use in different ways from font outlines to 3D graphics.
In terms of computational power the [```sqrt()```](../glossary/index.html#sqrt.md) function - and all the functions that depend on it - can be expensive. Here is another way to create a circular distance field by using [```dot()```](../glossary/index.html#dot.md) product.
____do you want to describe how this is working at all?____
Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distances fields are popular in font rendering. ____this is the second time you've mentioned font rendering - it's kind of weird to keep mentioning it without showing (or linking to) and example____
We start by moving the coordinate system to the center and shrinking it in half in order to ____contain the position values____ between -1 and 1. Also on *line 24* we are visualizing the distance field values using a [```fract()```](../glossary/index.html#fract.md) function making it easy to see the pattern they create. The distance field pattern repeats over and over like rings in a Zen garden.
Let’s take a look at the distance field formula on *line 19*. There we are calculating the distance to the position on ```(.3,.3)``` or ```vec3(.3)``` in ____all four sign permutations____ (that’s what [```abs()```](../glossary/index.html#abs.md) is doing there).
If you uncomment *line 20*, you will note that we are combining the distances to these four points using the [```min()```](../glossary/index.html#min.md) to zero. The result produces an interesting new pattern.
Now try uncommenting *line 21*, we are doing the same but using the [```max()```](../glossary/index.html#max.md) function. The result is a rectangle with rounded corners. Note how the rings of the distance field get smoother the further away they get from the center.
In the chapter about color we map the cartesian coordinates to polar coordinates by calculating the *radius* and *angles* of each pixel with the following formula:
We use part of this formula at the beginning of the chapter to draw a circle. We calculated the distance to the center using [```length()```](../glossary/index.html#length.md). Now that we know about distance fields we can learn another way of drawing shapes using polar coordinates.
This technique is a little restrictive but very simple. It consists of changing the radius of a circle depending on the angle to achieve different shapes. How does the modulation work? Yes, using shaping functions!
Below you will find the same functions in the cartesian graph and in a polar coordinates shader example (between *lines 21 and 25*). Uncomment the functions one-by-one, paying attention the relationship between one coordinate system and the other.
____Now that we've learned how to modulate the radius of a circle according to the angle using the [```atan()```](../glossary/index.html#atan.md) to draw different shapes, we can learn how use ```atan()``` with distance fields, and apply all the tricks and effects possible with them.____
The trick will use the number of edges of a polygon to construct the distance field using polar coordinates. Check out [the following code](http://thndl.com/square-shaped-shaders.html) from [Andrew Baldwin](https://twitter.com/baldand).
Congratulations! You have made it through the rough part! Take a break and let these concepts settle - drawing simple shapes in Processing is easy but not here. In shader-land ____everything the way to thing on shapes is twisted____ and it 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 into 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!____
