From 1c190ea3365e70ae98d2b2fc5f0523d5cc19486e Mon Sep 17 00:00:00 2001 From: Patricio Gonzalez Vivo Date: Fri, 17 Jul 2015 16:24:23 -0400 Subject: [PATCH] relative paths as variables, glossary querry, code style --- 00/index.php | 8 +- 01/index.php | 8 +- 02/index.php | 8 +- 03/README.md | 2 +- 03/index.php | 8 +- 04/index.php | 8 +- 05/README.md | 24 +-- 05/index.php | 8 +- 06/README.md | 10 +- 06/index.php | 8 +- 07/README.md | 40 ++--- 07/index.php | 8 +- 08/README.md | 2 +- 08/index.php | 8 +- 09/README.md | 6 +- 09/index.php | 13 +- 10/index.php | 8 +- 11/index.php | 8 +- 12/index.php | 8 +- 13/index.php | 8 +- 14/index.php | 8 +- 15/index.php | 8 +- 16/index.php | 8 +- 17/index.php | 8 +- appendix/index.php | 8 +- css/style.css | 10 +- examples/index.php | 8 +- footer.php | 2 +- glossary/README.md | 364 ++++++++++++++++++++++----------------------- glossary/index.php | 10 +- header.php | 43 +++--- index.php | 1 + src/main.js | 12 +- 33 files changed, 365 insertions(+), 326 deletions(-) diff --git a/00/index.php b/00/index.php index f805db0..d66911a 100644 --- a/00/index.php +++ b/00/index.php @@ -1,6 +1,8 @@

The Book of Shaders by Patricio Gonzalez Vivo

@@ -19,5 +21,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/01/index.php b/01/index.php index ffa79a9..8c9355a 100644 --- a/01/index.php +++ b/01/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/02/index.php b/02/index.php index ffa79a9..8c9355a 100644 --- a/02/index.php +++ b/02/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/03/README.md b/03/README.md index 4f27156..287e5be 100644 --- a/03/README.md +++ b/03/README.md @@ -26,7 +26,7 @@ Enough talking, let's see the uniforms in action. In the following code we use `
    -As you can see GLSL has more surprises. The GPU has hardware accelerated angle, trigonometric and exponential functions. Some of those functions are: [```sin()```](http://www.shaderific.com/glsl-functions/#sine), [```cos()```](http://www.shaderific.com/glsl-functions/#cosine), [```tan()```](http://www.shaderific.com/glsl-functions/#tangent), [```asin()```](http://www.shaderific.com/glsl-functions/#arcsine), [```acos()```](http://www.shaderific.com/glsl-functions/#arccosine), [```atan()```](http://www.shaderific.com/glsl-functions/#arctangent), [```pow()```](http://www.shaderific.com/glsl-functions/#exponentiation), [```exp()```](http://www.shaderific.com/glsl-functions/#exponentiation), [```log()```](http://www.shaderific.com/glsl-functions/#naturallogarithm), [```sqrt()```](http://www.shaderific.com/glsl-functions/#squareroot), [```abs()```](http://www.shaderific.com/glsl-functions/#absolutevalue), [```sign()```](http://www.shaderific.com/glsl-functions/#sign), [```floor()```](http://www.shaderific.com/glsl-functions/#floor), [```ceil()```](http://www.shaderific.com/glsl-functions/#ceiling), [```fract()```](http://www.shaderific.com/glsl-functions/#fractionalpart), [```mod()```](http://www.shaderific.com/glsl-functions/#modulo), [```min()```](http://www.shaderific.com/glsl-functions/#minimum), [```max()```](http://www.shaderific.com/glsl-functions/#maximum) and [```clamp()```](http://www.shaderific.com/glsl-functions/#clamp). +As you can see GLSL has more surprises. The GPU has hardware accelerated angle, trigonometric and exponential functions. Some of those functions are: [```sin()```](../glossary/?search=sin), [```cos()```](../glossary/?search=cos), [```tan()```](../glossary/?search=tan), [```asin()```](../glossary/?search=asin), [```acos()```](../glossary/?search=acos), [```atan()```](../glossary/?search=atan), [```pow()```](../glossary/?search=pow), [```exp()```](../glossary/?search=exp), [```log()```](../glossary/?search=log), [```sqrt()```](../glossary/?search=sqrt), [```abs()```](../glossary/?search=abs), [```sign()```](../glossary/?search=sign), [```floor()```](../glossary/?search=floor), [```ceil()```](../glossary/?search=ceil), [```fract()```](../glossary/?search=fract), [```mod()```](../glossary/?search=mod), [```min()```](../glossary/?search=min), [```max()```](../glossary/?search=max) and [```clamp()```](../glossary/?search=clamp). Now it is time again to play with the above code. diff --git a/03/index.php b/03/index.php index ffa79a9..8c9355a 100644 --- a/03/index.php +++ b/03/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/04/index.php b/04/index.php index ffa79a9..8c9355a 100644 --- a/04/index.php +++ b/04/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/05/README.md b/05/README.md index d3aef49..dca969f 100644 --- a/05/README.md +++ b/05/README.md @@ -19,25 +19,25 @@ This one-to-one relationship between *x* and *y* (or the brightness) is know as Interesting, right? On line 19 try different exponents: 20.0, 2.0, 1.0, 0.0, 0.2 and 0.02 for example. Understanding this relationship between the value and the exponent will be very helpful. Using these types of mathematical functions here and there will give you expressive control over your code, a sort of data acupuncture that let you control the flow of values. -[```pow()```](../glossary/index.html#pow.md) is a native function in GLSL and there are many others. Most of them are accelerated at the level of the hardware, which means if they are used in the right way and with discretion they will make your code faster. +[```pow()```](../glossary/?search=pow) is a native function in GLSL and there are many others. Most of them are accelerated at the level of the hardware, which means if they are used in the right way and with discretion they will make your code faster. -Replace the power function on line 19. Try other ones like: [```exp()```](../glossary/index.html#exp.md), [```log()```](../glossary/index.html#log.md) and [```sqrt()```](../glossary/index.html#sqrt.md). Some of these functions are more interesting when you play with them using PI. You can see on line 5 that I have defined a macro that will replace any call to ```PI``` with the value ```3.14159265359```. +Replace the power function on line 19. Try other ones like: [```exp()```](../glossary/?search=exp), [```log()```](../glossary/?search=log) and [```sqrt()```](../glossary/?search=sqrt). Some of these functions are more interesting when you play with them using PI. You can see on line 5 that I have defined a macro that will replace any call to ```PI``` with the value ```3.14159265359```. ### Step and Smoothstep GLSL also has some unique native interpolation functions that are hardware accelerated. -The [```step()```](../glossary/index.html#step.md) interpolation receives two parameters. The first one is the limit or threshold, while the second one is the value we want to check or pass. Any value under the limit will return ```0.0``` while everything above the limit will return ```1.0```. +The [```step()```](../glossary/?search=step) interpolation receives two parameters. The first one is the limit or threshold, while the second one is the value we want to check or pass. Any value under the limit will return ```0.0``` while everything above the limit will return ```1.0```. Try changing this threshold value on line 20 of the following code.
    -The other unique function is known as [```smoothstep()```](../glossary/index.html#smoothstep.md). Given a range of two numbers and a value, this function will interpolate the value between the defined range. The two first parameters are for the beginning and end of the transition, while the third is for the value to interpolate. +The other unique function is known as [```smoothstep()```](../glossary/?search=smoothstep). Given a range of two numbers and a value, this function will interpolate the value between the defined range. The two first parameters are for the beginning and end of the transition, while the third is for the value to interpolate.
    -In the previous example, on line 12, notice that we’ve been using smoothstep to draw the green line on the ```plot()``` function. For each position along the *x* axis this function makes a *bump* at a particular value of *y*. How? By connecting two [```smoothstep()```](../glossary/index.html#smoothstep.md) together. Take a look at the following function, replace it for line 20 above and think of it as a vertical cut. The background does look like a line, right? +In the previous example, on line 12, notice that we’ve been using smoothstep to draw the green line on the ```plot()``` function. For each position along the *x* axis this function makes a *bump* at a particular value of *y*. How? By connecting two [```smoothstep()```](../glossary/?search=smoothstep) together. Take a look at the following function, replace it for line 20 above and think of it as a vertical cut. The background does look like a line, right? ```glsl float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x); @@ -47,7 +47,7 @@ In the previous example, on line 12, notice that we’ve been using smoothstep t When you want to use some math to animate, shape or blend values, there is nothing better than being friends with sine and cosine. -These two basic trigonometric functions work together to construct circles that are as handy as MacGyver’s Swiss army knife. It’s important to know how they behave and in what ways they can be combined. In a nutshell, given an angle (in radians) they will return the correct position of *x* ([cosine](../glossary/index.html#cos.md)) and *y* ([sine](../glossary/index.html#sin.md)) of a point on the edge of a circle with a radius equal to 1. But, the fact that they return normalized values (values between -1 and 1) in such a smooth way makes them an incredible tool. +These two basic trigonometric functions work together to construct circles that are as handy as MacGyver’s Swiss army knife. It’s important to know how they behave and in what ways they can be combined. In a nutshell, given an angle (in radians) they will return the correct position of *x* ([cosine](../glossary/?search=cos)) and *y* ([sine](../glossary/?search=sin)) of a point on the edge of a circle with a radius equal to 1. But, the fact that they return normalized values (values between -1 and 1) in such a smooth way makes them an incredible tool. ![](sincos.gif) @@ -55,7 +55,7 @@ While it's difficult to describe all the relationships between trigonometric fun
    -Take a careful look at this sine wave. Note how the *y* values flow smoothly between +1 and -1. As we saw in the time example in the previous chapter, you can use this rhythmic behavior of [```sin()```](../glossary/index.html#sin.md) to animate properties. If you are reading this example in a browser you will see that the you can change the code in the formula above to watch how the wave changes. (Note: don't forget the semicolon at the end of the lines.) +Take a careful look at this sine wave. Note how the *y* values flow smoothly between +1 and -1. As we saw in the time example in the previous chapter, you can use this rhythmic behavior of [```sin()```](../glossary/?search=sin) to animate properties. If you are reading this example in a browser you will see that the you can change the code in the formula above to watch how the wave changes. (Note: don't forget the semicolon at the end of the lines.) Try the following exercises and notice what happens: @@ -65,15 +65,15 @@ Try the following exercises and notice what happens: * Multiply time (```u_time```) by *x* before computing the ```sin```. See how the **frequency** between phases becomes more and more compressed. Note that u_time may have already become very large, making the graph hard to read. -* Add 1.0 to [```sin(x)```](../glossary/index.html#sin.md). See how all the wave is **displaced** up and now all values are between 0.0 and 2.0. +* Add 1.0 to [```sin(x)```](../glossary/?search=sin). See how all the wave is **displaced** up and now all values are between 0.0 and 2.0. -* Multiply [```sin(x)```](../glossary/index.html#sin.md) by 2.0. See how the **amplitude** doubles in size. +* Multiply [```sin(x)```](../glossary/?search=sin) by 2.0. See how the **amplitude** doubles in size. -* Compute the absolute value ([```abs()```](../glossary/index.html#abs.md)) of ```sin(x)```. It looks like the trace of a **bouncing** ball. +* Compute the absolute value ([```abs()```](../glossary/?search=abs)) of ```sin(x)```. It looks like the trace of a **bouncing** ball. -* Extract just the fraction part ([```fract()```](../glossary/index.html#fract.md)) of the resultant of [```sin(x)```](../glossary/index.html#sin.md). +* Extract just the fraction part ([```fract()```](../glossary/?search=fract)) of the resultant of [```sin(x)```](../glossary/?search=sin). -* Add the higher integer ([```ceil()```](../glossary/index.html#ceil.md)) and the smaller integer ([```floor()```](../glossary/index.html#floor.md)) of the resultant of [```sin(x)```](../glossary/index.html#sin.md) to get a digital wave of 1 and -1 values. +* Add the higher integer ([```ceil()```](../glossary/?search=ceil)) and the smaller integer ([```floor()```](../glossary/?search=floor)) of the resultant of [```sin(x)```](../glossary/?search=sin) to get a digital wave of 1 and -1 values. ### Some extra useful functions diff --git a/05/index.php b/05/index.php index ffa79a9..8c9355a 100644 --- a/05/index.php +++ b/05/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/06/README.md b/06/README.md index 8f5a65b..a79f923 100644 --- a/06/README.md +++ b/06/README.md @@ -54,7 +54,7 @@ You might not be used to picking colors with numbers - it can be very counterint ### Mixing color -Now that you know how colors are defined, it's time to integrate this with our previous knowledge. In GLSL there is a very useful function, [```mix()```](../glossary/index.html#mix.md), that lets you mix two values in percentages. Can you guess what the percentage range is? Yes, values between 0.0 and 1.0! Which is perfect for you, after those long hours practicing your karate moves with the fence - it is time to use them! +Now that you know how colors are defined, it's time to integrate this with our previous knowledge. In GLSL there is a very useful function, [```mix()```](../glossary/?search=mix), that lets you mix two values in percentages. Can you guess what the percentage range is? Yes, values between 0.0 and 1.0! Which is perfect for you, after those long hours practicing your karate moves with the fence - it is time to use them! ![](mix-f.jpg) @@ -68,7 +68,7 @@ Show off your skills by: ### Playing with gradients -The [```mix()```](../glossary/index.html#mix.md) function has more to offer. Instead of a single ```float```, we can pass a variable type that matches the two first arguments, in our case a ```vec3```. By doing that we gain control over the mixing percentages of each individual color channel, ```r```, ```g``` and ```b```. +The [```mix()```](../glossary/?search=mix) function has more to offer. Instead of a single ```float```, we can pass a variable type that matches the two first arguments, in our case a ```vec3```. By doing that we gain control over the mixing percentages of each individual color channel, ```r```, ```g``` and ```b```. ![](mix-vec.jpg) @@ -102,13 +102,13 @@ By mapping the position on the x axis to the Hue and the position on the y axis ### HSB in polar coordinates -HSB was originally designed to be represented in polar coordinates (based on the angle and radius) instead of cartesian coordinates (based on x and y). To map our HSB function to polar coordinates we need to obtain the angle and distance from the center of the billboard to the pixel coordinate. For that we will use the [```length()```](../glossary/index.html#length.md) function and [```atan(y,x)```](../glossary/index.html#atan.md) (which is the GLSL version of the commonly used ```atan2(y,x)```). +HSB was originally designed to be represented in polar coordinates (based on the angle and radius) instead of cartesian coordinates (based on x and y). To map our HSB function to polar coordinates we need to obtain the angle and distance from the center of the billboard to the pixel coordinate. For that we will use the [```length()```](../glossary/?search=length) function and [```atan(y,x)```](../glossary/?search=atan) (which is the GLSL version of the commonly used ```atan2(y,x)```). When using vector and trigonometric functions, ```vec2```, ```vec3``` and ```vec4``` are treated as vectors even when they represent colors. We will start treating colors and vectors similarly, in fact you will come to find this conceptual flexibility very empowering. -**Note:** If you were wondering, there are more geometric functions besides [```length```](../glossary/index.html#length.md) like: [```distance()```](../glossary/index.html#distance.md), [```dot()```](../glossary/index.html#dot.md), [```cross```](../glossary/index.html#cross.md), [```normalize()```](../glossary/index.html#normalize.md), [```faceforward()```](../glossary/index.html#fraceforward.md), [```reflect()```](../glossary/index.html#reflect.md) and [```refract()```](../glossary/index.html#refract.md). Also GLSL has special vector relational functions such as: [```lessThan()```](../glossary/index.html#lessThan.md), [```lessThanEqual()```](../glossary/index.html#lessThanEqual.md), [```greaterThan()```](../glossary/index.html#greaterThan.md), [```greaterThanEqual()```](../glossary/index.html#greaterThanEqual.md), [```equal()```](../glossary/index.html#equal.md) and [```notEqual()```](../glossary/index.html#notEqual.md). +**Note:** If you were wondering, there are more geometric functions besides [```length```](../glossary/?search=length) like: [```distance()```](../glossary/?search=distance), [```dot()```](../glossary/?search=dot), [```cross```](../glossary/?search=cross), [```normalize()```](../glossary/?search=normalize), [```faceforward()```](../glossary/?search=fraceforward), [```reflect()```](../glossary/?search=reflect) and [```refract()```](../glossary/?search=refract). Also GLSL has special vector relational functions such as: [```lessThan()```](../glossary/?search=lessThan), [```lessThanEqual()```](../glossary/?search=lessThanEqual), [```greaterThan()```](../glossary/?search=greaterThan), [```greaterThanEqual()```](../glossary/?search=greaterThanEqual), [```equal()```](../glossary/?search=equal) and [```notEqual()```](../glossary/?search=notEqual). -Once we obtain the angle and length we need to “normalize” their values to the range between 0.0 to 1.0. On line 27, [```atan(y,x)```](../glossary/index.html#atan.md) will return an angle in radians between -PI and PI (-3.14 to 3.14), so we need to divide this number by ```TWO_PI``` (defined at the top of the code) to get values between -0.5 to 0.5, which by simple addition we change to the desired range of 0.0 to 1.0. The radius will return a maximum of 0.5 (because we are calculating the distance from the center of the viewport) so we need to double this range (by multiplying by two) to get a maximum of 1.0. +Once we obtain the angle and length we need to “normalize” their values to the range between 0.0 to 1.0. On line 27, [```atan(y,x)```](../glossary/?search=atan) will return an angle in radians between -PI and PI (-3.14 to 3.14), so we need to divide this number by ```TWO_PI``` (defined at the top of the code) to get values between -0.5 to 0.5, which by simple addition we change to the desired range of 0.0 to 1.0. The radius will return a maximum of 0.5 (because we are calculating the distance from the center of the viewport) so we need to double this range (by multiplying by two) to get a maximum of 1.0. As you can see, our game here is all about transforming and mapping ranges to the 0.0 to 1.0 that we like. diff --git a/06/index.php b/06/index.php index ffa79a9..8c9355a 100644 --- a/06/index.php +++ b/06/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/07/README.md b/07/README.md index e0e4d47..7d91c0d 100644 --- a/07/README.md +++ b/07/README.md @@ -23,7 +23,7 @@ Let's start by sketching pseudocode that uses ```if``` statements over the spati paint black ``` -Now that we have a better idea of how this will work, let’s replace the ```if``` statement with [```step()```](../glossary/index.html#step.md), and instead of using 10x10 let’s use normalized values between 0.0 and 1.0: +Now that we have a better idea of how this will work, let’s replace the ```if``` statement with [```step()```](../glossary/?search=step), and instead of using 10x10 let’s use normalized values between 0.0 and 1.0: ```glsl uniform vec2 u_resolution; @@ -43,11 +43,11 @@ void main(){ } ``` -The [```step()```](../glossary/index.html#step.md) function will turn every pixel below 0.1 to black (```vec3(0.0)```) and the rest to white (```vec3(1.0)```) . The multiplication between ```left``` and ```bottom``` works as a logical ```AND``` operation, where both must be 1.0 to return 1.0 . This draws two black lines, one on the bottom and the other on the left side of the canvas. +The [```step()```](../glossary/?search=step) function will turn every pixel below 0.1 to black (```vec3(0.0)```) and the rest to white (```vec3(1.0)```) . The multiplication between ```left``` and ```bottom``` works as a logical ```AND``` operation, where both must be 1.0 to return 1.0 . This draws two black lines, one on the bottom and the other on the left side of the canvas. ![](rect-01.jpg) -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) instead of one. That looks like this: +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/?search=step) instead of one. That looks like this: ```glsl vec2 borders = step(vec2(0.1),st); @@ -58,7 +58,7 @@ So far, we’ve only drawn two borders (bottom-left) of our rectangle. Let's do
    -Uncomment *lines 21-22* and see how we invert the ```st``` coordinates 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. +Uncomment *lines 21-22* and see how we invert the ```st``` coordinates and repeat the same [```step()```](../glossary/?search=step) 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. ![](rect-02.jpg) @@ -70,15 +70,15 @@ Take note that in *lines 18 and 22* all of the sides are being multiplied togeth color = vec3(bl.x * bl.y * tr.x * tr.y); ``` -Interesting right? This technique is all about using [```step()```](../glossary/index.html#step.md) and multiplication for logical operations and flipping the coordinates. +Interesting right? This technique is all about using [```step()```](../glossary/?search=step) and multiplication for logical operations and flipping the coordinates. Before going forward, try the following exercises: * Change the size and proportions of the rectangle. -* 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. +* Experiment with the same code but using [```smoothstep()```](../glossary/?search=smoothstep) instead of [```step()```](../glossary/?search=step). Note that by changing values, you can go from blurred edges to elegant smooth borders. -* Do another implementation that uses [```floor()```](../glossary/index.html#floor.md). +* Do another implementation that uses [```floor()```](../glossary/?search=floor). * Choose the implementation you like the most and make a function of it that you can reuse in the future. Make your function flexible and efficient. @@ -90,7 +90,7 @@ Before going forward, try the following exercises: ### Circles -It's easy to draw squares on grid paper and rectangles on cartesian coordinates, but circles require another approach, especially since we need a "per-pixel" algorithm. 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. +It's easy to draw squares on grid paper and rectangles on cartesian coordinates, but circles require another approach, especially since we need a "per-pixel" algorithm. One solution is to *re-map* the spatial coordinates so that we can use a [```step()```](../glossary/?search=step) function to draw a circle. How? Let's start by going back to math class and the grid paper, where we opened a compass to the radius of a circle, pressed one of the compass points at the center of the circle and then traced the edge of the circle with a simple spin. @@ -100,11 +100,11 @@ Translating this to a shader where each square on the grid paper is a pixel impl ![](circle.jpg) -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. +There are several ways to calculate that distance. The easiest one uses the [```distance()```](../glossary/?search=distance) function, which internally computes the [```length()```](../glossary/?search=length) 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/?search=sqrt)) internally. ![](hypotenuse.png) -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. +You can use [```distance()```](../glossary/?search=distance), [```length()```](../glossary/?search=length) or [```sqrt()```](../glossary/?search=sqrt) 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. @@ -128,11 +128,11 @@ Basically we are using a re-interpretation of the space (based on the distance t Try the following exercises: -* Use [```step()```](../glossary/index.html#step.md) to turn everything above 0.5 to white and everything below to 0.0. +* Use [```step()```](../glossary/?search=step) to turn everything above 0.5 to white and everything below to 0.0. * Inverse the colors of the background and foreground. -* Using [```smoothstep()```](../glossary/index.html#smoothstep.md), experiment with different values to get nice smooth borders on your circle. +* Using [```smoothstep()```](../glossary/?search=smoothstep), experiment with different values to get nice smooth borders on your circle. * Once you are happy with an implementation, make a function of it that you can reuse in the future. @@ -156,7 +156,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6))); #### For your tool box -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. +In terms of computational power the [```sqrt()```](../glossary/?search=sqrt) 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/?search=dot) product.
    @@ -170,13 +170,13 @@ Take a look at the following code.
    -We start by moving the coordinate system to the center and shrinking it in half in order to remap 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. +We start by moving the coordinate system to the center and shrinking it in half in order to remap the position values between -1 and 1. Also on *line 24* we are visualizing the distance field values using a [```fract()```](../glossary/?search=fract) 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 quadrants (that’s what [```abs()```](../glossary/index.html#abs.md) is doing there). +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 quadrants (that’s what [```abs()```](../glossary/?search=abs) 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. +If you uncomment *line 20*, you will note that we are combining the distances to these four points using the [```min()```](../glossary/?search=min) 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. +Now try uncommenting *line 21*; we are doing the same but using the [```max()```](../glossary/?search=max) 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. Finish uncommenting *lines 27 to 29* one by one to understand the different uses of a distance field pattern. @@ -192,7 +192,7 @@ In the chapter about color we map the cartesian coordinates to polar coordinates float a = atan(pos.y,pos.x); ``` -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. +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/?search=length). 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! @@ -214,7 +214,7 @@ Try to: ### Combining powers -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 distance fields. +Now that we've learned how to modulate the radius of a circle according to the angle using the [```atan()```](../glossary/?search=atan) to draw different shapes, we can learn how use ```atan()``` with distance fields and apply all the tricks and effects possible with distance fields. 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). @@ -222,7 +222,7 @@ The trick will use the number of edges of a polygon to construct the distance fi * Using this example, make a function that inputs the position and number of corners of a desired shape and returns a distance field value. -* Mix distance fields together using [```min()```](../glossary/index.html#min.md) and [```max()```](../glossary/index.html#max.md). +* Mix distance fields together using [```min()```](../glossary/?search=min) and [```max()```](../glossary/?search=max). * Choose a geometric logo to replicate using distance fields. diff --git a/07/index.php b/07/index.php index ffa79a9..8c9355a 100644 --- a/07/index.php +++ b/07/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/08/README.md b/08/README.md index e41a711..ccb2eac 100644 --- a/08/README.md +++ b/08/README.md @@ -24,7 +24,7 @@ To rotate objects we also need to move the entire space system. For that we are [![Wikipedia entry for Matrix (mathematics) ](matrixes.png)](https://en.wikipedia.org/wiki/Matrix) -GLSL has native support for two, three and four dimensional matrices: [```mat2```](../glossary/index.html#mat2.md) (2x2), [```mat3```](../glossary/index.html#mat3.md) (3x3) and [```mat4```](../glossary/index.html#mat4.md) (4x4). GLSL also supports matrix multiplication (```*```) and a matrix specific function ([```matrixCompMult()```](../glossary/index.html#matrixCompMult.md)). +GLSL has native support for two, three and four dimensional matrices: [```mat2```](../glossary/?search=mat2) (2x2), [```mat3```](../glossary/?search=mat3) (3x3) and [```mat4```](../glossary/?search=mat4) (4x4). GLSL also supports matrix multiplication (```*```) and a matrix specific function ([```matrixCompMult()```](../glossary/?search=matrixCompMult)). Based on how matrices behave it's possible to construct matrices to produce specific behaviors. For example we can use a matrix to translate a vector: diff --git a/08/index.php b/08/index.php index ffa79a9..8c9355a 100644 --- a/08/index.php +++ b/08/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/09/README.md b/09/README.md index 90b5e43..9ab4ec6 100644 --- a/09/README.md +++ b/09/README.md @@ -8,7 +8,7 @@ In this chapter we are going to apply what we've learned so far and repeat it al *"The grid provides a framework within which human intuition and invention can operate and that it can subvert. Within the chaos of nature patterns provide a constrast and promise of order. From early patterns on pottery to geometric mosaics in Roman baths, people have long used grids to enhance their lives with decoration."* [*10 PRINT*, Mit Press, (2013)](http://10print.org/) -First let's remember the [```fract()```](../glossary/index.html#fract.md) function, which is in essence the modulo of one ([```mod(x,1.0)```](../glossary/index.html#mod.md)) because it returns the fractional part of a number. In other words, [```fract()```](../glossary/index.html#fract.md) returns the number after the floating point. Our normalized coordinate system variable (```st```) already goes from 0.0 to 1.0 so it doesn't make sense to do something like: +First let's remember the [```fract()```](../glossary/?search=fract) function, which is in essence the modulo of one ([```mod(x,1.0)```](../glossary/?search=mod)) because it returns the fractional part of a number. In other words, [```fract()```](../glossary/?search=fract) returns the number after the floating point. Our normalized coordinate system variable (```st```) already goes from 0.0 to 1.0 so it doesn't make sense to do something like: ```glsl void main(){ @@ -60,13 +60,13 @@ As a first step we need to know if the row of our thread is an even or odd numbe ____we have to fix these next two paragraphs together____ -For that we are going to use [```mod()```](../glossary/index.html#mod.md) of ```2.0``` and then see if the result is under ```1.0``` or not. Take a look to the folowing formula and uncomment the two last lines. +For that we are going to use [```mod()```](../glossary/?search=mod) of ```2.0``` and then see if the result is under ```1.0``` or not. Take a look to the folowing formula and uncomment the two last lines.
    -As you can see we can use a [ternary operator](https://en.wikipedia.org/wiki/%3F:) to check if the [```mod()```](../glossary/index.html#mod.md) of ```2.0``` is under ```1.0``` (second line) or similarly we can use a [```step()```](../glossary/index.html#step.md) function which does that the same operation, but faster. Why? Althogh is hard to know how each graphic card optimize and compiles the code is safe to assume that built-ins functions are faster than non-built-in one. Everytime you can use one, use it! +As you can see we can use a [ternary operator](https://en.wikipedia.org/wiki/%3F:) to check if the [```mod()```](../glossary/?search=mod) of ```2.0``` is under ```1.0``` (second line) or similarly we can use a [```step()```](../glossary/?search=step) function which does that the same operation, but faster. Why? Althogh is hard to know how each graphic card optimize and compiles the code is safe to assume that built-ins functions are faster than non-built-in one. Everytime you can use one, use it! So now we have our even number formula we can apply some offset to odd rows to give a *brick* effect to our tiles. Check lines 14 the following code, there we are using the function we just describe "detect odd" rows and give them an offset on ```x``` of half of unit. Note that by multipling by ```0.0``` even will make the offset similiar to ```0.0``` so we don't add any offset. But on odd rows we multipliy the result of our function (```1.0```) to the offset of ```0.5``` to the ```x``` axis of the coordinate system. diff --git a/09/index.php b/09/index.php index fba82ec..8c9355a 100644 --- a/09/index.php +++ b/09/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -17,11 +19,8 @@ '; - include("../footer.php"); + include($path."/footer.php"); ?> - - diff --git a/10/index.php b/10/index.php index ffa79a9..8c9355a 100644 --- a/10/index.php +++ b/10/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/11/index.php b/11/index.php index ffa79a9..8c9355a 100644 --- a/11/index.php +++ b/11/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/12/index.php b/12/index.php index ffa79a9..8c9355a 100644 --- a/12/index.php +++ b/12/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/13/index.php b/13/index.php index ffa79a9..8c9355a 100644 --- a/13/index.php +++ b/13/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/14/index.php b/14/index.php index ffa79a9..8c9355a 100644 --- a/14/index.php +++ b/14/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/15/index.php b/15/index.php index ffa79a9..8c9355a 100644 --- a/15/index.php +++ b/15/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/16/index.php b/16/index.php index ffa79a9..8c9355a 100644 --- a/16/index.php +++ b/16/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/17/index.php b/17/index.php index ffa79a9..8c9355a 100644 --- a/17/index.php +++ b/17/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/appendix/index.php b/appendix/index.php index ffa79a9..8c9355a 100644 --- a/appendix/index.php +++ b/appendix/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/css/style.css b/css/style.css index 55f01aa..8b31c9c 100644 --- a/css/style.css +++ b/css/style.css @@ -142,7 +142,7 @@ code { border-radius: 4px; } -.lang-bash { +.language-bash { background-color: #ECECEC; display: block; @@ -153,7 +153,7 @@ code { border-radius: 6px; } -.lang-glsl { +.language-glsl { background-color: #ECECEC; font-size: 14px; @@ -163,7 +163,7 @@ code { border-radius: 6px; } -.lang-cpp { +.language-cpp { background-color: #ECECEC; font-size: 14px; @@ -173,7 +173,7 @@ code { border-radius: 6px; } -.lang-html { +.language-html { background-color: #ECECEC; font-size: 14px; @@ -183,7 +183,7 @@ code { border-radius: 6px; } -.lang-processing { +.language-processing { background-color: #ECECEC; font-size: 14px; diff --git a/examples/index.php b/examples/index.php index ffa79a9..8c9355a 100644 --- a/examples/index.php +++ b/examples/index.php @@ -1,6 +1,8 @@

    The Book of Shaders by Patricio Gonzalez Vivo

    @@ -20,5 +22,5 @@
  • Next > >
    • '; - include("../footer.php"); + include($path."/footer.php"); ?> diff --git a/footer.php b/footer.php index b788e2b..f017bf9 100644 --- a/footer.php +++ b/footer.php @@ -4,7 +4,7 @@ echo '

    Copyright 2015 Patricio Gonzalez Vivo

    - + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - + + - + - diff --git a/index.php b/index.php index 89ec363..642fdb0 100644 --- a/index.php +++ b/index.php @@ -1,4 +1,5 @@ '; include("src/parsedown/Parsedown.php"); diff --git a/src/main.js b/src/main.js index 3e27480..99c410a 100644 --- a/src/main.js +++ b/src/main.js @@ -256,11 +256,11 @@ function loadMarkdown(){ // Load codes tags that have "src" attributes var list = document.getElementsByTagName("code"); for(var i = 0; i < list.length; i++){ - if (list[i].className == "lang-glsl" || - list[i].className == "lang-bash" || - list[i].className == "lang-cpp" || - list[i].className == "lang-html" || - list[i].className == "lang-processing" ){ + if (list[i].className == "language-glsl" || + list[i].className == "language-bash" || + list[i].className == "language-cpp" || + list[i].className == "language-html" || + list[i].className == "language-processing" ){ hljs.highlightBlock(list[i]); } } @@ -354,7 +354,7 @@ function previusPage(){ if(n < 0){ url = "../"; } else { - url = "../" + FormatNumberLength(n,2); + url = "../" + FormatNumberLength(n,2) + "/"; } window.location.href = url; }