# 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. 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;

// Initialize sound
for (let i = 0; i < 6; i++) {
sound[i].amp(0.25)
}

// button =
}

function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 6; i++) {
sound[i].loop();
}

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.rate(myNoise);
sound.rate(myNoise * -1);
sound.rate(myNoise * 2 * -1);
sound.rate(myNoise * 2);
sound.rate(myNoise * 4 * -1);
sound.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)
}

}
```