In the previous chapter we learn how to make some shapes. We are already familiar with values between 0.0 and 1.0, and the trick to move the shapes we previusly work with is moving the coordinate system it self. We can achive that by simply adding a vector to the ```st``` variable that contain the normalized position of the coordinate of the fragment. By doing that the hole space coordinates move it self.
In the previous chapter we learned how to make some shapes - the trick to moving those shapes is to move the coordinate system itself. We can achieve that by simply adding a vector to the ```st``` variable that contains the location of each fragment. This causes the whole space coordinate system to move. This is easier to see than to explain, so to see for yourself:
* Uncomment line 33 of the above code to see how the space it self is shifted around.
Now try the following exercise:
* Using ```u_time``` together with the shaping functions move the small cross around in an interesting way. Search for a specify quality on motion you are interested on (recording something from the *"real world"* first could be useful). It could be the come and go of the waves, a pendulum movement, a bouncing ball, a car accelerating, a bicycle stoping.
* Using ```u_time``` together with the shaping functions move the small cross around in an interesting way. Search for a specific quality of motion you are interested in and try to make the cross move in the same way. Recording something from the "real world" first might be useful - it could be the coming and going of waves, a pendulum movement, a bouncing ball, a car accelerating, a bicycle stopping.
### Rotations
To rotate objects we also need to move the entire space system. For that we are going to use a [matrix](http://en.wikipedia.org/wiki/Matrix_%28mathematics%29). Matrixes are organized set of numbers in columns and rows, that are multiply by vectors following a precise set of rules, that modify the values of the vector in a particular way.
To rotate objects we also need to move the entire space system. For that we are going to use a [matrix](http://en.wikipedia.org/wiki/Matrix_%28mathematics%29). A matrix is an organized set of numbers in columns and rows. Vectors are multiplied by matrices following a precise set of rules in order to modify the values of the vector in a particular way.
GLSL have native support for two, three and four dimensional matrixes: [```mat2```](http://www.shaderific.com/glsl-types/#2x2floatingpointmatrix) (2x2), [```mat3```](http://www.shaderific.com/glsl-types/#3x3floatingpointmatrix) (3x3) and [```mat4```](4x4floatingpointmatrix) (4x4) together with a matrix specific functions ( [```matrixCompMult()```](http://www.shaderific.com/glsl-functions/#componentwisematrixmultiplication)) beside the multiplication (```*```) operator.
GLSL has native support for two, three and four dimensional matrices: [```mat2```](http://www.shaderific.com/glsl-types/#2x2floatingpointmatrix) (2x2), [```mat3```](http://www.shaderific.com/glsl-types/#3x3floatingpointmatrix) (3x3) and [```mat4```](4x4floatingpointmatrix) (4x4). GLSL also supports matrix multiplication (```*```) and a matrix specific function ([```matrixCompMult()```](http://www.shaderific.com/glsl-functions/#componentwisematrixmultiplication)).
Based on how matrixes behave is posible to construct matrixes that produces specific behaviur. For example we can use a matrix to translate a vector:
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:
More interestingly, we can use a matrix to rotate the coordinate system.
____it would be good to draw an example here____
More interestingly, we can use a matrix to rotate the coordinate system:
Take a look to the following code of a function that constructs a 2D rotation matrix. This function follows the above [formula](http://en.wikipedia.org/wiki/Rotation_matrix) that rotates the coordinates around the ```vec2(0.0)``` point.
Take a look at the following code for a function that constructs a 2D rotation matrix. This function follows the above [formula](http://en.wikipedia.org/wiki/Rotation_matrix) to rotate the coordinates around the ```vec2(0.0)``` point.
```glsl
mat2 rotate2d(float _angle){
@ -37,27 +39,29 @@ mat2 rotate2d(float _angle){
}
```
According to the way we have been drawing shapes this is not exactly what we want. Our cross shape is draw in the center of the canvas which correspond to the position ```vec2(0.5)```. So before we rotate the space we need to move shape from the `center` to the ```vec2(0.0)``` coordinate, then rotate the space to finally move it back to the original place.
According to the way we've been drawing shapes, this is not exactly what we want. Our cross shape is drawn in the center of the canvas which corresponds to the position ```vec2(0.5)```. So, before we rotate the space we need to move shape from the `center` to the ```vec2(0.0)``` coordinate, rotate the space, then finally move it back to the original place.
____comment the code below to show where you're doing the steps described above____
Note that we need to multiply the rotation matrix for the position vector to return a rotated vector which in our example is just the original position variable that we are over writing. If you want to rotate different elements in different proportions you need to “preserve” the original coordinate system by assigning another vector.
____This paragraph is straight-up impossible to understand and I don't think there's a way to write it well without another example, so consider adding another example or taking this paragraph out (I'm not editing it, so if you leave it in let me know and I'll edit it)____ Note that we need to multiply the rotation matrix for the position vector to return a rotated vector which in our example is just the original position variable that we are over writing. If you want to rotate different elements in different proportions you need to “preserve” the original coordinate system by assigning another vector.
Try the following excersices:
Try the following exercises:
* Uncomment line 40 of above code and pay atention to what happens.
* Uncomment line 42 of above code and pay attention to what happens.
* Comment the translations before and after the rotations on line 35 and 37 and observe the consecuences.
* Comment the translations before and after the rotation, on lines 37 and 39, and observe the consequences.
* Use rotations to improve the animation you simulate in the translation exercise.
* Use rotations to improve the animation you simulated in the translation exercise.
### Scale
So we saw how matrixes were use to translate and rotate object on space (more precise transform the coordinate system and by that rotate and move them). If you have use 3D modeling software or if you have use some push and pop matrix function in processing you will know that also matrixes can be use to scale the size of an object.
We've seen how matrices are used to translate and rotate objects in space. (Or more precisely to transform the coordinate system to rotate and move the objects.) If you've used 3D modeling software or the push and pop matrix functions in Processing, you will know that matrices can also be used to scale the size of an object.
Following the previus formula we can understand how to make a 2D scaling matrix.
Following the previous formula, we can figure out how to make a 2D scaling matrix:
Do the following excersises to understand deeply how it works
Try the following exercises to understand more deeply how this works.
* Uncommenting line 40 of above code to see the space coordinate being scale.
* Uncomment line 42 of above code to see the space coordinate being scaled.
* See what happens when you comment the translations before and after the scaling on line 35 and 37.
* See what happens when you comment the translations before and after the scaling on lines 37 and 39.
* Try combining a rotation matrix together with a scale matrix. Be aware that the order matters. Multiply the matrix first and at the end the vectors.
* Try combining a rotation matrix together with a scale matrix. Be aware that the order matters. Multiply by the matrix first and then multiply the vectors.
* Now that you know how to do draw different shapes, and move, rotate and scale them is time to make a nice composition. Design and construct a [fake UI or HUD (heads up display)](https://www.pinterest.com/patriciogonzv/huds/). Use the following ShaderToy example by [Ndel](https://www.shadertoy.com/user/ndel) as inspiration and reference.
* Now that you know how to draw different shapes, and move, rotate and scale them, it's time to make a nice composition. Design and construct a [fake UI or HUD (heads up display)](https://www.pinterest.com/patriciogonzv/huds/). Use the following ShaderToy example by [Ndel](https://www.shadertoy.com/user/ndel) for inspiration and reference.
[YUV](http://en.wikipedia.org/wiki/YUV) is a color space used for analog encoding of photos and videos that takes into account the range of human perception to reduce the bandwidth of chrominance components.
[YUV](http://en.wikipedia.org/wiki/YUV) is a color space use for analog encoding of photos and videos that use the range of human perception to reduce the bandwidth of chrominance components.
The following code is an interesting opportunity to use matrix operations in GLSL to transform colors from one mode to another.
The following code is an interesting opportunity to use [matrix](http://en.wikipedia.org/wiki/Matrix_(mathematics)) operations on GLSL to transform colors from one mode to the other one.
____add some comments to the code below to describe what you're doing____
<divclass="codeAndCanvas"data="yuv.frag"></div>
As you can see we are treating colors as vectors by multiplying them to matrices. In that way we “move” the values arround.
As you can see we are treating colors as vectors by multiplying them with matrices. In that way we “move” the values around.
____what have we learned in this chapter? what's coming next?____
datatelling
9 years ago