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

## 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");
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[0].rate(myNoise);
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)
}
}
```