Sound

Visualizes sound frequencies detected from your microphone. Try it with some classical music!

This sketch needs permission to use your microphone.

Source Code for this Sketch

let fft
let averages = []
let count = 0
let hue = 0

function setup() {
    createCanvas(1024, 255, P2D, canvas)
    colorMode(HSL)

    mic = new p5.AudioIn();
    mic.start();

    fft = new p5.FFT()
    fft.setInput(mic)

    for (let i = 0; i < 1024; i++) {
        averages[i] = [0, 0, 0, 0, 0]
    }
}

function draw() {
    background(0)
    let spectrum = fft.analyze()

    for (let i = 0; i < 1024; i++) {
        averages[i][count%5] = spectrum[i]
        hue = averages[i].reduce((prev, current) => prev + current) / 5
        stroke(hue+105, 100, 50)
        point(i, 255-spectrum[i])
    }
    count++
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js p5.sound.js . Sources are available under their respective licenses.

See all p5.js sketches