setup()
setup() runs exactly once when the sketch loads. It's where you initialize all global state: the canvas, audio devices, and any objects you'll use throughout the sketch. Everything here must happen before draw() starts running.
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100); // Set color mode to HSB for rainbow
mic = new p5.AudioIn(); // Create an audio input object
mic.start(); // Start listening to the microphone
fft = new p5.FFT(); // Create an FFT object to analyze frequencies
fft.setInput(mic); // Connect FFT to the microphone
// Create the speech object
speech = new p5.Speech();
speech.setLang('en-US'); // Set the language for speech synthesis
speech.setRate(1.2); // Set speech rate (1.0 is normal)
speech.setPitch(1.0); // Set speech pitch (1.0 is normal)
userStartAudio(); // Prompt the user for microphone access. This is essential!
}
Line-by-line explanation (11 lines)
🔧 Subcomponents:
mic = new p5.AudioIn();
mic.start();
Creates an audio input object and starts listening to the microphone
fft = new p5.FFT();
fft.setInput(mic);
Creates a Fast Fourier Transform analyzer and connects it to the microphone input
speech = new p5.Speech();
speech.setLang('en-US');
speech.setRate(1.2);
speech.setPitch(1.0);
Creates a text-to-speech object and configures its language, speaking rate, and pitch
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, making the spiral responsive to screen size
colorMode(HSB, 360, 100, 100);- Switches to HSB (Hue-Saturation-Brightness) color mode instead of RGB, making it easy to create smooth rainbow gradients by varying hue from 0 to 360
mic = new p5.AudioIn();- Creates a new AudioIn object that will capture microphone input from the user's device
mic.start();- Activates the microphone so it begins recording audio input
fft = new p5.FFT();- Creates a Fast Fourier Transform analyzer that breaks audio down into frequency bands
fft.setInput(mic);- Connects the FFT analyzer to the microphone so it analyzes the live audio being captured
speech = new p5.Speech();- Creates a text-to-speech synthesizer object that can speak text aloud
speech.setLang('en-US');- Sets the speech language to American English
speech.setRate(1.2);- Sets the speaking rate to 1.2 times normal speed (slightly faster than natural speech)
speech.setPitch(1.0);- Keeps the pitch at normal level (1.0 is the baseline)
userStartAudio();- Prompts the browser to request microphone permissions from the user—this is essential before any audio input can work