Choke vs. Drillin' - An interactive audio-visualiser made in p5.js

I made this little program using the p5.js programming language. It takes two tracks from my first album, Choke and Drillin', and allows you to mix and manipulate these tracks within your web browser.

It's really simple to move, you simply move your mouse pointer around the screen and this dramatically affects the pitch and the volume of the tracks, creating new combinations of sounds.

It should work on mobile devices although the interface performs best on desktop or laptop machines. If you want to learn more about visit https://p5js.org/ or https://processing.org/

Here's the link to play with the program:

http://mattmadethis.co.uk/p5/choke/

And here's the code that makes it all work:

var song;
var song2;
var canvas;

function preload() {
  // Load a sound file
  song = loadSound('../media/mp3/choke.mp3');
  song2 = loadSound('../media/mp3/drillin.mp3');

  img1 = loadImage('../media/images/speaker.png');
  img2 = loadImage('../media/images/speaker.png');
  img3 = loadImage('../media/images/speaker.png');
}

function setup() {
  canvas = createCanvas(windowWidth,windowHeight);
  
  song.loop();
  song2.loop();
  
  fft = new p5.FFT();
}

function draw() {
  background(255);

  var volume = map(mouseX, 0, width, 0, 1);
  volume = constrain(volume, 0, 1);
  song.amp(volume);

  var volume2 = map(mouseX, 0, width, 1, 0);
  volume2 = constrain(volume2, 0, 1);
  song2.amp(volume2);

  var speed = map(mouseY, 0.1, height, 0, 2);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
 
  var speed2 = map(mouseY, 0.1, height, 2, 0);
  speed2 = constrain(speed2, 0.01, 4);
  song2.rate(speed2);

  var spectrum = fft.analyze();
  var getbass = fft.getEnergy('bass');
  var getlowmid = fft.getEnergy('lowMid');
  var getmid = fft.getEnergy('mid');
  var gethighmid = fft.getEnergy('highMid');
  var gettreble = fft.getEnergy('treble');

strokeWeight(1);

  var waveform = fft.waveform();
  noFill();
  beginShape();
  stroke(0,0,0); // waveform is red
  strokeWeight(2);
  for (var i = 0; i< waveform.length; i++){
    var x = map(i, 0, waveform.length, 0, width);
    var y = map( waveform[i], -1, 1, 0, height);
    vertex(x,y);
  }
  endShape();

var factor = 200;

imageMode(CENTER);
image(img1, width*.25, height/2, (350/300)*getbass, (350/300)*getbass);

/*imageMode(CENTER);
image(img2, width*.5, height/2, (350/factor)*getlowmid, (350/factor)*getlowmid);*/

imageMode(CENTER);
image(img3, width*.75, height/2, (350/factor)*gethighmid, (350/factor)*gethighmid);
}

window.onresize = function() {
  canvas.size(windowWidth, windowHeight);
};

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}