Random noise

I started to undestand what Generative Art is all about: generating randomness and moving it around, containing it, bending it to your will. You need to be a randomness hacker. A noise whisperer.

There are many ways you can use to vizualize noise: dots, lines, bars and wavy lines with stacked randomness.

Hint: The examples below are written in Javascript. Refresh the page multiple times to see different random results.

This is how pure random 2D noise looks like:

It’s pretty boring.

And the same pure randomness in the form of vertical lines:

It becomes a little more interesting when you stack multiple levels of randomness:

To control the positioning, you can use probability distribution functions that are more likely to generate numbers in a specific range, rather than uniformly distributed numbers.

The easiest way is to use power functions, either with exponent larger than 1, or smaller.
Smaller than 1 exponents generate smooth distributions because Math.random() generates numbers in the range 0…1.

In these two examples below, I’m aligning the noise to left or right by using Math.pow(Math.random(), 0.1) for the X axis:

And the same distribution, represented as lines:

A more popular way to distribute randomness is the Normal distribution, also called Gaussian or Laplace–Gauss) distribution. You can check different implementations at RosettaCode.org - Normal distribution. It concentrates the noise to make a soft 🔔"Bell curve" like this:

And the lines:

I wrote this post because a few months ago, I had no idea that these functions exist, let alone why they would be useful.

If you found this interesting, you can also check this similar article by Tyler Hobbs: Probability distributions for algorithmic artists.