Merge branch 'master' of github.com:patriciogonzalezvivo/thebookofshaders

Author: patriciogonzalezvivo

00/README.md

@@ -18,7 +18,7 @@ In the following chapters you will discover how incredibly fast and powerful thi
 
 This book is written for creative coders, game developers and engineers who have coding experience, a basic knowledge of linear algebra and trigonometry, and who want to take their work to an exciting new level of graphical quality. (If you want to learn how to code, I highly recommend you start with [Processing](https://processing.org/) and come back later when you are comfortable with it.)
 
-This book will teach you how to use and integrate shaders into your projects, improving their performance and graphical quality. Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any enviroment that uses OpenGL, OpenGL ES or WebGL. In other words, you will be able to apply and use your knowledge with [Processing](https://processing.org/) sketches, [openFrameworsk](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites or iOS/Android games.
+This book will teach you how to use and integrate shaders into your projects, improving their performance and graphical quality. Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any enviroment that uses OpenGL, OpenGL ES or WebGL. In other words, you will be able to apply and use your knowledge with [Processing](https://processing.org/) sketches, [openFrameworks](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites or iOS/Android games.
 
 ## What does this book cover?
 
@@ -38,11 +38,11 @@ Not much! If you have a modern browser that can do WebGL (like Chrome, Firefox o
 
 Alternatively, based on what you have or what you need from this book you can:
 
-- [Make a off-line version of this book](../90/)
+- [Make a off-line version of this book](http://thebookofshaders.com/appendix/index.html#00.md)
 
-- [Run the examples on a RaspberryPi without a browser](../91/)
+- [Run the examples on a RaspberryPi without a browser](http://thebookofshaders.com/appendix/index.html#01.md)
 
-- [Make a PDF of the book to print](../92/)
+- [Make a PDF of the book to print](http://thebookofshaders.com/appendix/index.html#02.md)
 
 - Use the [on-line repository](https://github.com/patriciogonzalezvivo/thebookofshaders) to help resolve issues and share code.
 

01/README.md

@@ -39,10 +39,10 @@ GLSL stands for openGL Shading Language, which is the specific standard of shade
 
 ## Why are Shaders famously painful?
 
-As Uncle Ben said “with great power comes great responsibility,” and parallel computation follows this rule; the powerful architectural design of the GPU comes with its own constrains and restrictions. 
+As Uncle Ben said “with great power comes great responsibility,” and parallel computation follows this rule; the powerful architectural design of the GPU comes with its own constraints and restrictions. 
 
 In order to run in parallel every pipe, or thread, has to be independent from every other thread. We say the threads are *blind* to what the rest of the threads are doing. This restriction implies that all data must flow in the same direction. So it’s impossible to check the result of another thread, modify the input data, or pass the outcome of a thread into another thread. Allowing thread-to-thread communications puts the integrity of the data at risk.
 
-Also the GPU keeps the parallel micro-processor (the pipes) constantly busy; as soon as they get free they receive new information to processes. It's impossible for a thread to know what it was doing in the previous moment. It could be drawing a button from the UI of the operating system, then rendering a portion of sky in a game, then displaying the text of an email. Each thread is not just **blind** but also **memoryless**. Besides the abstraction require to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers.
+Also the GPU keeps the parallel micro-processor (the pipes) constantly busy; as soon as they get free they receive new information to process. It's impossible for a thread to know what it was doing in the previous moment. It could be drawing a button from the UI of the operating system, then rendering a portion of sky in a game, then displaying the text of an email. Each thread is not just **blind** but also **memoryless**. Besides the abstraction required to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers.
 
 Don't worry! In the following chapters, we will learn step-by-step how to go from simple to advanced shading computations. If you are reading this with a modern browser, you will appreciate playing with the interactive examples. So let's not delay the fun any longer and press *Next >>* to jump into the code!

02/README.md

@@ -18,7 +18,7 @@ Although these simple lines of code don't look like a lot, we can infer substant
 
 4. If we look closely to the ```vec4``` type we can infer that the four arguments respond to the RED, GREEN, BLUE and ALPHA channels. Also we can see that these values are *normalized*, which means they go from ```0.0``` to ```1.0```. Later, we will learn how normalizing values makes it easier to *map* values between variables. 
 
-5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to ```#define``` global variables and do some basic conditional operation ( with ```#ifdef``` and ```#endif```). All the macro comands begin with a hastag (```#```). Pre-compilation happens right before compiling and copies all the calls to ```#defines``` and check ```#ifdef``` (is defined) and ```#ifndef``` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if ```GL_ES``` is defined, which mostly happens when the code is compiled on mobile devices and browsers.
+5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to ```#define``` global variables and do some basic conditional operation ( with ```#ifdef``` and ```#endif```). All the macro comands begin with a hashtag (```#```). Pre-compilation happens right before compiling and copies all the calls to ```#defines``` and check ```#ifdef``` (is defined) and ```#ifndef``` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if ```GL_ES``` is defined, which mostly happens when the code is compiled on mobile devices and browsers.
 
 6. Float types are vital in shaders, so the level of *precision* is crucial. Lower precision means faster rendering, but on behalf of quality. You can be picky and specify the precision of each variable that uses floating point. In the first line (```precision mediump float;```) we are setting all floats to medium precision. But we can choose to set them to low (```precision lowp float;```) or high (```precision highp float;```).
 

04/README.md

@@ -113,7 +113,7 @@ void draw() {
 }
 ```
 
-In the order for the shader to work, you need to add the following line at the beginning of your shader: ```#define PROCESSING_COLOR_SHADER```. So in Processing a shader looks like this:
+In the order for the shader to work on versions previus to 2.1, you need to add the following line at the beginning of your shader: ```#define PROCESSING_COLOR_SHADER```. So it looks like this:
 ```glsl
 #ifdef GL_ES
 precision mediump float;

05/cubicpulse.frag

@@ -15,9 +15,9 @@ float cubicPulse( float c, float w, float x ){
     return 1.0 - x*x*(3.0-2.0*x);
 }
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.02, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.02, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/expo.frag

@@ -8,9 +8,9 @@ uniform vec2 u_resolution;
 uniform vec2 u_mouse;
 uniform float u_time;
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/expstep.frag

@@ -12,9 +12,9 @@ float expStep( float x, float k, float n ){
     return exp( -k*pow(x,n) );
 }
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/impulse.frag

@@ -13,9 +13,9 @@ float impulse( float k, float x ){
     return h*exp(1.0-h);
 }
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/linear.frag

@@ -7,9 +7,9 @@ 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.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/parabola.frag

@@ -11,9 +11,9 @@ float parabola( float x, float k ){
     return pow( 4.0*x*(1.0-x), k );
 }
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/pcurve.frag

@@ -13,9 +13,9 @@ float pcurve( float x, float a, float b ){
     return k * pow( x, a ) * pow( 1.0-x, b );
 }
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/smoothstep.frag

@@ -8,9 +8,9 @@ uniform vec2 u_resolution;
 uniform vec2 u_mouse;
 uniform float u_time;
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

05/step.frag

@@ -7,9 +7,9 @@ precision mediump float;
 uniform vec2 u_resolution;
 uniform float u_time;
 
-float plot(vec2 _st, float _pct){
-  return  smoothstep( _pct-0.01, _pct, _st.y) - 
-          smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+  return  smoothstep( pct-0.02, pct, st.y) - 
+          smoothstep( pct, pct+0.02, st.y);
 }
 
 void main() {

91/index.html

@@ -50,10 +50,10 @@ This is a gentle step-by-step guide through the abstract and complex universe of
     * Environmental-maps (spherical and cube)
     * Reflect and refract
 
-* Appendix 
-    * [How can I navigate this book offline?](90/)
-    * [How to use this book in a classroom with RaspberryPi?](91/)
-    * [How to print this book?](92/)
+* [Appendix](appendix/)
+    * [How can I navigate this book offline?](http://thebookofshaders.com/appendix/index.html#00.md)
+    * [How to use this book in a classroom with RaspberryPi?](http://thebookofshaders.com/appendix/index.html#01.md)
+    * [How to print this book?](http://thebookofshaders.com/appendix/index.html#02.md)
 
 ## About the Author
 

92/index.html

@@ -1,5 +1,3 @@
-# APENDIX
-
 ## How can I navigate this book off-line?
 
 Let’s say you have a long trip and you want to use it to teach yourself some shaders. In that case you can make a local copy of this book on your computer and run a local server.

README.md

@@ -0,0 +1,7 @@
+# Appendix
+
+* [How can I navigate this book off-line?](http://thebookofshaders.com/appendix/index.html#00.md)
+
+* [How to use this book in a classroom with RaspberryPi?](http://thebookofshaders.com/appendix/index.html#01.md)
+
+* [How to print this book?](http://thebookofshaders.com/appendix/index.html#02.md)