thebookofshaders/11/README.md

![NASA / WMAP science team](mcb.jpg)

## Noise

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!

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 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.

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*.

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). 

<div class="simpleFunction" data="
float i = floor(x);  // integer
float f = fract(x);  // fraction
y = rand(i);
//y = mix(rand(i), rand(i + 1.0), f);
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
"></div>

By uncomenting 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. 

```glsl
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
```

You will find in other implementations that people use cubic curves ( like the following formula) instead of using a ```smoothstep()```.

```glsl
float u = f * f * (3.0 - 2.0 * f );
y = mix(rand(i), rand(i + 1.0), u);
```

## 2D Noise

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).

<div class="codeAndCanvas" data="2d-noise.frag"></div>

At this point you can recognice 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.

## Using 2D Noise

Time recapitulate, refresh some of the previus knowladge and jump foward. 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).
* A matrix to rotate the line pattern (line 37-40 and 45)
* A 2d random function (line 12-16)
* A 2d noise function (line 20-35) 

<div class="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.

Wow! You really should be proud of your self. He have went from nothing to generating our own wood procedural texture!

Now is time for you to play with it:

* What do you thing it will happen if the patter looks like this:

```glsl
pattern = sin(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*3.14);
```

Or like this

```glsl
pattern = fract(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*2.0);
```

* 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.

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.