Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*assignment 2: interactive toy
Phone by Vivian Ha

Pick up the phone by clicking on it*/

//declare variables
int xPos = 0;
int yPos = 0;
boolean phoneClicked = false;

void setup() {
  size(400, 400);
  noStroke();
  rectMode(CENTER);
  background(235);
}

void draw() {
  //change if phone clicked
  if (phoneClicked) {
    drawPhone(width/3, height/2);
    drawDots(width/3, height/2);
    //grey block to cover drawRinging
    fill(235);
    rectMode(CORNER);
    rect(width/2-15, 0, 100, height);
    rectMode(CENTER);
  } else {
    drawPhoneRinging(width/3, height/2);
    drawRinging(width/3, height/3);
  }
}


//////////FUNCTIONS//////////


void drawPhoneRinging(int xPos, int yPos) {
  //PHONE BASE//

  //phone base (long rectangle)
  //phone base colour
  fill(255, 98, 129);
  rect(xPos, yPos, 70, 130);
  //phone base (wide rectangle)
  rect(xPos, yPos, 80, 120);

  //PHONE SCREEN//

  //phone screen (long rectangle)
  //phone screen colour
  fill(245, 224, 228, random(150, 255));
  rect(xPos, yPos-10, 50, 90);
  //phone screen (wide rectangle)
  rect(xPos, yPos-10, 60, 80);

  //PHONE BUTTON//

  //phone button colour
  fill(255);
  rect(xPos, yPos+50, 8, 8);
}

void drawRinging(int xPos, int yPos) {

  //RINGING WAVE 1//

  //ringing wave 1 colour
  fill(175, 40, 67);
  //ringing wave 1 (horizontal line)
  rect(xPos+60, yPos-20, 16, 8);
  //ringing wave 1 (vertical vertical)
  rect(xPos+64, yPos-16, 8, 16);

  //RINGING WAVE 2//

  //ringing wave 2 colour
  fill(199, 58, 86);
  //ringing wave 2 (horizontal line)
  rect(xPos+80, yPos-45, 23, 8);
  //ringing wave 2 (vertical line)
  rect(xPos+90, yPos-37, 8, 23);

  //RINGING WAVE 3//

  //ringing wave 3 colour
  fill(233, 117, 140);
  //ringing wave 3 (horizontal line 1)
  rect(xPos+100, yPos-70, 30, 8);
  //ringing wave 3 (vertical line 1)
  rect(xPos+109, yPos-66, 8, 16);
  //ringing wave 3 (horizontal line 2)
  rect(xPos+115, yPos-62, 16, 8);
  //ringing wave 3 (vertical line 2)
  rect(xPos+119, yPos-53, 8, 30);
}

void drawPhone(int xPos, int yPos) {
  //PHONE BASE//

  //phone base (long rectangle)
  //phone base colour
  fill(255, 98, 129);
  rect(xPos, yPos, 70, 130);
  //phone base (wide rectangle)
  rect(xPos, yPos, 80, 120);

  //PHONE SCREEN//

  //phone screen (long rectangle)
  //phone screen colour
  fill(245, 224, 228);
  rect(xPos, yPos-10, 50, 90);
  //phone screen (wide rectangle)
  rect(xPos, yPos-10, 60, 80);

  //PHONE BUTTON//

  //phone button colour
  fill(255);
  rect(xPos, yPos+50, 8, 8);
}

void mousePressed() {
  //when mouse pressed in phone screen area, state of button toggled
  if (mouseX >= width/3-40 && mouseX <= width/3+40 && mouseY >= height/2-60 && mouseY <= height/2+40) {
    phoneClicked = !phoneClicked;
  }
}

//declare drawDots variables
int dotX = width/3;
int dotY = height/2;
int dotSpacing = 10;

void drawDots(int xPos, int yPos) {
  fill(228, 178, 188);
  for (int dotX = width/3; dotX < width/3+30; dotX += dotSpacing) {
    rect(dotX-9,dotY+130,6,6);
  }
}