Getting Creative with Perlin Noise Fields · Sighack

Getting Creative with Perlin Noise Fields | Sighack

Back to Home

Sighack

My Explorations with Generative Art

Getting Creative with Perlin Noise Fields

January 3, 2018-->

Share this page

Twitter<br>Facebook<br>Google+

TL;DR: I made twenty five different designs using only Perlin flow fields, a simple generative algorithm. Scroll down to see the results.

All Processing code for this article, along with images and animated GIFs, can be found on Github

In little gaps of time when I’m trying to unwind from my PhD work, I have a hobby of making generative art. Seeing interesting images appear within a short time using simple algorithms provides a refreshing change from my academic work where one ends up working for months or years on a project before seeing any success.

On a boring weekend in December last year, I decided to set myself a fun challenge: pick a simple generative process to simulate and attempt to make as many different variations as I can by just playing with the various available parameters.

The algorithm I picked was perlin noise fields, the movement of particles on a canvas based on a simple force field created using Perlin noise. I built a handful of simple classes in Processing to help me quickly iterate on ideas and I was off.

This post details what I came up with along with some lessons learnt. In particular, this challenge has been helpful in understanding how to actively practice creativity using self-imposed constraints.

Perlin Noise Fields: A Brief Overview

The idea behind Perlin noise fields is quite simple. (Note: they are sometimes referred to as perlin flow fields or vector fields)

Think of the canvas as a two-dimensional force field. Each point on the canvas is assigned a direction in which it’s “force” redirects particles.

So for example, by assigning random directions of force for every point on the canvas, we might end up with the following.

Now, to give a more organic feel to the randomness, Perlin noise is used instead in determining the directions of forces. Adrian Biagioli has a great writeup explaining how Perlin noise works in detail. Using Perlin noise, what we end up with is something along these lines.

As you can see, the directions have a much smoother feel compared to jarring changes in the random version.

With this in place, the next step is to release some particles onto the canvas and simulate their movement as effected by the underlying forces.

That’s it! Like I said, it’s pretty simple.

For this exercise, I added some basic classes to help me organize the code better. Primarily, I wanted to be able to define particle sets, each containing one or more particles and associated with a custom drawing function. I also implemented classes to help me layer particle sets. That way I can have a sequence of layers which are drawn on the canvas one after the other, and a layer is finished only when all particle sets assigned to a given layer have been simulated a certain number of steps.

The Iterations

Click on the images below to see an animation of the process. WARNING: in case you’re viewing this on your mobile data, some of the GIFs are fairly large!

I first started with the low hanging fruit. A white background with many low-opacity black particles results in the following, where the areas attracting more particles end up being darker.

Iteration 1

Just out of curiosity, I decided to flip the colors; a black background with white streaks of different thicknesses across it. The result was more interesting with a greater sense of depth.

Iteration 2

Going off that sense of depth, I decided to throw in some colors. Hand-picking a palette of purples, I layered multiple sets of particles, going from darker to lighter. The result was unexpectedly beautiful!

Iteration 3

Unexpectedly, just after three variations, I already felt like I was out of ideas on where to take things next. I put aside the thought and played around with varying the line thickness and used a very low opacity (1%) for the particles. The result was quite pleasing, with the gray color almost appearing out of nowhere!

Iteration 4

While playing around with the different line parameters, completely by chance, I happened to change the stroke cap for the lines to square instead of the default round one. To my surprise, it introduced a whole new texture to the image, like a charcoal pencil on rough paper.

I wanted to get some color in there and so I started looking for a way to procedurally generate a pleasing set of colors. I ended up finding this great article on generating colors, and used the golden ratio color generator described there. Again, the result was spectacular!

Iteration 5

I decided to keep the procedural colors and decided to explore other shapes; instead of drawing lines, I switched to drawing arcs instead. Again, the result is completely different!

Iteration 6

I noticed that the golden-ratio based color generator...