Here's a more interesting example of noise in action.
What happens if we increment it by a value more than or less than 0.01? Or even better, what if the increment value is itself controlled by a noise function! Try experimenting with this to get more intuition about how the noise function works. In this sketch, that is controlled by the last line, t = t + 0.01. There is a better way to do this though, as we will see later.Īs with the previous sketches, the smoothness of our movement depends on how fast we step through the noise field. By leaving that constant there as an offset, we ensure all of the values are different by moving them along different "regions" of the noise field. If we had simply used noise(t) for each of our five variables x, y, r, g, and b, they would have remained equal to each other at each point t - thus we'd always have a gray circle moving along the diagonal line y=x between (0, 0) and (width, height)! Try removing that constant and see that it does that. why did we add a constant number (5, 10, etc) to the t variable in each noise function? Recall that noise(x) always gives you the same output for any value of x, no matter how many times you call it in the same sketch. fade the background by giving it a low opacity Stepping through the noise field by very small amounts gives us very slow and smooth movement. Eventually, it is almost indistinguishable from pure randomness. By stepping through the argument in noise at increasingly larger amounts, the output becomes increasingly more erratic. As you move the mouse to the right, we increment the noise argument by larger amounts. At the same time, we increment the noise function by an amount which is controlled by the x-position of the mouse. Here we take the value of the noise function and map it to the y-position of a circle. To see this in more detail, see the sketch below. What happens if instead of going from 0 to 10, we go from 0 to 100 instead? Or 0 to 1? Notice the smaller the range of values we traverse, the more smooth our movement becomes.
Try changing the range of the argument to noise (nx). By riding a larger band, we get faster and more varied movement. This last property is the key that lets us create and control very interesting trajectories - by riding along a narrow band of noise, we get smooth continuous movement along an overall random path. So for example, noise(5) and noise(10) may give very different values, but noise(5) and noise(5.5) will probably be comparatively closer to each other, and noise(5) and noise(5.001) will be very close to each other. The second important thing is that we expect to get closer y-values for closer x-values inputted to noise(). So noise(5) will give us some value when we run it at some point during our sketch, and if we run noise(5) again later in the sketch, we will get the same value. The first is that unlike random(), noise() always gives us back the same value for the same arguments. There are two key characteristics to observe. noise(x) always gives us back a number between 0 and 1 - in this example, we scale it up by multiplying it by the height of the canvas, so the result is between 0 and height. In the above sketch, we are plotting y=noise(nx) between nx=0 and nx=10.