Jonno's Music Visualisers

Gallery
1

Instead of spamming other threads, I thought I would make my own in the Beginner section.

I’ve been having a go at music visualisers in Processing and MINIM.

Sorry about the laggy audio, my computer’s a bit too slow for the screen recording.

If anyone would like to see my code or have a dowloadable .exe, just ask.

What I would like to do in the future, is adapt these for p5.js and host the visualisers online.

1 Like
2

Great work on the visualizations! posting the source code can be useful because there are several coders trying to look for more help for sound libraries. Maybe some step by step tutorials on your youtube channel.

Hope to see more:-)

1 Like
3

Thank you! Filming some tutorials is a good idea.

I’ve just uploaded an online p5.js visualiser called Blue Rectangles.

You can link to it from here.
http://jonahmann.x10host.com/

Here’s the code:

function preload(){
  sound = loadSound('genie.mp3');
}

function setup(){
  var cnv = createCanvas(600,600);
  sound.loop();
  fft = new p5.FFT(0.8, 16);
  sound.amp(0.2);
  amplitude = new p5.Amplitude();
}

function draw(){
  background(Math.log(amplitude.getLevel()*255)*20,0,Math.log(amplitude.getLevel()*255)*10);

  var spectrum = fft.analyze();
  noStroke();

  for (var i = 0; i< spectrum.length; i++){
	fill(0,255-spectrum[i]*2,spectrum[i]*2);
    var x = map(i, 0, spectrum.length, 0, width);
    var h = map(spectrum[i], 0, 255, 0, height);
    rect(Math.log(x)*150-500, height-Math.log(h)*25, Math.log(h)*10, -Math.log(h)*50);
  }

  endShape();
}