final project proposal 

  by Qingyun Zhu

  12/18/2022

​

*/

​

var slideNumber = 0;

var totalSlides = 4;

​

var description = "I'm going to continue working with my sound sampler project. On my project, I will draw a boy, a bear and a rabbit, and add the sound to them.  ";

​

var interaction = "The user will press a key on the keyboard and move the mouse to trigger different parts of the audio with visual effects.";

​

var visuals = "The visuals will consist of the P5 shapes of boy, rabbit and bear with the sound.";

​

var wowSound;

​

var nextButtonX = 700;

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function setup() {

  createCanvas(800, 600);

}

​

​

​

function draw() {

  background('#F5BBFF');

  fill(0);

  if (slideNumber === 0) {

    // project pitch intro

    textSize(60);

    textAlign(CENTER, CENTER);

    fill('#021162')

    text("My Final Project", width / 2, height / 2);

    textSize(20);

    text("by Qingyun Zhu", width / 2, height / 2 + 100);

  } else if (slideNumber === 1) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Description", 50, 100);

    textSize(30);

    text(description, 50, 200, 600);

  } else if (slideNumber === 2) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Interaction", 50, 100);

    textSize(30);

    text(interaction, 50, 200, 600);

  } else if (slideNumber === 3) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Visuals", 50, 100);

    textSize(30);

    text(visuals, 50, 200, 600);

    push();

    scale(0.5,0.5);

    translate(10,550)

    boy();

    pop();

    push();

    scale(0.5,0.5);

    translate(425,300)

    rabbit();

    pop();

    push();

    scale(0.5,0.5);

    translate(750,300)

    bear();

    pop();

  }

  // draw buttons

  button("Next", nextButtonX, nextButtonY);

  button("Prev", prevButtonX, prevButtonY);

}

​

function button(buttonText, x, y) {

  stroke(0);

  strokeWeight(2);

​

  if (mouseX > x && mouseX < x + buttonWidth &&

      mouseY > y && mouseY < y + buttonHeight) {

    fill('orange');

  } else {

    fill('lightblue');

  }

  rect(x, y, buttonWidth, buttonHeight, 5);

​

  noStroke();

  fill(0);

  textAlign(LEFT, TOP);

  textSize(20);

  text(buttonText, x + 10, y + 5);

}

​

function mousePressed() {

  // check if mouse is inside button

  // next

  if (mouseX > nextButtonX && 

      mouseX < nextButtonX + buttonWidth &&

      mouseY > nextButtonY && 

      mouseY < nextButtonY + buttonHeight &&

     slideNumber < totalSlides - 1) {

    slideNumber++;

  }

  // prev

  if (mouseX > prevButtonX && 

      mouseX < prevButtonX + buttonWidth &&

      mouseY > prevButtonY && 

      mouseY < prevButtonY + buttonHeight &&

     slideNumber > 0) {

    slideNumber--;

  }

}

​

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();

      }

        }

    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);

}

​

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);

}

​

​

​