Randomization
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.
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.
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.
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.
You can manipulate the octaves and falloff via the noiseDetail function.
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.
Here’s a more complex example where we draw an iceberg-like shape with perlin noise.
