The other day I talked to a friend, that is interested in coding and a generally very creative person. She recently did a coding boot camp and learned some JavaScript there.
Because of her interest in art and coding, I thought she might like the Processing language, because it’s intended to serve as an easy entry point into coding and programmatic art for people without a computer science background. And also, because I used it before I thought, I might be able to show her around.
So when I went to processing.org, to show her the project, I noticed that there was a variant that used JavaScript as basis, which tied in well with what she already knows.
The Sketch
To demonstrate what you can do with it, I built a small example sketch, that lets you click, or drag to draw lines, that change color and wriggle around. You can see and use the sketch in the frame below.
Randomness
To generate art, often we need randomness. In my sketch, for example, the lines move randomly, and they change color randomly. On the other hand, we want the random changes to be continuous and smooth, not sharp and noticeable. If we just get a random number in the interval [0, 255], we could use it in conjunction with two more such random numbers to generate a color value. The problem is that we could change from e.g. a light blue to a dark brown every time we generate the numbers. But we don’t want that. We want the light blue to gradually change to brown and not jump abruptly.
There are different ways to solve this problem, for example you could generate a random number in [-1, 1] and add it to the previous color value. That works, but you have to make sure you don’t exceed the maximum of 255 and don’t fall under 0 for your color value.
Perlin Noise
Another way to get randomness, that satisfies our need for gradual changes, is to use Perlin Noise. Strictly speaking Perlin Noise is not random, but deterministic, but so are PRNGs, which is what you usually get when you’re calling a function to get something ‘random’ back (for example when you use Math.random() in JavaScript. Note the use of ‘pseudo’ in the docs).
Perlin Noise was invented by Ken Perlin in the 80s, while he was working on the motion picture Tron, and it is a great way to get “organic looking” randomness for your projects. He even got an Oscar for his idea.
It takes one or more numeric parameters, that you can view as coordinates in a landscape of randomness, and it returns a float in the interval [-1, 1], that gradually shifts when changing coordinates.
So equipped with this tool we have everything we need to use “nice” randomness. Have fun playing around with it!