var popp;

var fft;

var r;

let framenew = [];

let pianotiles;

let c= (0,0,0);

​

function preload(){

  sound = loadSound ('gallant.mp3');

  popp = loadSound('pop.mp3');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  angleMode(DEGREES);

  pianotiles = new piano();

 amp = new p5.Amplitude();

  sound.play();

  //for (let i=0; i<=10; i++){

    //let x=30+200*i;

  //framenew[i]= new frame(x,100,200);

  }

​

function mousePressed() {

 let b= new frame (mouseX-75,mouseY-75,100);

  framenew.push(b);

​

     popp.play();

 }

​

​

​

function draw() {

  background(220);

  let level = amp.getLevel();

  let size = map(level, 0, 1, 0, 200);

  for (let i=0; i<framenew.length; i++){

  framenew[i].move();

  framenew[i].show();

  }

  pianotiles.tiles();

  pianotiles.blacktiles();

   if (size>40){

​

   }

​

}

​

​

​

​

class frame{

  constructor(x,y,r){

  this.x=x;

  this.y=y;

  this.r=r;

}

  move(){

    this.x=this.x+random(-1,1);

    this.y=this.y+random(-1,1);

  }

  show(){

    push();

  strokeWeight(random(3,5));

    noFill();

  beginShape();

    frameRate(2);

vertex(this.x+random(0,20), this.y+random(0,20));

vertex(this.x+random(130,150), this.y);

vertex(this.x+random(130,150), this.y+random(180,200));

vertex(this.x, this.y+random(180,200));

endShape(CLOSE);

    fill(0);

    noStroke();

    ellipse(this.x+50,this.y+50,random(20,30));

    ellipse(this.x+100,this.y+50,random(20,30));

 pop();

  }

​

}

​

class piano{

  constructor(t,u,v){

    this.t=t

    this.u=u

    this.v=v

  }

  tiles() {

    for (let k=0;k<=24;k++){

      rect(k*50,0,50,100);}

    }

  blacktiles(){

    push();

    fill(0);

    rect(width/24-width/48,0,50,50);

    pop();

  }

  }