<p>Noise is an indispensable tool for creative coding. We use it to generate all kinds of organic effects like clouds, landscapes and contours. Or to move and distort objects with a more lifelike behaviour.On the surface, noise appears to be simple to use but, there are so many layers to it. This post takes a deep dive into what noise is, its variants, how to use it on the web and its applications. And lot’s of examples. So many examples!What is noise?Imagine you want to move an object around the screen. Animators will use keyframes and tweens to describe the exact motion. Generative artists instead rely on algorithms.So what, something like math.random()?Not exactly. Randomness is just too unnatural. Look at that pink ball, bouncing all over the place. It’s nauseating 🥴What we need is a smoother, more organic randomness. That is what the noise function generates (the yellow ball). Much more aesthetically pleasing!Loading&#8230;This idea of organic randomness appears again and again in creative coding. For example, when generating textures, moving objects or distorting them. We often reach for the noise function.Generating noise on the webThere are two flavours of noise—Perlin and Simplex.Ken Perlin developed the first while working on Tron in the early 1980s and won an Oscar 🏆 for those special effects. He then improved on it with Simplex noise and made it a bit faster. I’ll focus on the latter and use the simplex-noise library for my examples.The noise function takes in a couple of inputs (which drive the output) and returns a value between -1 and 1. The output is a mix of Math.sin() and Math.random(). A random wave is how I would describe it.import SimplexNoise from &#8216;simplex-noise&#8217;; </p> <p>const simplex = new SimplexNoise();<br /> const y = simplex.noise2D(x * frequency, 0) * amplitude;The underlying mechanics are similar to how waves work. You can control how quickly or how much it oscillates by adjusting frequency and amplitude.Loading&#8230;Umm, noise… 2D, what’s happening here?Noise DimensionsThe noise algorithm can be implemented for multiple dimensions. Think of these as the number of inputs into the noise generator—two for 2D, three for 3D and so on.Which dimension you pick depends on what variables you want to drive the generator with. Let’s look at a few examples.💡 Starting here, each example is embedded in a source card. With links to the actual source code and, in some cases, variables you can tweak.Noise 1D — Wave MotionTechnically there is no noise1D. You can get 1D noise by passing in zero as the second argument to simplex.noise2D. Let’s say you want to move a ball with an organic-looking oscillating motion. Increment its x coordinate and use it to generate the y value.x += 0.1;<br /> y = simplex.noise2D(x * frequency, 0) * amplitude;Loading&#8230;Noise2D — Terrain GeneratorWe can turn a flat 2D plane into hilly terrain by moving its vertices in the z-direction. Use the x and y coordinates to generate the z location.And just like that, we have a terrain generator 🏔️z = simplex.noise2D(x * frequency, y * frequency) * amplitude;Loading&#8230;Noise3D — Vertex DisplacementYou’ve probably seen these distorted spheres in the wild. They are created by displacing the vertices of a sphere. Use the vertex coordinate (x, y, z) to generate the distortion amount. Then displace the vertex by it radially.const distortion =<br /> simplex.noise3D(x * frequency, y * frequency, z * frequency) * amplitude; </p> <p>newPosition = position.normalize().multiplyScalar(distortion);Loading&#8230;Noise4D — Animated DistortionWe can animate the distorted sphere by using 4D noise. The inputs will be the vertex coordinate (x, y, z) and time. This technique is used to create fireballs, amongst other things.const distortion =<br /> simplex.noise4D(<br /> x * frequency,<br /> y * frequency,<br /> z * frequency,<br /> time * frequency<br /> ) * amplitude; </p> <p>newPosition = position.normalize().multiplyScalar(distortion);Loading&#8230;Notice our use of amplitude in the above examples. It’s a handy way to scale the noise output to your application. You could also use interpolation to map the noise output to a specified range of your choice.Now that we have the basics down let’s look at a few more applications of noise.TexturesThe noise output for a 2D grid, with (x,y) coordinates, looks something like this: </p> <p> Generated using:for (let y = 0; y</p>