I used the following tutorial to create the basis for the audio input and implementation of the visual. using the following code from the video which allowed me to create a visualiser a piece of audio. It allowed me to gain a basic understanding of the way audio can be implemented in p5js, and although im not trying to make a visualiser, the basic functions such as “
function setup() {
song = loadSound”
were overall very helpful in understanding how to implement my own ideas.
let mufflingnew; let peaks; function preload(){ mufflingnew = loadSound(“mufflingnew.wav”); } function setup() { createCanvas(400, 400); peaks = mufflingnew.getPeaks(width); mufflingnew.loop(); } function draw() { background(255,182,193); stroke(0,0,128); for(let i = 0; i < peaks.length; i++){ line(i, height/2 + peaks[i]*200, i, height/2 -peaks[i]*200); } let t = map(mufflingnew.currentTime(), 0, mufflingnew.duration(), 0, width) stroke(255, 255, 190); line(t, 0, t, height); }
I wanted it so as the audio plays, a pattern – sqaures – appear on the screen based upon the amplitude of the audio. i started with trying to move a a basic Elipse shape using the following code:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255,0,150);
ellipse (150,150,200,200)
}
By adding the code x = x + 1, the circle can will move to the right slowly and horizontally. Initially, this is a simple way of moving a singular object but for something more complex and advanced i would have to do it differently. I thought about what i wanted from the sound to be shown visually and i thought about pitch and amplitude. for p5js to analyse the i needed to declare that i would be using sound and something called FFT (Fast Fourier Transform) function which would help analyse the sound and get information about its frequency content.. I then loaded the sound file called ‘mufflingnew.mp3’ before anything else. This is done using the preloud() function which runs once before the sketch starts.