Effects & Filters — iHearYouCanCode

Haven't set things up yet? Do Getting Started first — it shows you how to add p5.js, p5.sound, and ProControls.

1. Low pass filter on a square wave

A low pass filter lets low frequencies through and cuts the high ones. The cutoff frequency is the point where it starts cutting — everything above it fades out. A square wave is a great sound to filter because it's naturally bright and buzzy, so the effect of the filter is very obvious. Move the mouse left and right to sweep the cutoff up and down — all the way left is a dull thud, all the way right is the full harsh buzz. Click the canvas to start and stop.

Try editing the code — the preview updates as you type

var osc, filter;
var playing = false;

function setup() {
  createCanvas(300, 300);
  osc = new p5.Oscillator('square');
  osc.freq(110);
  osc.amp(0.5);

  filter = new p5.LowPass();
  osc.disconnect();
  osc.connect(filter);
}

function mousePressed() {
  userStartAudio();
  if (playing) {
    osc.stop();
    playing = false;
  } else {
    osc.start();
    playing = true;
  }
}

function draw() {
  background(30);

  var cutoff = map(mouseX, 0, width, 50, 10000);
  filter.freq(cutoff);

  fill(136, 170, 204);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(13);
  text(playing ? 'Move mouse to sweep filter' : 'Click to start', width / 2, height / 2 - 10);

  textSize(11);
  text('Cutoff: ' + round(cutoff) + ' Hz', width / 2, height / 2 + 14);
}

How it works

osc.disconnect() stops the oscillator from going straight to the speakers. osc.connect(filter) routes the signal through the filter first — the filter then sends its output to the speakers. This is called a signal chain: oscillator → filter → output. filter.freq(cutoff) sets the cutoff point each frame, and since mouseX changes as you move, the filter sweeps in real time.

2. Delay effect on a drum sample

A delay records the incoming sound and plays it back after a short pause — creating an echo. Feed it back into itself and you get repeating echoes that fade out over time. Two parameters control everything: delay time (how long between echoes) and feedback (how much of the echo feeds back for another repeat). Click to hit the drum, then move the mouse — left/right changes the echo timing, up/down changes how many times it repeats.

Try editing the code — the preview updates as you type

var drum, delay;
var SOUND_URL = '/assets/superdirt/000_BD.wav';

function preload() {
  drum = loadSound(SOUND_URL);
}

function setup() {
  createCanvas(300, 300);
  delay = new p5.Delay();
  delay.process(drum, 0.25, 0.5, 2300);
}

function mousePressed() {
  userStartAudio();
  if (drum.isLoaded()) drum.play();
}

function draw() {
  background(30);

  var delayTime = map(mouseX, 0, width,  0.05, 0.75);
  var feedback  = map(mouseY, height, 0, 0.0,  0.85);
  delay.delayTime(delayTime);
  delay.feedback(feedback);

  fill(136, 170, 204);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(13);
  text('Click to hit the drum', width / 2, height / 2 - 20);
  textSize(11);
  text('delay: ' + delayTime.toFixed(2) + 's', width / 2, height / 2 + 8);
  text('feedback: ' + feedback.toFixed(2), width / 2, height / 2 + 24);
}

How it works

delay.process(drum, 0.25, 0.5, 2300) wires the drum into the delay and sets starting values: 0.25 seconds between echoes, 0.5 feedback (each echo is half as loud as the previous), and a 2300 Hz low-pass on the feedback path so the repeats sound a bit darker each time — a classic trick that makes the echoes feel more natural. delay.delayTime() and delay.feedback() update those values live each frame from the mouse position. Move the mouse to the top-right for a long washy trail; bottom-left for a tight single slap-back echo.

3. Reverb on a snare drum

Reverb simulates the way sound bounces around a physical space — a small room sounds tight and close, a large hall sounds open and washy. p5.Reverb has two main parameters: duration (how many seconds the reverb tail lasts) and decay rate (how quickly it fades away). Move the mouse left and right to sweep the reverb amount from completely dry to dripping wet. Click to hit the snare.

Try editing the code — the preview updates as you type

var snare, reverb;
var SOUND_URL = '/assets/superdirt/007_SN.wav';

function preload() {
  snare = loadSound(SOUND_URL);
}

function setup() {
  createCanvas(300, 300);
  reverb = new p5.Reverb();
  reverb.process(snare, 3, 2);
}

function mousePressed() {
  userStartAudio();
  if (snare.isLoaded()) snare.play();
}

function draw() {
  background(30);

  var wet = map(mouseX, 0, width, 0, 1);
  reverb.drywet(wet);

  fill(136, 170, 204);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(13);
  text('Click to hit the snare', width / 2, height / 2 - 12);
  textSize(11);
  text('reverb: ' + wet.toFixed(2), width / 2, height / 2 + 12);
}

How it works

reverb.process(snare, 3, 2) wires the snare into the reverb and sets its character: 3 seconds of reverb tail length, and a decay rate of 2 (higher = faster fade). reverb.drywet() blends between the original dry signal (0) and the fully processed wet signal (1) — all the way left and you hear a crisp, dry snare; all the way right and it blooms into a long, washy reverb tail. Try increasing the duration to 6 or 8 seconds for a huge stadium effect.

4. LFO tremolo on a square wave

An LFO (Low Frequency Oscillator) runs below the hearing range — too slow to perceive as a pitch — and is used to automatically wobble a parameter over time. Aimed at volume, it creates a tremolo effect: a rhythmic pulse in loudness. Move the mouse left for a slow, gentle pulse; right for a fast flutter. Click to start and stop.

Try editing the code — the preview updates as you type

var osc, lfo;
var playing = false;

function setup() {
  createCanvas(300, 300);

  osc = new p5.Oscillator('square');
  osc.freq(220);
  osc.amp(0.5);

  lfo = new p5.Oscillator('sine');
  lfo.disconnect();
  lfo.freq(2);
  lfo.amp(0.2);
  lfo.start();

  osc.amp(lfo);
}

function mousePressed() {
  userStartAudio();
  if (playing) {
    osc.stop();
    playing = false;
  } else {
    osc.start();
    playing = true;
  }
}

function draw() {
  background(30);

  var rate = map(mouseX, 0, width, 0.2, 20);
  lfo.freq(rate);

  fill(136, 170, 204);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(13);
  text(playing ? 'Move mouse left / right' : 'Click to start', width / 2, height / 2 - 10);
  textSize(11);
  text('LFO rate: ' + rate.toFixed(1) + ' Hz', width / 2, height / 2 + 14);
}

How it works

lfo.disconnect() stops the LFO from being sent to the speakers — you never want to hear it directly. osc.amp(lfo) connects the LFO's output to the oscillator's amplitude, where it is added to the base value of 0.5. The LFO swings between −0.2 and +0.2, so the square wave's amplitude ends up oscillating between 0.3 and 0.7 — a gentle pulse that never cuts to silence. To make the effect more dramatic, increase the LFO amplitude; to make it subtler, decrease it. At slow rates (left) you hear a clear throb; at fast rates (right) it blurs into a buzzing texture.

Vibrato instead of tremolo

Aim the LFO at frequency instead of amplitude and you get vibrato — a pitch wobble rather than a volume pulse. Swap two lines:

// vibrato — replace with these instead
// lfo.amp(0.2);
lfo.amp(10);   // depth in Hz — the pitch wobbles ±10 Hz

// osc.amp(lfo);
osc.freq(lfo); // modulates frequency, not amplitude

The LFO output is added to the base frequency of 220 Hz, so the pitch moves between 210 and 230 Hz. Increase the LFO amplitude for a wider wobble, or speed up the rate for a more intense effect.

5. Shape notes with ADSR, reverb, and a low pass filter

This example combines everything: an oscillator shaped by an ADSR envelope, a low pass filter to control how bright or dull the tone is, and reverb to add space and depth. The top slider bank controls the Attack, Decay, Sustain, and Release of the envelope — the same four stages from the Oscillators page. The second slider bank lets you blend in reverb and sweep the filter cutoff in real time. Play notes on the keyboard at the bottom.

Try editing the code — the preview updates as you type

ControlStyle = 'blue';

var osc, env, filter, reverb, adsr;
var waveOptions = ['sine', 'square', 'sawtooth', 'triangle'];
let piano;

function setup() {
  createCanvas(300, 600);

  osc = new p5.Oscillator('sine');
  osc.freq(440);

  env = new p5.Envelope();
  env.setADSR(0.1, 0.2, 0.5, 0.3);
  env.setRange(0.8, 0);
  osc.amp(env);
  osc.start();

  filter = new p5.LowPass();
  reverb = new p5.Reverb();

  osc.disconnect();
  osc.connect(filter);
  reverb.process(filter);

  piano = new PianoPad({
    x: 20, y: 375,
    width: 260, noteCount: 12,
    onChange: pianoChange, firstNote: 'C1'
  });

  adsr = new ADSRDisplay({
    x: 30, y: 15,
    width: 240, height: 75,
    attack: 0.1, decay: 0.2, sustain: 0.5, release: 0.3,
    label: 'ENV',
  });

  new Selector({
    x: 75, y: 325,
    options: waveOptions,
    label: 'WAVE',
    onChange: (data) => { osc.setType(data.label); },
  });

  new MultiSlider({
    x: 20, y: 100,
    height: 110,
    sliders: {
      'A': { value: 0.1, min: 0, max: 2,  width: 60, readout: 'raw', decimals: 2 },
      'D': { value: 0.2, min: 0, max: 2,  width: 60, readout: 'raw', decimals: 2 },
      'S': { value: 0.5, min: 0, max: 1,  width: 60, readout: 'raw', decimals: 2 },
      'R': { value: 0.3, min: 0, max: 20, width: 60, readout: 'raw', decimals: 2 },
    },
    onChange: (v) => {
      env.setADSR(v.A, v.D, v.S, v.R);
      adsr.attack  = v.A;
      adsr.decay   = v.D;
      adsr.sustain = v.S;
      adsr.release = v.R;
    },
  });

  new MultiSlider({
    x: 20, y: 222,
    height: 90,
    sliders: {
      'REVERB': { value: 0.3, min: 0,   max: 1,     width: 130, readout: 'raw', decimals: 2 },
      'CUTOFF': { value: 5000, min: 200, max: 12000, width: 130, readout: 'raw', decimals: 0 },
    },
    onChange: (v) => {
      reverb.drywet(v.REVERB);
      filter.freq(v.CUTOFF);
    },
  });
}

function pianoChange(data) {
  if (data.state == 'on') {
    osc.freq(data.freq);
    env.triggerAttack();
  } else if (data.state == 'off') {
    env.triggerRelease();
  }
}

function draw() {
  proControlBackground();
}

How it works

The signal chain is: oscillator → low pass filter → speakers, with reverb tapped off the filter as a parallel path. osc.disconnect() stops the oscillator from going straight to the speakers. osc.connect(filter) routes it through the filter first. reverb.process(filter) takes the filtered signal and also sends it through the reverb — so you hear the clean filtered tone plus the reverberant version blended on top.

The REVERB slider calls reverb.drywet() — 0 is no reverb at all, 1 is maximum. The CUTOFF slider calls filter.freq() to set the low pass cutoff point: low values (around 200 Hz) give a muffled, telephone sound; high values (around 12 000 Hz) let most frequencies through and sound nearly unfiltered. Try a square wave with a low cutoff and lots of reverb for a warm, spacious pad sound.

p5.sound effects

Filters

p5.Filter — base filter class
p5.LowPass — cuts high frequencies
p5.HighPass — cuts low frequencies
p5.BandPass — passes a frequency band

Time-based

p5.Delay — echo with feedback
p5.Reverb — algorithmic room simulation
p5.Convolver — convolution reverb using impulse responses

Dynamics & Space

p5.Compressor — controls dynamic range
p5.Distortion — waveshaper / overdrive
p5.Panner3D — 3D spatial positioning