Anthony Mattox Interaction Design + Digital Art

Perlin noise is a pseudo-random gradient texture, developed by Ken Perlin beginning with his work on the 1982 movie Tron. It continues to be a great tool to create textures and dynamic elements. The function generates a continuous string of values in any number of dimensions. Although it was initially developed to build textures it can be very useful for many other things such as particle motion. Noise is generated by a series oscillations over a variety of frequencies, similar to an audio signal.

Processing supports Perlin noise in up to three dimensions and can be implemented by calling the noise function with the parameters for the coordinate. I’ve been playing with using Three dimensional noise to create an animated force field or flow field in which particles move and thought I’d build a little tutorial to demonstrate some useful applications.

Above we have examples of two and three dimensional noise. The two dimensional is actually a 2d slice of 3d noise. The third is projected across time to create an animated texture. This is done simply by having a variable incrementing each frame which is passed in as the Z values.

float age;

void setup() {
  size(350,350);
  age=0;
  noiseDetail(6,.4);
}

void draw() {
  background(255);
  age+=.02;
  for (float x=0; x<=width; x++) {
    for (float y=0; y<=height; y++) {
      stroke(noise(x/200,y/200,age)*255);
      point(x,y);
    }
  }
}

Two nested loops create a virtual grid of data. For each x and y coordinate representing a pixel the noise is calculated and drawn. This requires two scalings. First the coordinates are scaled down when the values are calculated to get a smoother result. The more zoomed into the noise grid the smoother the output will be. The function then returns a value between 0 and 1 which must be scaled back up to a full color range.

This is a basic animated noise structure which could be applied to any more complicated system. In the particle systems I’ve been working with two overlapping noise grids (really just two sections of the same) represent the x and y forces across the screen or the magnitude and direction of the force. The latter is better, but takes a little trigonometry and more processor power. In addition to interparticle forces, each particle is pushed based on it’s position within this field. This creates very interesting textures, especially if particles have varied weights and are effected differently.

import processing.opengl.*;

void setup() {
  size(350,350,OPENGL);
  noiseDetail(6,.7);
  noStroke();
}

void draw() {
  translate(width/2,height/2);
  background(255);
  for (float x=0; x<=10; x++) {
    for (float y=0; y<=10; y++) {
      for (float z=0; z<=10; z++) {
        float n=noise(x/3,y/3,z/3)-.65;
        if (n>0) {
          float r=n*25;
          fill(0,n*255);
          pushMatrix();
          translate((x-5)*20,(y-5)*20,(z-5)*20);
          box(r,r,r);
          popMatrix();
        }
      }
    }
  }
}

3d Noise is more or less the same. Adding another for loop allows us to plot three dimensions. Here each point is represented by a cube scaled and filled based on the three dimensional noise, which is tweaked to get the most useful results. The loops may not be necessary in many applications where noise(x,y,z); can be called whenever at necessary coordinates, but they provide a visual of the full grid.

It is important to understand that the Perlin Noise field will remain the same as the program is run unless noiseSeed(int); is called, and although these examples show a finite grid, the values extend infinitely and remain continuous at any scale. The Seed is randomized when the program initializes but to work with the same noise it can be called with a specific integer, or a function like the one below can be used to generate a new set of values.

void mousePressed() {
  noiseSeed(int(random(1000)));
}

And that’s all I know about noise. Hooray and good luck.

Ken Perlin has some nice information put together if you’d like some more information on the development and the inner workings if his program.