var locopx = 0;

var locopy = 200;

var pan = true;

var pan2 = true;

var ix = 0;

var iy = 0;

​

function preload() {

  song = loadSound('loco.webm');

  img = loadImage('loco.gif');

  img2 = loadImage('5.png');

  img3 = loadImage('6.png');

  img4 = loadImage('7.png');

  img5 = loadImage('8.png');

  ds = loadSound('ds.mp3');

}

​

function setup() {

  createCanvas(400, 400);

  song.play();

  amp = new p5.Amplitude();

}

​

function draw() {

background(220);

pans();

loco1();

loco2();

drams();

}

​

function loco1(){  

  var vol = amp.getLevel();

  image(img,locopx,locopy,200,200)

if(pan == true){

  push()

  noStroke()

  ellipse(locopx+97,locopy+70,30,50*vol);

  pop()

  }

if(pan == false){

line(locopx+97-10,locopy+70-5,locopx+97+10,locopy+70+5);

line(locopx+97+10,locopy+70-5,locopx+97-10,locopy+70+5);

}

}

​

function loco2(){  

  var vol = amp.getLevel();

  image(img,locopx+200,locopy,200,200)

if (pan2 == true){

  ellipse(locopx+97+200,locopy+70,30,50*vol);

}

if(pan2 == false){

line(locopx+200+97-10,locopy+70-5,locopx+10+200+97,locopy+70+5);

line(locopx+10+200+97,locopy+70-5,locopx-10+200+97,locopy+70+5);

}

}

​

function drams(){

   image(img3,150,100,100,100);

   image(img2,190,100+ix,60,60);

   image(img5,140,100+iy,60,60);

   image(img4,150,100,100,100);

if (keyIsPressed === true){

  ix= 40;

  iy = 40;

  ds.play();

} else{

  ix = 0;

  iy = 0;

}

}

​

function pans(){

  if(pan == true && pan2 == false){

      outputVolume(1)

      song.pan(-1,0);

  } else if(pan == false && pan2 == true){

    outputVolume(1)

    song.pan(1,0);

  }else if (pan == true && pan2 == true){

    outputVolume(1)

    song.pan(0,0);

  }else if(pan ==false && pan2 ==false){

    outputVolume(0)

  }

}

​

function mousePressed(){

  var vol = amp.getLevel();

if(mouseX > locopx+97-15 && mouseX < locopx+97+15 && mouseY > locopy+70-25 && mouseY < locopy+70 +25 && pan == false){

  pan = true;

}else if(mouseX > locopx+97-15 && mouseX < locopx+97+15 && mouseY > locopy+70-25*vol && mouseY < locopy+70 +25*vol && pan == true){

  pan = false

} 

if(mouseX > locopx+97+200-15 && mouseX < locopx+97+200+15 && mouseY > locopy+70-25 && mouseY < locopy+70 +25 && pan2 == false){

  pan2 = true;

}else if(mouseX > locopx+200+97-15 && mouseX < locopx+97+200+15 && mouseY > locopy+70-25*vol && mouseY < locopy+70 +25*vol && pan2 == true){

  pan2 = false

} 

}

​