@ -67,9 +67,11 @@ Before the going forward, let’s use the simplicity of the rectangle as a train
* Make another function that just draw the outline of a rectangle.
* How do you think we can move and place different rectangles in a same billboard? If you figurate out how, show of your skills making a composition of rectangles and colors that resemble a [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko) painting.
* How do you think we can move and place different rectangles in a same billboard? If you figurate out how, show of your skills making a composition of rectangles and colors that resemble a [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) painting.
Break time! We have been playing with all this random functions that looks like TV white noise, our head is still spinning arround thinking on shaders, and our eyes are tired. Time to get out side and walk!
Break time! We have been playing with all this random functions that looks like TV white noise, our head is still spinning around thinking on shaders, and our eyes are tired. Time to get out side and walk!
We feel the air in our face, the sun in our nose and chicks. The world is such a vivid and rich places. Colors, textures, sounds. While we walk we can avoid notice the surface of the roads, rocks, trees and clouds. Sudently all seams random. But defenetly not the type of random we were making. The real world is such a rich place. How we can aproximate to this level of variarety computationally?
We feel the air in our face, the sun in our nose and chicks. The world is such a vivid and rich places. Colors, textures, sounds. While we walk we can avoid notice the surface of the roads, rocks, trees and clouds. Suddenly all seams random. But definitely not the type of random we were making. The real world is such a rich place. How we can approximate to this level of variety computationally?
We are on the same path of thoughts that Ken Perlin's walk through on 1982 when he was commisioned with the job of generating "more realistic" textures for a new disney movie call "Tron". In response to that he came up with an elegant *oscar winner* noise algorithm.
We are on the same path of thoughts that Ken Perlin's walk through on 1982 when he was commissioned with the job of generating "more realistic" textures for a new disney movie call "Tron". In response to that he came up with an elegant *oscar winner* noise algorithm.
The following is not the Perlin noise algorithm, but is a good starting point to start getting out head arround the idea of how to generate *noise* o *smooth random*.
The following is not the Perlin noise algorithm, but is a good starting point to start getting out head around the idea of how to generate *noise* o *smooth random*.
Look the following graph, is in escense what we where doing on line 36 and 37 on the last example of the previus chapter. We are computing the ```rand()``` of the integers of `x` (the `i` variable).
Look the following graph, is in essence what we where doing on line 36 and 37 on the last example of the previus chapter. We are computing the ```rand()``` of the integers of `x` (the `i` variable).
By uncomenting the following line, you can make a linear interpolation between the random value of an integer to the next one.
By uncommenting the following line, you can make a linear interpolation between the random value of an integer to the next one.
```glsl
y = mix(rand(i), rand(i + 1.0), f);
```
At this point we have learn that we can do better than a linear interpolation. Right? By uncomenting the following line, we will use the native ```smoothstep()``` to make a *smooth* transition between the previus random values.
At this point we have learn that we can do better than a linear interpolation. Right? By uncommenting the following line, we will use the native ```smoothstep()``` to make a *smooth* transition between the previous random values.
```glsl
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
Now that we understand how noise is made in one dimetion, is time to port it to two dimensions. Check how on the following code the interpolation (line 29) is made between the for coorners of a square (lines 22-25).
Now that we understand how noise is made in one demotion, is time to port it to two dimensions. Check how on the following code the interpolation (line 29) is made between the for corners of a square (lines 22-25).
At this point you can recognice what's going on at line 40. We are scaling and "moving" the space, right?
At this point you can recognize what's going on at line 40. We are scaling and "moving" the space, right?
Try:
* Change the multiplier. Try to animate it.
* At what level of zoom the noise start looking like random again?
* At what zoom level the noise is imperceptible.
* Change the u_time by the normalize values of the mouse coordinates.
* Now that you achieve some control over noise & chaos, is time to mix it with previous knowledge. Making a composition of rectangles, colors and noise that resemble some of the complexity of the texture of the following painting made by [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko).
## Using 2D Noise
Time recapitulate, refresh some of the previus knowladge and jump foward. In the following code you will find:
As we saw, noise was designed to give a natural *je ne sais quoi* to digital textures, and could be use to make convincing generative textures. Lets refresh some of the previous knowledge and then jump forward learning how to mix all the knowledge we have learn so far.
In the following code you will find:
* Shaping functions to create: random (line 13), noise (line 32) and a line pattern (line 46).
* A color gradient (line 68).
@ -68,7 +77,7 @@ Time recapitulate, refresh some of the previus knowladge and jump foward. In the
<divclass="codeAndCanvas"data="wood.frag"></div>
By uncommenting line 60 you will see the line pattern we are talking about.
Revealing line 63 you can see how we can alterate this pattern in a "natural-like" way, to then finally, uncommenting line 66 we can streach the noise pattern in *y* axis.
Revealing line 63 you can see how we can alternate this pattern in a "natural-like" way, to then finally, uncommenting line 66 we can stretch the noise pattern in *y* axis.
Wow! You really should be proud of your self. He have went from nothing to generating our own wood procedural texture!
* What other generative pattern can you make? What about granit? marble? magma? water?
* What about noise apply to motion? Go back to the Matrix chapter and use the translation example that move a the "+" arround to apply some *random* and *noise* movements to it.
* What other generative pattern can you make? What about granite? marble? magma? water?
* What about noise apply to motion? Go back to the Matrix chapter and use the translation example that move a the "+" around to apply some *random* and *noise* movements to it.
Nothing like having some control over the chaos and chances. Right?
Noise is one of those subjects that you can digg and alwyas find new exciting formulas. In fact, noise means different things for different people. Musicians will think in audio noise, comminicators into interference, and astrophysics on cosmic microwave background. On the next chapter we will use some related concepts from sign and audio behaviur to our noise function to explore more uses of noise.
Noise is one of those subjects that you can dig and always find new exciting formulas. In fact, noise means different things for different people. Musicians will think in audio noise, communicators into interference, and astrophysics on cosmic microwave background. On the next chapter we will use some related concepts from sign and audio behavior to our noise function to explore more uses of noise.
Patricio Gonzalez Vivo
10 years ago
