self portrait Interaction

  by Ruikun zhao

*/

var eyeSize = 35;

var faceColor = "LemonChiffon";

var x = 160;

var y = 170;

var i = 1;

function setup() {

  createCanvas(400, 400);

  shocked = 0;

  i = 1;

}

​

function draw() {

  push();

  if (shocked === 0) {

    background("#F8BA99");

    fill("rgb(146,252,242)");

    noStroke();

    rect(0, 50, 400, 100);

    rect(0, 200, 400, 100);

    rect(0, 350, 400, 100);

  } else {

    background("rgb(146,252,242)");

    fill("#F8BA99");

    noStroke();

    y1 = 50 * (i - 3);

    rect(0, y1, 400, 100);

    rect(0, y1 + 150, 400, 100);

    rect(0, y1 + 300, 400, 100);

    rect(0, y1 + 450, 400, 100);

    i += 0.03;

    if (y1 > 50) {

      i = 1;

    }

  }

  pop();

  //side hat

  push();

  fill(0, 130, 204);

  noStroke();

  translate(255, 90);

  ellipse(x - 160, x - 170, 100, 60);

  pop();

​

  //face

  fill(faceColor);

  noStroke();

  ellipse(x + 40, y - 20, 150, 150);

​

  //hair

  fill(0);

  square(x - 35, y - 88, 77, 50, 10);

  square(x + 40, y - 88, 77, 50, 10);

​

  fill(0, 130, 204);

  stroke(0, 38, 154);

  arc(x + 40, y - 60, 162, 130, PI, 2 * PI, CHORD); // hat

  fill(0);

  rect(x, y - 100, 40, 20, 3, 3, 3, 3);

​

  //eyes

  fill(0);

  ellipse(x + 5, y, 20, eyeSize);

  ellipse(x + 75, y, 20, eyeSize);

​

  //clothes

  fill("rgb(0,170,255)");

  noStroke();

  rect(x - 25, y + 70, 130, 200, 30);

​

  //neck

  fill(faceColor);

  noStroke();

  rect(x + 20, y + 50, 40, 20);

  circle(x + 40, y + 60, 40);

  if (shocked === 0) {

    fill("white"); //mouth

    square(x + 30, y + 25, 20);

  } else {

    fill("rgb(242,118,97)"); //mouth

    ellipse(200, 200, 20, 30);

  }

}

​

function mouseClicked() {

  if (shocked === 0) {

    shocked = 1;

  } else {

    shocked = 0;

  }

}

​