Concept
For this task I decided to generate some sort of imagery based upon the music being played. There isn’t a particular reason why wanted to implement this other than the fact that it seems pretty cool and fun to make.
Implementation
let song, buttton, fft;
function toggleSong() {
if(song.isPlaying()) {
song.pause();
} else {
song.play();
}
}
function preload() {
song = loadSound('bgmusic.mp3');
}
function setup() {
createCanvas(600, 600);
colorMode(HSB);
angleMode(DEGREES); // Change the mode to DEGREES
song.play();
fft = new p5.FFT(0.9, 128);
}
function draw() {
background(0);
space = width / 128;
let spectrum = fft.analyze();
//console.log(spectrum);
for (let i = 0; i < (spectrum.length/2)+1; i++) {
stroke(255);
let amp = spectrum[i];
let y = map(amp, 0, 256, height, 0);
fill(i,125,125); //remove stroke(255);
noStroke();
rect(i * space, y, space, height - y);
rect(width - (i * space), y, space, height);
//rect(space, height ,width - (i * space), y);
}
}
function touchStarted() {
getAudioContext().resume();
}
let song, buttton, fft;
function toggleSong() {
if(song.isPlaying()) {
song.pause();
} else {
song.play();
}
}
function preload() {
song = loadSound('bgmusic.mp3');
}
function setup() {
createCanvas(600, 600);
colorMode(HSB);
angleMode(DEGREES); // Change the mode to DEGREES
song.play();
fft = new p5.FFT(0.9, 128);
}
function draw() {
background(0);
space = width / 128;
let spectrum = fft.analyze();
//console.log(spectrum);
for (let i = 0; i < (spectrum.length/2)+1; i++) {
stroke(255);
let amp = spectrum[i];
let y = map(amp, 0, 256, height, 0);
fill(i,125,125); //remove stroke(255);
noStroke();
rect(i * space, y, space, height - y);
rect(width - (i * space), y, space, height);
//rect(space, height ,width - (i * space), y);
}
}
function touchStarted() {
getAudioContext().resume();
}
let song, buttton, fft; function toggleSong() { if(song.isPlaying()) { song.pause(); } else { song.play(); } } function preload() { song = loadSound('bgmusic.mp3'); } function setup() { createCanvas(600, 600); colorMode(HSB); angleMode(DEGREES); // Change the mode to DEGREES song.play(); fft = new p5.FFT(0.9, 128); } function draw() { background(0); space = width / 128; let spectrum = fft.analyze(); //console.log(spectrum); for (let i = 0; i < (spectrum.length/2)+1; i++) { stroke(255); let amp = spectrum[i]; let y = map(amp, 0, 256, height, 0); fill(i,125,125); //remove stroke(255); noStroke(); rect(i * space, y, space, height - y); rect(width - (i * space), y, space, height); //rect(space, height ,width - (i * space), y); } } function touchStarted() { getAudioContext().resume(); }
Sketch (you might have to click the canvas to start)
Reflections
I would love to explore creating 3d visuals for the background and improving the aesthetics in general for this sketch. However, this was a lot of fun to make and I enjoyed the process.