The official launch of the site will take place soon. Stay tuned.

Chaos vs control

Natural randomness

In everyday life, people have always tried to avoid chaos to establish order. This is not the case in generated art. We as creators welcome chaos with open arms. Chaos and chance are now our ally. Nature is the kingdom of harmony between chaos and order. Many phenomena in nature are completely subordinated to chance and thus chaos. We, like nature, will use this chaos to our advantage.

Let’s take a look at how randomness works in code, what algorithms we can use, and when it works better than another. Randomness is a complete science in the world of computers and programming. Why is randomness so important? Well, let’s just say that the security of our money, banking transactions and our privacy is fully in the hands of randomly generated numbers with an enormous level of entropy.

Randomness in code

In code today we can achieve a certain level of randomness, but it is always a so-called pseudo-random generation of numbers. The point is that once the algorithm for generating random numbers is written by humans, it is possible to repeat and decode it, ie misuse. For our purposes, however, it is more than enough for us. We will use several algorithms to generate random numbers that will serve as a source of chaos in our creations. In the JavaScript language, browsers and operating systems have a built-in random number generator that generates more or less evenly random numbers. This uniformity comes mainly by the fact that the algorithm does not prefer any end of the range of the number series. Therefore, if we generate enough random numbers in the range from 1 to 100, they will be approximately evenly distributed. This may come in handy sometimes, but other times we need a different distribution of the generated numbers. In the p5js environment we have the following options:

  • random - a random number with even distribution
  • noise - Perlin Noise random number with more naturally ordered harmonic numbers in n-dimensional space (1D, 2D, 3D, nD)
  • gausian random - a random number within a Gaussian or normal distribution

Let's generate some random numbers

In this example we will create a random number within a range of 0 to 100.

let x = random(100);

The number we get is from range 0 to (but not including) 100. If we need a number within different range we can specify it by using this code:

let x = random(10, 100);
let y = random(-100, 100);

In return value of random(from, to) we always get a real number with floating decimal point. The range we use can be in a full scope of the real numbers so, from -minValue to maxValue.

In this example we will visualize the random algorithm. We will generate a set of random numbers to use them to draw vertical lines like a bar chart. Each line will use generated number to determine its length.
See the code bellow

function setup(){
  createCanvas(800, 400);
  stroke("red");
  for(let i = 0; i < 800; i += 5){
    line(i, 400, i, 400 - random(400));
  }
}

which produces this output

Now see the difference between random and noise in the next example.
See the code bellow

let offset = 0;

function setup(){
  createCanvas(800, 400);
  stroke("red");
  for(let i = 0; i < 800; i += 5){
    line(i, 400, i, 400 - noise(offset) * 400);
    offset += 0.01;
  }
}

which produces this output