Filter LowPass
Apply a p5.LowPass filter to a p5.SoundFile. Visualize the sound with FFT. Map mouseX to the the filter's cutoff frequency and mouseY to resonance/width of the a BandPass filter *
To run this example locally, you will need the p5.sound library a sound file, and a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
let soundFile;
let fft;
let filter, filterFreq, filterRes;
function preload() {
soundFormats('mp3', 'ogg');
soundFile = loadSound('assets/beat');
}
function setup() {
createCanvas(710, 256);
fill(255, 40, 255);
// loop the sound file
soundFile.loop();
filter = new p5.LowPass();
// Disconnect soundfile from master output.
// Then, connect it to the filter, so that we only hear the filtered sound
soundFile.disconnect();
soundFile.connect(filter);
fft = new p5.FFT();
}
function draw() {
background(30);
// Map mouseX to a the cutoff frequency from the lowest
// frequency (10Hz) to the highest (22050Hz) that humans can hear
filterFreq = map(mouseX, 0, width, 10, 22050);
// Map mouseY to resonance (volume boost) at the cutoff frequency
filterRes = map(mouseY, 0, height, 15, 5);
// set filter parameters
filter.set(filterFreq, filterRes);
// Draw every value in the FFT spectrum analysis where
// x = lowest (10Hz) to highest (22050Hz) frequencies,
// h = energy (amplitude / volume) at that frequency
let spectrum = fft.analyze();
noStroke();
for (let i = 0; i < spectrum.length; i++) {
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);
}
}
