Noise is an equation that can be used to make art with code. Here are a couple examples:
https://codepen.io/zimjs/pen/XWjrmoQ
https://codepen.io/zimjs/pen/LvGqgB
Noise is a random-like bumpy equation but if you zoom in on it then it gets smoother. We are using Simplex Noise - another common one is Perlin Noise.
1D NOISE
With 1D noise we can imagine a bumpy curve. You pass in one parameter - the position along the curve and you get back the height at that position as a number between -1 and 1. Sometime this is between 0 and 1. It does not matter... you can just multiply this by a factor to increase the range.
If we do this for ten positions, stepping by 5 each time, then we will get ten heights back. We can plot these to see the shape of the noise equation. Here is an plot with more than ten lines - this looks like NOISE - very random!
If we zoom in on the equation by stepping by 3 in position then the curve becomes smoother. You can try this here: https://codepen.io/zimjs/pen/KKKeGZg by adjusting the Dial at the top left.
Stepping by 1 each time might make it smoother still:
2D NOISE
With 2D Noise, we can look at it in two ways. The same as 1D noise but the second parameter moves us along the equation. For instance, here we see the same smoothness as above but we have changed the second parameter so the curve is farther along the equation:
OR - we can visualize 2D Noise as a wiggly plane where we get the height of the wiggly plane (between -1 and 1) at an x and y position.
If we take a cross section across this wiggly plane and turn any value greater than 0 to white and less than 0 to black (with a small blended range near 0) then we get the image above - although this has been repeated. And if we zoom out on that by taking inputs that are farther away from one another we start to see the familiar Noise pattern arising!
Or we can draw beautiful meshes:
These older examples can be found here: https://zimjs.com/noise but just be warned, the code is old ZIM.
3D NOISE
3D Noise allows us to pass in a third parameter and animate the 2D Noise patterns. If we change the third parameter by a large amount each time then the patterns will animate fast. If we pass in a smaller value each time for instance .01 then the patterns will animate slower. If we pass in -.01 they will go in reverse.
In the Bloob example at https://codepen.io/zimjs/pen/XWjrmoQ we use the first two parameters to get a value for the radius of the lines we are drawing. These are affected by the curve Dial (C) to determine how smooth the blob will look. The third parameter is the speed which can be controlled by the speed dial (S) and even go backwards - very cool!
CONTROL AND SEEDS
For any given seed, passing in the same values a second time will result in the same output. This might allow the user to pick a mountain range just based on a seed and for the app to replicate that mountain range based on one number! Amazing. All that data from just one seed number.
In the BLOOB example, we make the radius follow the Noise equation but somehow seamlessly loop it back around to the start. How do we do that? Firstly we use just one seed - this is often the case. Secondly, if you recall, for a given seed, the value is the same for the same inputs. So we need to start at a number and then arrive back at the same number. Using inputs from a periodic function will give us this.
So, we can use the SINE function. Unfortunately, as the sine goes up, it has the same value coming down and this gives us a symmetrical blob about the vertical axis. So we can pass a SINE in for one parameter and a COSINE in for another parameter and these both come back to the same number and has the effect of circling around the wiggly plane getting heights as we go and arriving back at the start!
If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.
Top comments (1)
Just re-read the title... I did not mean to sound pompous - I meant it that it has taken me years to finally say that I think I understand noise at last! ;-). I have had inklings along the way.