final project

  by Qingyun Zhu

  12/19/2022

​

  boy sound by 

https://pixabay.com/sound-effects/wow1-83641/  

  bear sound by

  https://freesound.org/people/ultradust/sounds/168150/

  rabbit sound by 

  https://www.pond5.com/item/57865842

*/

​

var boySound;

var rabbitSound;

var bearSound;

var text01 = "Pess and release Space Key or move down the mouse to hear and see what happens. "

function preload() {

  boySound = loadSound("boy.mp3");

  rabbitSound = loadSound("rabbit.wav");

  bearSound = loadSound("bear.wav");

}

​

function setup() {

createCanvas(800, 700);

}

​

function draw() {   

  background('#F9D2FF');

    instructions();

    boy();

      if (keyIsPressed && keyCode === 32)

      {     

        rabbit();

      }   

      else

      {       

        bear();       

      }

    boy02();

}

​

function instructions(){

    fill('#673AB7');

    textFont('oswald');

    textSize(25); 

    text(text01, 15, 675);

}

function keyPressed() {

  if (keyCode === 32) {

    // space

    rabbitSound.play();

    bearSound.stop();

  }

}

​

function keyReleased() {

  if ( keyCode === 32) {

    // space

    rabbitSound.stop();

    bearSound.play();

  }

}

​

function boy(){

  //face  

    strokeWeight(0);

    fill('#FFDBD8');

    ellipse(415, 243, 310);

​

    //hair-01

    strokeWeight(0);  

    fill('#FFF494');   

    ellipse(275, 260, 100);   

    ellipse(345, 255, 85);

    strokeWeight(4);

    fill('#FFF494');

    beginShape();

    vertex(200, 236);

    bezierVertex(249, 227, 225, 29, 461, 69);

    bezierVertex(445, 38, 494, 44, 509, 88);

    bezierVertex(601, 74, 646, 214, 584, 286);

    endShape();

​

    //ear

    fill('#FFDBD8');

    beginShape();

    vertex(552, 263);

    bezierVertex(605, 248, 601, 351, 536, 343);

    endShape();

    //face  

    beginShape();   

    vertex(291, 332);   

    bezierVertex(224, 413, 455, 430, 534, 343);   

    endShape();

    //left eye

    strokeWeight(8);  

    fill('#8BC34A');     

    beginShape();   

    vertex(408, 294);   

    bezierVertex(435, 272, 471, 285, 489, 305);   

    endShape();

​

    beginShape();   

    vertex(288, 322);   

    bezierVertex(305, 297, 327, 294, 348, 311);   

    endShape();

​

    strokeWeight(0);  

    ellipse(325, 326, 46);   

    ellipse(310, 335, 21);

    strokeWeight(0);  

    fill('#8BC34A');  

    ellipse(333, 343, 11); 

    ellipse(324, 343, 13);

    strokeWeight(4);   

    fill('#8BC34A');  

    beginShape();   

    vertex(343, 307);   

    bezierVertex(351, 317, 351, 337, 337, 350);    

    endShape();

​

    fill('#8BC34A');   

    beginShape();   

    vertex(300, 346);   

    bezierVertex(318, 342, 335, 348, 347, 357);   

    endShape();

​

    fill('#8BC34A');   

    beginShape();   

    vertex(302, 344);   

    bezierVertex(299, 330, 299, 322, 304, 305);   

    endShape();

    fill('#ACF459');   

    strokeWeight(0);   

    beginShape();   

    vertex(305, 344);   

    bezierVertex(315, 324, 338, 323, 342, 340);   

    endShape();

​

    ellipse(333, 338, 16);

    fill('#FFFFFF');   

    ellipse(310,317,7);

​

    //right eye  

    fill('#8BC34A');   

    strokeWeight(4);  

    beginShape();   

    vertex(436, 284);  

    bezierVertex(418, 303, 419, 325, 434, 344);   

    bezierVertex(449, 349, 463, 348, 482, 340);   

    bezierVertex(487, 320, 489, 304, 468, 287);   

    endShape();

    fill('#ACF459');  

    strokeWeight(0);   

    beginShape();   

    vertex(440, 344);   

    bezierVertex(445, 320, 469, 314, 483, 317);   

    endShape();

​

    ellipse(466, 331, 25);   

    ellipse(447, 339, 10);   

    ellipse(452, 339, 10);   

    ellipse(479, 323, 12);   

    beginShape();   

    vertex(440, 343);   

    bezierVertex(455, 347, 470, 344, 479, 334);   

    endShape();

​

    beginShape();   

    vertex(471, 342);   

    bezierVertex(480, 341, 490, 330, 483, 316);   

    endShape();

​

    fill('#FFFFFF');  

    ellipse(431,306,8);

    //mouth

    strokeWeight(2);   

    beginShape();   

    fill('#F55246');   

    if (mouseX <= 371) {       

    if (mouseY <= 374)       

    {           

      fill('#F55246');           

      vertex(371 - (371 - mouseX) / 25, 374);           

      bezierVertex(377, 350, 397, 369, 396, 378);           

      bezierVertex(385, 384 + (mouseY - 377) / 15, 377, 377 + (mouseY - 377) /

      15, 371 - (371 - mouseX) / 25, 375);           

      endShape(); 

            }       

    else     

    {           

      fill('#F55246');      

      vertex(371 - (371 - mouseX) / 25, 374);         

      bezierVertex(377, 350, 397, 369, 396, 378);           

      bezierVertex(385, 384 + (mouseY - 377) / 15, 370, 377 + (mouseY - 377) /

      15, 371 - (371 - mouseX) / 25 , 375);           

      endShape();    

​

    //tooth           

    beginShape();        

    fill(255);         

    vertex(375, 367);           

    bezierVertex(380, 372, 383, 372, 391, 367);          

    endShape();    

    }

        } 

    else

        {      

      if (mouseY <= 374) {          

      fill('#F55246');           

      vertex(371, 374);           

      bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);           

      bezierVertex(385, 382 + (mouseY - 377) / 20, 377, 377 + (mouseY - 377) /

      20, 371, 375);           

      endShape();        

    }       

    else {

      fill('#F55246');          

      vertex(371, 374 );           

      bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);           

      bezierVertex(388, 382 + (mouseY - 377) / 20, 370, 377 + (mouseY - 377) /

      20, 371, 375);           

      endShape();

​

      //tooth           

      beginShape();           

      fill('#FEFEFE');           

      vertex(375, 367);           

      bezierVertex(380, 372, 383, 372, 391, 367);         

      endShape();

      boySound.loop = false;

      boySound.play();

      }

        }

        strokeWeight(4);

​

        //hair

        fill('#FFF494');

        line(200, 236, 228, 240);

​

        beginShape();  

        vertex(228, 240);  

        bezierVertex(209, 280, 234, 326, 273, 340);  

        bezierVertex(266, 326, 262, 314, 265, 296);   

        endShape();

​

        beginShape();   

        vertex(262, 315);  

        bezierVertex(277, 356, 292, 349, 287, 309);  

        endShape();

​

        beginShape();   

        vertex(278, 277);   

        bezierVertex(231, 330, 289, 329, 327, 272);   

        bezierVertex(292, 305, 315, 355, 412, 244);   

        bezierVertex(361, 322, 452, 314, 491, 236);   

        bezierVertex(485, 329, 526, 328, 538, 255);   

        bezierVertex(557, 299, 568, 278, 554, 235);   

        endShape();

​

        strokeWeight(0);

        fill('#F68E86C4');   

        ellipse(307, 359, 30, 20);   

        fill(255);   

        ellipse(315, 355, 4);   

        fill(241, 153, 108);   

        ellipse(479, 354, 35, 25);   

        fill(255);   

        ellipse(488, 346, 4);

      //clothe part 2

        strokeWeight(4);   

        fill('#7CD6FF');   

        beginShape();

        vertex(487, 379);   

        bezierVertex(548, 402, 608, 587, 559, 568);   

        bezierVertex(564, 623, 481, 610, 420, 639);

        endShape();

}

​

function boy02(){

        //clothe part-1   

      beginShape();   

      strokeWeight(4);   

      fill('#7CD6FF');

      vertex(500, 404);   

      bezierVertex(489, 434, 470, 447, 447, 457);   

      bezierVertex(445, 470, 458, 492, 458, 492);  

      bezierVertex(490, 492, 521, 480, 535, 461);   

      endShape();

      //clothe part-2

      strokeWeight(0);   

      fill('#2196F3');   

      beginShape();

      vertex(484, 435);   

      bezierVertex(470, 444, 461, 454, 447, 457);   

      bezierVertex(450, 470, 450, 477, 459, 490);   

      bezierVertex(481, 489, 482, 490, 498, 483);   

      endShape();

​

      beginShape();   

      vertex(520, 496);   

      bezierVertex(523, 509, 524, 528, 518, 546);   

      bezierVertex(553, 561, 538, 564, 570, 568);   

      bezierVertex(584, 539, 568, 517, 566, 496);   

      endShape();

​

      strokeWeight(4);   

      fill(254, 224, 178);

​

      beginShape();   

      vertex(446, 464);   

      bezierVertex(423, 466, 397, 488, 377, 492);   

      bezierVertex(350, 502, 361, 529, 390, 512);   

      bezierVertex(414, 506, 439, 501, 455, 491);   

      endShape();

​

      beginShape();   

      vertex(240, 449);   

      bezierVertex(223, 460, 218, 468, 225, 487);   

      endShape();

​

      beginShape();   

      vertex(239, 451);   

      bezierVertex(253, 468, 251, 487, 225, 486);   

      endShape();

      //shose 

      fill(255);   

      strokeWeight(0);   

      ellipse(276, 606, 20);

      strokeWeight(4); 

​

      beginShape();   

      vertex(412, 587);   

      bezierVertex(390, 599, 395, 630, 413, 638);   

      endShape();

​

      beginShape();   

      vertex(411, 587);   

      bezierVertex(430, 590, 445, 644, 413, 638);  

      endShape();

​

      beginShape();   

      vertex(412, 587);   

      bezierVertex(420, 603, 424, 625, 420, 630);   

      endShape();

​

      strokeWeight(0);   

      ellipse(278, 593, 30);   

      ellipse(268, 580, 17);   

      ellipse(289, 604, 20);  

      strokeWeight(4);

​

      beginShape();  

      vertex(261, 569);   

      bezierVertex(260, 593, 262, 594, 272, 619);   

      endShape();

​

      beginShape();   

      vertex(261, 569);    

      bezierVertex(268, 568, 283, 587, 282, 598);   

      endShape();   

      beginShape();   

      vertex(272, 574);   

      bezierVertex(291, 582, 299, 595, 304, 610);   

      endShape();   

      line(272, 619, 304, 610);

      //clothe part-1

      strokeWeight(4);  

      fill(42, 39, 31);  

      line(520, 547, 558, 568);   

      //head part-1  

      strokeWeight(0);   

      fill(255);   

      ellipse(269, 182, 20);   

      beginShape();   

      vertex(275, 167);   

      bezierVertex(289, 121, 328, 95, 341, 95);   

      bezierVertex(400, 78, 387, 106, 361, 108);   

      bezierVertex(316, 120, 290, 153, 282, 167);   

      endShape();

​

      strokeWeight(0);   

      fill('#FFC107');

      var t = cos(millis() / 60) ;

      beginShape();   

      vertex(551, 151);   

      bezierVertex(750 + 10 * t, 120 + 40 * t, 697 + 50 * t, 54, 572 + 5 * t,

      138 + 5 * t);   

      bezierVertex(618 + 10 * t, 98 + 20 * t, 599 + 10 * t, 60 + 10 * t, 552,

      151);   

      endShape();

​

      beginShape(); 

      vertex(268, 101);  

      bezierVertex(86 - 10 * t, 72 + 40 * t, 180 - 50 * t, 29, 258 - 10 * t,

      90 + 2 * t);   

      bezierVertex(202 - 10 * t, 49 + 20 * t, 258 - 10 * t, -3 + 10 * t, 268 ,

      101);

      endShape();

}

​

function rabbit(){

  strokeWeight(4);      

      fill(255);      

      beginShape();      

      vertex(279, 357);   

      bezierVertex(230, 270, 210, 350, 248, 429);       

      bezierVertex(115, 698, 663, 675, 475, 430);       

      bezierVertex(510, 280, 450, 300, 410, 397);       

      bezierVertex(369, 404, 281, 405, 278, 356);       

      endShape();

​

      //rabbit-ear       

      strokeWeight(0);       

      fill(229, 137, 152);       

      beginShape();       

      vertex(260, 415);       

      bezierVertex(227, 330, 267, 330, 284, 398);       

      endShape();

​

      beginShape();       

      vertex(425, 405);       

      bezierVertex(465, 310, 490, 320, 460, 420);       

      endShape();

​

      //rabbit-eye       

      strokeWeight(4);      

      fill(0);       

      ellipse(300, 492, 13, 16);       

      ellipse(348, 496, 13, 16);       

      fill(229, 137, 152);       

      strokeWeight(3);

​

      //rabbit-nose&mouth       

      fill(0);       

      ellipse(319, 524, 25, 18);       

      line(318, 533, 317, 545);       

      fill(192, 115, 112);

​

      beginShape();       

      vertex(290, 540);       

      bezierVertex(312, 540, 326, 542, 345, 545);      

      bezierVertex(345, 590, 290, 650, 290, 540);       

      endShape();

      strokeWeight(0);       

      fill(199,145,161);      

      ellipse(385, 534, 45, 22);      

      ellipse(261, 524, 40, 20);

}

​

function bear(){

  strokeWeight(4);       

      fill(117, 52, 21);       

      beginShape();       

      vertex(279, 357);       

      bezierVertex(235, 345, 206, 415, 248, 429);       

      bezierVertex(115, 698, 663, 675, 485, 430);       

      bezierVertex(511, 369, 433, 327, 410, 397);       

      bezierVertex(369, 404, 281, 405, 278, 356);       

      endShape();

​

      fill(89, 21, 4);       

      beginShape();       

      vertex(260, 415);      

      bezierVertex(229, 397, 267, 361, 284, 398);       

      endShape();

​

      beginShape();       

      vertex(425, 411);       

      bezierVertex(434, 372, 479, 380, 465, 430);       

      endShape();

​

      fill(0);       

      ellipse(294, 492, 13, 16);       

      ellipse(363, 493, 13, 16);       

      fill(249, 218, 190);       

      strokeWeight(3);              

      beginShape();       

      vertex(317, 492);       

      bezierVertex(285, 505, 283, 546, 297, 566);       

      bezierVertex(312, 593, 350, 588, 358, 559);      

      bezierVertex(368, 530, 348, 486, 317, 492);       

      endShape();

​

      beginShape();       

      fill(0);       

      vertex(306, 521);        

      bezierVertex(313, 517, 323, 516, 335, 523);       

      bezierVertex(337, 530, 330, 530, 317, 533);       

      bezierVertex(314, 530, 303, 528, 306, 521);       

      endShape();

​

      line(318, 533, 317, 551);    

      line(317, 551, 308, 558);     

      line(317, 551, 327, 559);

}