PaintSing

var selected;
var pickSound;
var startTime;
var instrument;
var brushPlayer;
var pickRed;
var pickBlack;
var pickBlue;
var pickCyan;
var pickGreen;
var pickMagenta;
var pickOrange;
var pickWhite;
var pickYellow;
var pickBrown;
var startIt = false;


function preload(){
  brushPlayer= new Tone.Player("brush1.mp3").toMaster();


  pickRed = new Tone.Player("pickS.mp3").toMaster();

  pickOrange = new Tone.Player("pickOrange.mp3").toMaster();

  //pickYellow = new Tone.Player("pickYellow.mp3").toMaster();

  //pickGreen= new Tone.Player("pickGreen.mp3").toMaster();

 // pickCyan = new Tone.Player("pickCyan.mp3").toMaster();

  //pickBlue = new Tone.Player("pickBlue.mp3").toMaster();

  //pickMagenta = new Tone.Player("pickMagenta.mp3").toMaster();

 // pickBrown = new Tone.Player("pickBrown.mp3").toMaster();

  //pickWhite = new Tone.Player("pickWhite.mp3").toMaster();

  //pickBlack = new Tone.Player("pickBlack.mp3").toMaster();
}
function setup(){
    brushPlayer.loop = true

createCanvas(500,500);
strokeWeight(10);
startTime = millis();



  function mouseReleased() {
      if(startIt === true){

    brushPlayer.stop();
    console.log("test");
  }

}


let value = 'rgb(0,0,0)';
function mouseDragged(){
    if(startIt=== true) {
    if( brushPlayer.state  == 'stopped')
	brushPlayer.start();


	stroke(value);
	line(mouseX,mouseY,pmouseX,pmouseY);
    }
}

 function mousePressed(){
     if(startIt === true){
 	if((mouseX >= 0) && (mouseX <= 20) && (mouseY >=0) && (mouseY <= 20)){
         value = 'rgb(255,0,0)'  //red
         pickRed.start();

		 }



     	else if ( (mouseX <= 20) && (mouseY >=0) && (mouseY <= 40)){

                   value = 'rgb(255,165,0)' //orange
                   pickOrange.start();
         }


 			else if ((mouseX <= 20) && (mouseY >=0 ) && (mouseY <= 60)){
                       value = 'rgb(255,255,0)' // yellow
                       //pickYellow.start();
             }



 				else if ((mouseX <= 20 ) && (mouseY >= 0 ) && (mouseY <= 80 )){
                           value = 'rgb(0,255,0)'  //green
                           //pickGreen.start();
                 }


 					else if ((mouseX <= 20) && (mouseY >= 0) && (mouseY <= 100)){
                               value = 'rgb(0,255,255)'  //cyan
                              // pickCyan.start();
                     }


 						else if ((mouseX <= 20 ) && (mouseY >= 0) && (mouseY <= 120)){
                                   value = 'rgb(0,0,255)'  //blue
                                   //pickBlue.start();
                         }


 							else if ((mouseX <= 20) && (mouseY >= 0 ) && (mouseY <= 140)){
                                       value = 'rgb(255,0,255)'  //magenta
                                       //pickMagenta.start();
                             }


 								else if ((mouseX <= 20) && (mouseY >= 0) && (mouseY <= 160)){
                                           value = 'rgb(165,42,42)' //brown
                                          // pickBrown.start();
                                 }


 									else if ((mouseX <= 20) && (mouseY >= 0) && (mouseY <= 180)){
                                               value = 'rgb(255)' //white
                                              // pickWhite.start();
                                     }



 										else if ((mouseX <= 20) && (mouseY >= 0) && (mouseY <= 200)){
                                                     value = 'rgb(0,0,0)' //black
                                                     //pickBlack.start();
                                         }



                                    }

}



function draw() {

    if(millis() - startTime < 10000) {

         text(50,50,"Please wait 10 sec");
    } else {
        startIt= true;

noStroke();

//red
fill(255,0,0);
rect(0,0,20,20);

//orange
fill(255,165,0);
rect(0,20,20,20);
//yellow
fill(255,255,0);
rect(0,40,20,20);
//green
fill(0,255,0);
rect(0,60,20,20);
//cyan
fill(0,255,255);
rect(0,80,20,20);
//blue
fill(0,0,255);
rect(0,100,20,20);
//magenta
fill(255,0,255);
rect(0,120,20,20);
//brown
fill(165,42,42);
rect(0,140,20,20);
//white
fill(255);
rect(0,160,20,20);
//black
fill(0);
rect(0,180,20,20);

stroke(1);
    }
}
}