Data Visualization

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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.

 

Leave a Reply