Perlin Noise

Perlin Noise

This week I explored manipulating sound in p5.js. I was curious to learn more about the concept of “Perlin noise” after discovering the stunning topographical visual effects it can produce.

While I have always understood that sound has textures, it never occurred to me that noise could be applied as a function in code to give graphics more organic yet random form. One might think of Perlin noise as a smoother algorithm of sorts, one that lends rhythm to the chaos of a randomness generator.

Perlin noise demonstrates how code

Similar to patterns in nature, such as clouds, terrain, or oceans,

t produces a naturally ordered (“smooth”) sequence of pseudo-random numbers. The graph below shows Perlin noise over time, with the x-axis representing time; note the smoothness of the curve.

ProcessingJS has a built-in implementation of the Perlin noise algorithm: the function noise(). The noise() function takes one, two, or three arguments, as noise is computed in one, two, or three dimensions. Let’s start by looking at one-dimensional noise.

Link to p5.js Sketch

A visualization of six different playback rates from a single sound sample over time.

Sound Sample

I used a free downloadable sound sample called “Lake Victoria” from the Sound of Picture library. Since it was a rather whimsical tune, I decided to mess around with visualizing different playback rates in my sketch based on the

p5.js Code

let sound = [];
let fft;
let spectrum;

// let button; 

function preload() {

  // Initialize sound 
  for (let i = 0; i < 6; i++) {
    sound[i] = loadSound("Curious_Mixdown.mp3");

  // button = 

function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < 6; i++) {

  fft = new p5.FFT();


function draw() {
  let spectrum = fft.analyze();
  background(255, 10);
  let perlin = noise(frameCount / 100)
  let myNoise = (perlin ** 2) * 4 - 2
  sound[1].rate(myNoise * -1);
  sound[2].rate(myNoise * 2 * -1);
  sound[3].rate(myNoise * 2);
  sound[4].rate(myNoise * 4 * -1);
  sound[5].rate(myNoise * 4);

  for (let i = 0; i < spectrum.length; i++) {
    stroke(map(perlin, 0, 1, 0, 255), map(perlin, 0, 1, 255, 0), random(255))
    let x = map(i, 0, spectrum.length, 0, width);
    let h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s