https://tenor.com/zh-CN/view/im-bored-cat-slide-silly-bored-gif-16877066

https://tenor.com/zh-CN/view/jinki948-cat-shocked-shocked-face-shock-gif-22585372

https://tenor.com/zh-CN/view/phobiamp3-kitty-furios-cat-angry-gif-26396978

​

sounds

https://freesound.org/people/mariallinas/sounds/222647/

https://freesound.org/people/GentlemanWalrus/sounds/180005/

​

*/

var option = 1;

var img, img2, img3;

var sound;

var sound2;

​

function preload() {

  sound = loadSound("shock.wav");

  sound2 = loadSound("angry.mp3");

  img = loadImage("bored.gif");

  img2 = loadImage("shock.gif");

  img3 = loadImage("angry.gif");

}

​

function setup() {

  createCanvas(800, 800);

  slider1 = createSlider(0, 255, 127, 1);

  slider1.position(0, 800, 12);

​

  slider2 = createSlider(0, 255, 127, 1);

  slider2.position(130, 800, 12);

  createP(

    "press the mouse to change the emotion and hear the relative sound，use the slider to change the color of the blackground"

  );

}

function draw() {

  let val1 = slider1.value();

  let val2 = slider2.value();

  background(val1, val2);

  noStroke();

  fill(val1);

  ellipse(400, 400, 1200, 1200);

  fill(val2);

  ellipse(400, 400, 1100, 1100);

  fill(val1);

  ellipse(400, 400, 1000, 1000);

  fill(val2);

  ellipse(400, 400, 900, 900);

  fill(val1);

  ellipse(400, 400, 800, 800);

  selfportrait();

}

function selfportrait() {

  if (option == 1) {

    image(img, 600, 0);

​

    fill(255, 242, 234);

​

    rect(225, 240, 365, 290);

​

    //hair

​

    fill(0);

​

    arc(225, 240, 250, 250, 0, HALF_PI);

​

    arc(590, 240, 480, 250, HALF_PI, PI);

​

    //eyes

​

    fill(0);

​

    ellipse(300, 400, 50, 75);

​

    ellipse(450, 400, 50, 75);

​

    fill(94, 240, 218);

​

    arc(300, 400, 50, 75, PI, 0);

​

    arc(450, 400, 50, 75, PI, 0);

​

    fill(255);

​

    ellipse(300, 400, 10, 15);

​

    ellipse(450, 400, 10, 15);

​

    //mouth

​

    stroke(0);

​

    strokeWeight(8);

​

    line(350, 490, 400, 490);

​

    //eyebrow

​

    line(280, 340, 340, 340);

​

    line(410, 340, 550, 340);

​

    //blusher

​

    noStroke();

​

    fill(255, 51, 0);

​

    arc(225, 445, 100, 50, -0.5 * PI, HALF_PI);

​

    ellipse(520, 445, 100, 50);

  } else if (option == 2) {

    image(img2, 600, 0);

    img2.resize(220, 224);

​

    fill(255, 242, 234);

​

    rect(225, 240, 365, 290);

​

    //hair2

​

    fill(0);

​

    arc(225, 240, 250, 250, 0, HALF_PI);

​

    arc(590, 240, 480, 250, HALF_PI, PI);

​

    //eyes2

​

    fill(0);

​

    ellipse(300, 400, 50, 75);

​

    ellipse(450, 400, 50, 75);

​

    fill(0, 104, 139);

​

    arc(300, 400, 50, 75, PI, 0);

​

    arc(450, 400, 50, 75, PI, 0);

​

    fill(255);

​

    ellipse(300, 400, 10, 15);

​

    ellipse(450, 400, 10, 15);

​

    //mouth2

​

    stroke(0);

​

    strokeWeight(8);

    line(375, 470, 365, 490);

​

    line(375, 470, 385, 490);

​

    //eyebrow2

    line(280, 300, 340, 340);

​

    line(410, 340, 470, 300);

​

    //blusher2

​

    noStroke();

    fill(250, 128, 114);

​

    arc(225, 445, 100, 50, -0.5 * PI, HALF_PI);

​

    ellipse(520, 445, 100, 50);

​

    //exclamation mark

​

    stroke(255, 255, 0);

​

    strokeWeight(30);

​

    line(100, 60, 100, 150);

​

    line(100, 200, 100, 202);

  } else if (option == 3) {

    image(img3, 600, 0);

    img3.resize(220, 224);

    fill(255, 242, 234);

​

    rect(225, 240, 365, 290);

​

    //hair3

​

    fill(0);

​

    arc(225, 240, 250, 250, 0, HALF_PI);

​

    arc(590, 240, 480, 250, HALF_PI, PI);

​

    //eyes3

​

    fill(0);

​

    ellipse(300, 400, 50, 75);

​

    ellipse(450, 400, 50, 75);

​

    fill(255, 51, 0);

​

    arc(300, 400, 50, 75, PI, 0);

​

    arc(450, 400, 50, 75, PI, 0);

​

    fill(255);

​

    ellipse(300, 400, 10, 15);

​

    ellipse(450, 400, 10, 15);

​

    //mouth3

​

    stroke(0);

​

    strokeWeight(8);

    line(375, 470, 365, 490);

​

    line(375, 470, 385, 490);

​

    line(395, 470, 405, 490);

​

    line(395, 470, 385, 490);

​

    //eyebrow3

    line(280, 300, 340, 340);

​

    line(410, 340, 470, 300);

  }

}

function mouseClicked() {

  option++;

  if (option > 3) option = 1;

  if (option == 2) {

    sound.play();

  }

  if (option == 3) {

    sound2.play();

  }

}

​