Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/////Pachimari from Overwatch/////
/*
 Creator: Anna Rehman
 Intro to Media Computation
 Sept 18, 2017
 Instructor: Nicolas Hesler
 
 Move the mouse up or down to change Pachimari's expression, and click on it to
 make it go to sleep.
 */

void setup() {
  //Canvas setup
  size(400, 400);
  noStroke();
  //Remove default cursor to create custom near end of code
  noCursor();
}

void draw() {
  //Default frame rate
  frameRate(60);

  //Default background colour
  background(235, 72, 113);

  //Default ellipse mode
  ellipseMode(CENTER);

  //Default rectangle mode
  rectMode(CORNER);

  //Background gradient
  fill(235, 152, 193);
  rect(0, 0, 400, 20);
  fill(235, 148, 189);
  rect(0, 20, 400, 20);
  fill(235, 144, 185);
  rect(0, 40, 400, 20);
  fill(235, 140, 181);
  rect(0, 60, 400, 20);
  fill(235, 136, 177);
  rect(0, 80, 400, 20);
  fill(235, 132, 173);
  rect(0, 100, 400, 20);
  fill(235, 128, 169);
  rect(0, 120, 400, 20);
  fill(235, 124, 165);
  rect(0, 140, 400, 20);
  fill(235, 120, 161);
  rect(0, 160, 400, 20);
  fill(235, 116, 157);
  rect(0, 180, 400, 20);
  fill(235, 112, 153);
  rect(0, 200, 400, 20);
  fill(235, 108, 149);
  rect(0, 220, 400, 20);
  fill(235, 104, 145);
  rect(0, 240, 400, 20);
  fill(235, 100, 141);
  rect(0, 260, 400, 20);
  fill(235, 96, 137);
  rect(0, 280, 400, 20);
  fill(235, 92, 133);
  rect(0, 300, 400, 20);
  fill(235, 88, 129);
  rect(0, 320, 400, 20);
  fill(235, 84, 125);
  rect(0, 340, 400, 20);
  fill(235, 80, 121);
  rect(0, 360, 400, 20);
  fill(235, 76, 117);
  rect(0, 380, 400, 20);
  fill(235, 72, 113);
  rect(0, 400, 400, 20);

  //Begin creating base

  //Right leg
  fill(140, 193, 107);
  ellipse(155, 325, 90, 105);
  //Cover
  fill(235, 90, 127);
  ellipse(130, 320, 55, 65);

  //Far right leg
  fill(140, 193, 107);
  ellipse(125, 295, 115, 75);
  //Cover
  fill(235, 100, 141);
  ellipse(105, 275, 50, 55);

  //Left leg
  fill(140, 193, 107);
  ellipse(245, 325, 90, 105);
  //Cover
  fill(235, 90, 127);
  ellipse(270, 320, 55, 65);

  //Far left leg
  fill(140, 193, 107);
  ellipse(275, 295, 115, 75);
  //Cover
  fill(235, 100, 141);
  ellipse(295, 275, 50, 55);

  //Far right leg background gradient cover
  fill(235, 96, 137);
  arc(105, 275, 50, 55, 0, PI);

  //Far left leg background gradient cover
  fill(235, 96, 137);
  arc(295, 275, 50, 55, 0, PI);

  //Leg space fill
  fill(140, 193, 107);
  rectMode(CENTER);
  rect(200, 300, 40, 47);

  //Body
  fill(246, 234, 213);
  ellipse(200, 185, 313, 225);
  ellipse(200, 40, 25, 40);
  //Multiple quads to replicate a filled curve
  quad(190, 30, 210, 30, 215, 40, 185, 40);
  quad(185, 40, 215, 40, 220, 50, 180, 50);
  quad(180, 50, 220, 50, 225, 60, 175, 60);
  quad(175, 60, 225, 60, 233, 70, 167, 70);
  quad(167, 70, 233, 70, 250, 80, 150, 80);

  //Face
  fill(243, 243, 244);
  ellipse(200, 192.5, 220, 175);

  //Right eye
  fill(0);
  ellipse(140, 185, 32, 32);

  //Left eye
  fill(0);
  ellipse(260, 185, 32, 32);

  //Right blush
  fill(239, 86, 160);
  ellipse(115, 210, 30, 20);

  //Left blush
  fill(239, 86, 160);
  ellipse(285, 210, 30, 20);

  //Mouth
  fill(239, 86, 160);
  ellipse(200, 210, 40, 100); 

  //Left mouth cover
  fill(243, 243, 244);
  ellipse(190, 200, 30, 30);

  //Right mouth cover
  fill(243, 243, 244);
  ellipse(210, 200, 30, 30);

  //Mouth top cover
  fill(243, 243, 244);
  rectMode(CORNER);
  rect(180, 160, 40, 50);

  //Create mouse movement transformation using sped up opacity and shape changes

  //Face
  fill(243, 243, 244, -400+(1.5*mouseY+1.5*mouseY));
  ellipse(200, 192.5, 220, 175);

  //Right eye
  noFill();
  stroke(0, -400+(1.5*mouseY+1.5*mouseY));
  strokeWeight(3.5);
  arc(140, 185, 32, 32, PI, TWO_PI);

  //Left eye
  noFill();
  stroke(0, -400+(1.5*mouseY+1.5*mouseY));
  strokeWeight(3.5);
  arc(260, 185, 32, 32, PI, TWO_PI);

  //Left mouth side
  stroke(239, 86, 160, -400+(1.5*mouseY+1.5*mouseY));
  strokeWeight(3.5);
  arc(190, 200, 30, 30, QUARTER_PI, PI);

  //Right mouth side
  stroke(239, 86, 160, -400+(1.5*mouseY+1.5*mouseY));
  strokeWeight(3.5);
  arc(210, 200, 30, 30, 0, PI-QUARTER_PI);

  //Mouth center line
  stroke(239, 86, 160, -400+(1.5*mouseY+1.5*mouseY));
  strokeWeight(3.5);
  line(200, 210, 200, 205);

  //Remove Stroke
  noStroke();

  //Right blush
  fill(239, 86, 160);
  ellipse(115, 210, 30, 20);

  //Left blush
  fill(239, 86, 160);
  ellipse(285, 210, 30, 20);

  //Create cursor
  fill(255);
  triangle(mouseX, mouseY, mouseX+20, mouseY+7, mouseX+10, mouseY+10);
  triangle(mouseX, mouseY, mouseX+10, mouseY+10, mouseX+7, mouseY+20);
  //center line
  stroke(255);
  strokeWeight(1);
  line(mouseX+4, mouseY+4, mouseX+9, mouseY+9);
  noStroke();
  ellipseMode(CORNER);
  fill(246, 203, 87);
  ellipse(mouseX+12, mouseY+12, 7, 7);

  //Reset ellipseMode
  ellipseMode(CENTER);
}

//Create transformation for Pachimari to go to sleep when you press mouse click

void mousePressed() {

  //Reduce frame rate
  frameRate(0.5);

  //Face
  fill(243, 243, 244);
  ellipse(200, 192.5, 220, 175);

  //Right eye
  stroke(0);
  strokeWeight(3.5);
  line(124, 185, 156, 185);

  //Left eye
  stroke(0);
  strokeWeight(3.5);
  line(244, 185, 276, 185);

  //ZZZ
  stroke(116, 216, 220);
  strokeWeight(3.5);
  //First Z
  line(280, 65, 290, 65);
  line(290, 65, 280, 75);
  line(280, 75, 290, 75);
  //Second Z
  line(300, 45, 315, 45);
  line(315, 45, 300, 60);
  line(300, 60, 315, 60);
  //Third Z
  line(325, 20, 345, 20);
  line(345, 20, 325, 40);
  line(325, 40, 345, 40);

  //Remove stroke
  noStroke();

  //Mouth
  fill(239, 86, 160);
  ellipseMode(CENTER);
  ellipse(200, 215, 15, 15);

  //Right blush
  fill(239, 86, 160);
  ellipse(115, 210, 30, 20);

  //Left blush
  fill(239, 86, 160);
  ellipse(285, 210, 30, 20);
}