When we talk about randomization in design, people often think about generative or algorithmic art, where an algorithm spins out of control and splatter thousands of random shapes on a canvas. This is not what this class is about.

Randomization in the arts

The concept of randomization has been an essential tool for graphic designers way before the computer. Although entirely done by hand, random positioning and coloring has been used to create expressive and dynamic designs for a long time. With the computer we have the ability to move beyond simple random shapes and create design systems that are entirely dynamic in nature – code that specifies certain parameters that the algorithm can play within, and where randomization helps create new and exciting outputs within the broader design constraints. In this way of designing, the designer becomes more of a director who sets up the basic constraints of the design, and where the algorithm renders an original design within these constraints every time it runs.

Dynamic logos, generative color schemes, and type systems are all possible because of the simple concept of letting the computer choose a number for you. The aim of this class is to introduce the basic concept of randomization, and to use it for aesthetically pleasing, good designs.

Randomization techniques

The following sketch shows how to use random() to make something happen only a certain percent of the time.

See example code

However, what if you want to do something a bit more sophisticated, like picking a random color from an array of colors, where each of the colors have a specific chance of getting picked? The following sketch shows how to do weighted randomness.

See example code

You can also use a library like seedrandom to have randomization, but have it always be the same random numbers.

Random color scheme example.

Perlin Noise

Here’s an example of how perlin noise is different than using random(). As you can see, the values are much more organic, though still random.

See example code

When you create a new Rune.Noise object, it will choose a random starting point for the noise. If you don’t want the seed to be random, you can use noiseSeed() to set a specific starting position for the noise. You can also call noiseSeed in between noise.get() calls, which will re-seed the noise and give you different values from the same input.

See example code

You can manipulate the octaves and falloff via the noiseDetail function.

See example code

Perlin Noise can be used to do many things. One of things that it’s great for is introducing a more organic feel into your sketches. Here’s a sketch with a circle drawn with Perlin Noise.

See example code

Here’s a more complex example where we draw an iceberg-like shape with perlin noise.


See example code