Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Keyboard Piano
by
Bora Ocal */


void setup() {
  size(400, 400);
}

void draw() {
  frameRate(60);
  background(255);
//  println(sin(frameCount/50));

  //background change colors

  rectMode(CORNERS);
  fill (255, 57, 2, 170-mouseX*2);
  rect (0, 0, 400, 400); 

  fill(9, 230, 245, (mouseX)/1.5);
  rect (0, 0, 400, 400);

  //keyboard background
  fill(129, 125, 125);
  rectMode(CORNERS);
  rect(0, 220, 400, 400);

  //keyboard white 1st
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(0, 280, 40, 400);

  //keyboard white 2nd
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(40, 280, 80, 400);

  //keyboard white 3rd
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(80, 280, 120, 400);

  //keyboard white 4th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(120, 280, 160, 400);

  //keyboard white 5th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(160, 280, 200, 400);

  //keyboard white 6th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(200, 280, 240, 400);

  //keyboard white 7th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(240, 280, 280, 400);

  //keyboard white 8th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(280, 280, 320, 400);

  //keyboard white 9th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(320, 280, 360, 400);

  //keyboard white 10th
  fill(255, 255, 255);
  stroke(0);
  rectMode(CORNERS);
  rect(360, 280, 400, 400);

  //keyboard black 1st
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(30, 280, 50, 340);

  //keyboard black 2nd
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(70, 280, 90, 340);

  //keyboard black 3rd
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(150, 280, 170, 340);

  //keyboard black 4th
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(190, 280, 210, 340);

  //keyboard black 5th
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(230, 280, 250, 340);

  //keyboard black 6th
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(310, 280, 330, 340);

  //keyboard black 7th
  fill(0, 0, 0);
  rectMode(CORNERS);
  rect(350, 280, 370, 340);

  //mode display
  fill(255, 0, 0);  
  stroke(0);
  rectMode(CORNERS);
  rect(40, 240, 100, 260);

  //on-off button
  fill(0, 255, 0);
  stroke(0);
  rectMode(CORNERS);
  rect(350, 240, 370, 260);
}

void mouseClicked() {

  frameRate(4.5);
 
  fill (255,mouseX, 255* sin(frameCount));
  rectMode(CENTER);
  rect(mouseX, 110, 40, 220);
}