We didn’t talk much about GLSL vectors, before going further Lets learn more about the variable types that we will use to store colors, three dimensional vector (```vec3```) or fourth dimensional (```vec4```) (if you are using an alpha channel).
We didn’t talk much about GLSL vectors. Before going further is important to learn more about these variable types that you will use to store colors.
If you are familiar with object oriented programming paradigms you had notice that we have been accessing the data inside the vectors like any regular C ```struct```.
@ -50,18 +48,19 @@ If you have a background on design or new media, you are probably used to pickin
vec4({{rn}},{{gn}},{{bn}},1.0)
```
### Mix function
### Mixing color
This GLSL native function will let you mix two variables by percentages. The percentage is define with a floating number between 0.0 and 1.0 while the variables can be any variable type including vectors. Actually all the functions have seen until now works with ```float```, ```vec2```, ```vec3``` and ```vec4```.
Now that we know how colors could be define is time to integrate this with our previus knowladege. There is a little happy function that let you mix two values a percentage, it's name is ```mix()```. Can you imagen what's the percentage range? Yes, between 0.0 and 1.0! Which is perfect, because you now have all this knowlage about shaping functions. Our time working on the fense is paying off.
Check the following code at line 18 and see how we are using the absolute values of a sin wave over time to mix ```colorA``` and ```colorB```.
<divclass="codeAndCanvas"data="mix.frag"></div>
Mix can be use with any of the types we have seen so far: ```float```, ```vec2```, ```vec3``` and ```vec4```.
### Playing with gradients
But the ```mix``` function have more to offer. If in the third argument we pass a ```vec3``` instead of a single ```float``` we will be hable to control the transition bettween colors by individual channel.
The ```mix``` function have more to offer. If in the third argument we pass a ```vec3``` instead of a single ```float``` we will be hable to control the transition bettween colors by individual channel.
Take a look to the following example.
@ -69,9 +68,9 @@ Take a look to the following example.
Similarly to the examples on the previus chapter we are hooking the transition to the normalized *x* coordinate and visualizing it with a line. You can see how all channels goes a long together.
Now, uncoment line number 24 and see what happens. Then try the lines 25 and 26. Remember that the lines visualize the amount ```colorA``` and ```colorB``` to mix per channel.
Now, uncoment line number 25 and see what happens. Then try the lines 26 and 27. Remember that the lines visualize the amount ```colorA``` and ```colorB``` to mix per channel.
You probably recognice the three shaping functions we are using in lines 25 to 26. Play with them! Is time for you to explore and show of your skills learned on the previus chapter and make interesting gradient. Try the following excersices:
You probably recognice the three shaping functions we are using in lines 25 to 27. Play with them! Is time for you to explore and show of your skills learned on the previus chapter and make interesting gradient. Try the following excersices:
@ -79,7 +78,7 @@ You probably recognice the three shaping functions we are using in lines 25 to 2
* Animate a transition between a sunrise and sunset using ```u_time```.
* Can you make rainbow just using what we have learn until now?
* Can you make a rainbow just using what we have learn until now?
* Using ```step()``` function create a procedural flag.
@ -87,25 +86,23 @@ You probably recognice the three shaping functions we are using in lines 25 to 2
Is hard to bring the subject of color with out speaking about color space. As you probably know there are different ways to organize color beside by red, green and blue channel.
[HSB](http://en.wikipedia.org/wiki/HSL_and_HSV) stands for Hue, Saturation and Brightness (or Value) and is a more intuitive and useful organization of colors. Take a moment to read the ```rgb2hsv()``` and ```hsv2rgb()``` functions on the following code.
[HSB](http://en.wikipedia.org/wiki/HSL_and_HSV) stands for Hue, Saturation and Brightness (or Value) and is a more intuitive and useful organization of colors. Take a moment to read the ```rgb2hsv()``` and ```hsv2rgb()``` functions on the following code.
<divclass="codeAndCanvas"data="hsv.frag"></div>
By mapping the position on the x axis to the Hue and the brightness to the length we can obtain a bigger and clear spectrum of visible colors than before. This spacial translation of of color was relatively easy because both pairs of variables (the x and y and the hue and brightness) have a identical range from 0.0 to 1.0.
Similarly to last mix example this functions plays with the interpolation of the diferent chapters to map it acording to hue.
Let’s stop for a second and look deeply to the functions, we will see that both of them receive and returns ```vec3``` variables. Also we will notice the arguments are define as ```in```. This is call variable [qualifier](http://www.shaderific.com/glsl-qualifiers/#inputqualifier) and in this case specify this variable as read only. In future examples we will see that also possible to define them variables as ```out``` or ```inout```.
By mapping the position on the x axis to the Hue and the brightness to the length we can obtain that nice spectrum of visible colors. This spacial distribution of color can be very handy becase, une more time, share the range between 0.0 to 1.0.
```glsl
int newFunction(in vec4 aVec4, // read-only
out vec3 aVec3, // write-only
inout int aInt); // read-write
```
This HSB is particularly intuitive for understanding color composition, while give as extraordinary control of our values. Reason why is the default choose for color pickers user interface.
Back to HSB, this color space is particularly clear and intuitive for understanding of color composition, while give as extraordinary good control to set our color values. Reason why is the default choose for color pickers user interface.
### HSB in polar coordinates
HSB was originally designed to be represented on 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 viewport to the fragment coordinate. For that we will use the ```atan(y,x)``` (which is the GLSL version of ```atan2(y,x)```) and the ```length()``` function. This last one could sound tricky but ```vec2```, ```vec3``` and ```vec4``` are nothing but regular vectors in two, three and four dimensions. There is no reason why we couldn’t do typical vectorial and trigonometrical operations, in fact the flexibility of treating colors and vectors and vectors and colors is the main game of Shaders.
HSB was originally designed to be represented on 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 viewport to the fragment coordinate. For that we will use the ```atan(y,x)``` (which is the GLSL version of ```atan2(y,x)```) and the ```length()``` function.
There are more geometric functions beside [```length```](http://www.shaderific.com/glsl-functions/#length) like: [```distance()```](http://www.shaderific.com/glsl-functions/#distance), [```dot()```](http://www.shaderific.com/glsl-functions/#dotproduct), [```cross```](http://www.shaderific.com/glsl-functions/#crossproduct), [```normalize()```](http://www.shaderific.com/glsl-functions/#normalize), [```faceforward()```](http://www.shaderific.com/glsl-functions/#faceforward), [```reflect()```](http://www.shaderific.com/glsl-functions/#reflect) and [```refract()```](http://www.shaderific.com/glsl-functions/#refract). Also GLSL have special vector relational functions such as: [```lessThan()```](http://www.shaderific.com/glsl-functions/#lessthancomparison), [```lessThanEqual()```](http://www.shaderific.com/glsl-functions/#lessthanorequalcomparison), [```greaterThan()```](http://www.shaderific.com/glsl-functions/#greaterthancomparison) and [```greaterThanEqual()```](http://www.shaderific.com/glsl-functions/#greaterthanorequalcomparison).
Using vectorial and trigonometrical functions, could sound wierd in this content but ```vec2```, ```vec3``` and ```vec4``` are nothing but vectors. We will start treat colors and vectors similarly, in fact you will find very enpowering this conceptual flexibility couldbe.
If you where wondering, there are more geometric functions beside [```length```](http://www.shaderific.com/glsl-functions/#length) like: [```distance()```](http://www.shaderific.com/glsl-functions/#distance), [```dot()```](http://www.shaderific.com/glsl-functions/#dotproduct), [```cross```](http://www.shaderific.com/glsl-functions/#crossproduct), [```normalize()```](http://www.shaderific.com/glsl-functions/#normalize), [```faceforward()```](http://www.shaderific.com/glsl-functions/#faceforward), [```reflect()```](http://www.shaderific.com/glsl-functions/#reflect) and [```refract()```](http://www.shaderific.com/glsl-functions/#refract). Also GLSL have special vector relational functions such as: [```lessThan()```](http://www.shaderific.com/glsl-functions/#lessthancomparison), [```lessThanEqual()```](http://www.shaderific.com/glsl-functions/#lessthanorequalcomparison), [```greaterThan()```](http://www.shaderific.com/glsl-functions/#greaterthancomparison) and [```greaterThanEqual()```](http://www.shaderific.com/glsl-functions/#greaterthanorequalcomparison).
Once we obtain the angle and the length we need to “normalize” their values to the docile range between 0.0 to 1.0 we are used to. On line 42, ```atan(x,y)``` 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 on the top of the code) to get values between -0.5 to 0.5 which by a simple addition we can accommodate to the desired range of 0.0 to 1.0. The radius in other hand will return a maximum of 0.5 (because we are calculatin the distance form the center of the viewport) so we need to extend this range to it double (by multiplying by two) to get a maximum of 1.0.
@ -126,6 +123,17 @@ By this time will not be a problem to try the following excersises
#### Note about functions and arguments
Let’s stop and go back to look deeply to the functions, we will see that both of them receive and returns ```vec3``` variables. Also we will notice the arguments are define as ```in```. This is call variable [qualifier](http://www.shaderific.com/glsl-qualifiers/#inputqualifier) and in this case specify this variable as read only. In future examples we will see that also possible to define them variables as ```out``` or ```inout```.
```glsl
int newFunction(in vec4 aVec4, // read-only
out vec3 aVec3, // write-only
inout int aInt); // read-write
```
You may not belive it, but now we have all the elements to make cool drawings. On the next chapter we will learn how to use all the tricks we have learn to makes geometric forms by *blending* the space. Yep... *blending* the space.
Patricio Gonzalez Vivo
10 years ago