Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*//////////////////////////////////////////////////////////////////////////
 ** Kitty Keyboard by Patrick Sakamoto
 **
 ** This interactive toy includes a player controlled cat pressing the keys
 ** on a piano keyboard to make lovely kitty music!
 **
 **Move the kitty with the mouse and click to press down on the keys.
/*//////////////////////////////////////////////////////////////////////////

boolean displayActive=false;
boolean randomizeColour=false;

int opacity=100;

int key1=0;
int key2=80;
int key3=160;
int key4=240;
int key5=320;
int key6=400;

int keyWidth=80;
int keyHeight=160;

int displayColours1=int(random(0, 255));
int displayColours2=int(random(0, 255));
int displayColours3=int(random(0, 255));

void setup() {
  frameRate(60);
  size(400, 400);
  smooth();
  rectMode(CORNER);
  ellipseMode(CENTER);
}

void draw() {    
  drawKeyboard();
  checkKeys();
  displayOn();
  catPaw();
  updateCat();
}

//Pseudocode: Press a key to make the kitty meow.

void keyPressed() {
  println("Nyaaaaaaaa~");
}

//Pseudcode: Press mouse button to make "sounds" in println.

void mousePressed() {
  if (mousePressed && mouseY<240) {
    println("Meow meow! (I can't reach that high!!)");
  } else if (mousePressed && mouseY>240) {
    println("Meoooooow! (Music, music!)");
  }
}


//Pseudocode: If the keys are pressed down, light up the display with random colours and create music notes.

void displayOn() {
  if (displayActive) {
    if (randomizeColour) {
      displayColours1=int(random(0, 255));
      displayColours2=int(random(0, 255));
      displayColours3=int(random(0, 255));
      randomizeColour=false;
    }
    stroke(displayColours1, displayColours2, displayColours3);
    fill(displayColours1, displayColours2, displayColours3);
    rect(100, 80, 200, 40);

    ellipse(60, 100, 20, 10);
    line(70, 100, 70, 80);

    ellipse(160, 60, 20, 10);
    line(170, 60, 170, 40);

    ellipse(320, 80, 20, 10);
    ellipse(340, 80, 20, 10);
    line(330, 80, 330, 60);
    line(350, 80, 350, 60);
    line(330, 60, 350, 60);
  } else {
    stroke(200);
    fill(200);
    rect(100, 80, 200, 40);
  }

  if (mousePressed && mouseY>240) {
    displayActive=true;
    randomizeColour=true;
  } else {
    displayActive=false;
  }
}

//Function to create the keyboard background. Does not include clickable.

void drawKeyboard() {

  background(255);

  //Keyboard interface background.

  stroke(0);
  strokeWeight(1);
  fill(50);
  rect(0, 0, 400, 240);

  //Loop creating graphical pattern for keyboard keys.

  for (int i= 0; i<400; i+=80) {
    line(i, 240, i, 400);
  }

  //Keyboard sound vents, buttons, and black keys.

  fill(0);
  rect(0, 24, 400, 8);
  rect(0, 36, 400, 8);

  rect(260, 140, 40, 20);
  rect(260, 180, 40, 20);
  rect(340, 140, 40, 20);
  rect(340, 180, 40, 20);

  rect(0, 240, 20, 80);
  rect(60, 240, 40, 80);
  rect(220, 240, 40, 80);
  rect(300, 240, 40, 80);
  rect(380, 240, 20, 80);

  //Keyboard Display

  fill(200);
  rect(100, 80, 200, 40);

  //Keyboard Dials

  fill(225);
  ellipse(50, 170, 60, 60);
  ellipse(150, 170, 60, 60);
  line(50, 170, 50, 140);
  line(150, 170, 180, 170);
}

// Function to determine whether cursor is over one of the five keys using conditional statements.
// Mouse click indicates key opacity for interaction.
// Pseudocode: Make the keys change colour upon mouse over and mouse click.

void checkKeys() {
  if (mousePressed) {
    opacity= 180;
  } else { 
    opacity = 100;
  }
  {
    if (mouseY>=240) {
      if (mouseX>key1 && mouseX<key2) {
        fill(255, 0, 0, opacity);
        rect(0, 240, keyWidth, keyHeight);
      } else if (mouseX>key2 && mouseX<key3) {
        fill(255, 255, 0, opacity);
        rect(80, 240, keyWidth, keyHeight);
      } else if (mouseX>key3 && mouseX<key4) {
        fill(0, 255, 0, opacity);
        rect(160, 240, keyWidth, keyHeight);
      } else if (mouseX>key4 && mouseX<key5) {
        fill(0, 255, 255, opacity);
        rect(240, 240, keyWidth, keyHeight);
      } else if (mouseX>key5 && mouseX<key6) {
        fill(0, 0, 255, opacity);
        rect(320, 240, keyWidth, keyHeight);
      }
    }
  }
}

//Update the Cat on the screen, constrain within canvas.
//Pseudocode: Constrain the cat to the size of the canvas on the x-axis.

void updateCat() {

  mouseX=constrain(mouseX, 40, 360);
  stroke(0);
  strokeWeight(2);
  fill(213, 85, 0);
  triangle(mouseX+35, mouseY*0.1+320, mouseX+38, mouseY*0.1+380, mouseX-5, mouseY*0.1+360);
  triangle(mouseX-35, mouseY*0.1+320, mouseX-38, mouseY*0.1+380, mouseX+5, mouseY*0.1+360);
  ellipse(mouseX, mouseY*0.1+380, 80, 80);


  stroke(149, 60, 0);
  strokeWeight(5);
  line(mouseX, mouseY*0.1+345, mouseX, mouseY*0.1+400);
  line(mouseX-25, mouseY*0.1+355, mouseX-20, mouseY*0.1+400);
  line(mouseX+25, mouseY*0.1+355, mouseX+20, mouseY*0.1+400);
}

//Generate cat paw to press keys on keyboard upon clicking.
//Pseudocode: Make the cat strike the keys with its paws depending on which side of 
//the keyboard it's on.

void catPaw() {

  //mouseX=constrain(mouseX, 40, 360);
  stroke(0);
  strokeWeight(1.5);
  fill(255);
  if (mousePressed && mouseX<200) {
    arc(mouseX-15, mouseY*0.1+320, 30, 20, PI, 2*PI);
    fill(200, 75, 0);
    rect(mouseX-30, mouseY*0.1+320, 30, 40);
  } else if (mousePressed && mouseX>200) {
    arc(mouseX+15, mouseY*0.1+320, 30, 20, PI, 2*PI);
    fill(200, 75, 0);
    rect(mouseX, mouseY*0.1+320, 30, 40);
  }
}