Sydney Salamy: Project-10-Sonic-Sketch

Originally, I was going to do Goku’s Super Saiyan transformation from Dragon Ball Z, since that show involves a lot of yelling and loud sounds. However, I decided to do an image from the movie My Neighbor Totoro. The image I chose was the cover, with the character Satsuki standing at a bus stop in the rain next to Totoro. I was originally going to color their outlines, but decided to base the color scheme off the Studio Ghibli’s logo and use their blue color with white outlines. I was pretty accurate with recreating the cover, although mine was more simplistic since there are only two colors and the background is left out. The only other changes I made were to the sign, where instead of the actual sign from the cover I put a soot sprite, a little acorn sprout, and the mini white Totoro, all from the movie, and on the ground near the sign, where I added little sprouts. I used A LOT of the bezier() element to recreate the image. 

My Sounds

  • The rain is a constant sound that isn’t variable in any way
  • If the user presses the center of the umbrella, the sound of rain hitting an umbrella appears.
  • If the user presses Totoro’s stomach, the sound of him growling/rumbling appears 
  • If the user presses Totoro’s leaf, the sound of rain hitting a leaf appears 
These are the areas where the user should press in order to trigger the sounds
The original image I used as a reference for my code

sketch

var umbPnt1X = 123;//front middle umbrella point X
var umbPnt1Y = 421;//front middle umbrella point Y
var umbPnt2X = 167;//X point right of umbPnt1
var umbPnt2Y = 422;//Y point right of umbPnt1
var umbPnt3X = 190;//X point right of umbPnt2
var umbPnt3Y = 429;//Y point right of umbPnt2
var umbPnt4X = 169;//X point left of umbPnt3
var umbPnt4Y = 437;//Y point left of umbPnt3
var umbPnt5X = 66;//X point left of umbPnt4
var umbPnt5Y = 435;//Y point left of umbPnt4
var umbPnt6X = 36;//X point left of umbPnt5
var umbPnt6Y = 431;//Y point left of umbPnt5
var umbPnt7X = 65;//X point right of umbPnt6
var umbPnt7Y = 425;//Y point right of umbPnt6

var rain;//will hold rain sound
var umbrellaRain;//will hold rain on umbrella sound
var growl;//will hold growl sound

function preload() {
    //sorry that this goes over the 80 limit. I couldn't separate the links 
    //because there would be a big pink bar meaning there were issues
    rain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rain-1.wav');//loads sound of rain
    umbrellaRain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/umbrellaRain.wav');//loads rain on umbrella sound
    leafRain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/leafRain.wav');//loads sound of rain on leaves
    growl = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/growl.wav');//loads sound of growl
}

function setup() {
    createCanvas(430, 600);
    useSound();//calls sound
}

function soundSetup() { // setup for audio generation
    rain.setVolume(0.5);//sets rain volume 
    umbrellaRain.setVolume(0.4);//sets umbrella rain volume
    leafRain.setVolume(0.4);
    growl.setVolume(0.3);//sets growl volume
    rain.loop();//loops rain audio so it keeps replaying
}

function draw() {
    background(100,174,236);//blue
//----------------------------------------------------------------------------
    //__________________________DRAWING__________________________

    //RAIN
    //---rain lines
    push();
    var r = 5;
    var R = 8;
    var n = 10;
    strokeWeight(.35);
    line(r * 5, r * 20, r * 5,r * 30);
    line(r * 15, r * 25, r * 15,r * 35);
    line(r * 20, r * 35, r * 20,r * 45);
    line(r * 25, r * 55, r * 25,r * 65);
    line(r * 30, r * 10, r * 30,r * 20);
    line(r * 45, r * 25, r * 45,r * 35);
    line(r * 45, r * 46, r * 45,r * 58);
    line(r * 50, r * 15, r * 50,r * 25);
    line(r * 55, r * 5, r * 55,r * 15);
    line(r * 60, r * 10, r * 60,r * 20);
    line(r * 60, r * 20, r * 60,r * 30);
    line(r * 65, r * 28, r * 65,r * 41);

    line(R * 5, R * 20, R * 5,R * 30);
    line(R * 15, R * 15, R * 15,R * 23);
    line(R * 20, R * 35, R * 20,R * 45);
    line(R * 30, R * 10, R * 30,R * 20);
    line(R * 45, R * 25, R * 45,R * 35);
    line(R * 50, R * 15, R * 50,R * 25);
    line(R * 55, R * 5, R * 55,R * 15);
    line(R * 60, R * 10, R * 60,R * 20);
    line(R * 60, R * 20, R * 60,R * 30);
    line(R * 65, R * 45, R * 65,R * 55);

    line(n * 1, n * 40, n * 1, n * 50);
    line(n * 3, n * 37, n * 3, n * 42);
    line(n * 3, n * 50, n * 3, n * 60);
    line(n * 2, n * 22, n * 2, n * 30);
    line(n * 7, r * 5, n * 7, r * 15);
    line(n * 7, n * 10, n * 7, n * 20);
    line(n * 9, n * 50, n * 9, n * 55);
    line(n * 10, n * 30, n * 10, n * 37);
    line(n * 18, n * 15, n * 18, n * 22);
    line(n * 17, n * .5, n * 17, n * 5);
    line(n * 37, n * 1, n * 37, n * 7);
    pop();
    
    strokeWeight(.5);
    //SIGN
    stroke('white');
    ellipse(52,324, 68,68);//sign
    line(20,314, 84,314);//top line
    line(20,334, 84,334);//bottom line
    line(48,358.5, 48,409.5);//left side of pole top
    line(56,358.5, 56,404);//right side of pole top
    line(48,430, 48,574);//left side of pole bottom
    line(56,431.5, 56,574);//right side of pole bottom
    bezier(48,574, 51,575, 53,575, 56,574);//bottom of pole
    fill('white');
    
    //---soot sprite
    var sprtSize = 8;//sprite size
    var sprtCrdX = 30;//sprite X coordinate 
    var sprtCrdY = 324;//sprite Y coordinate
    ellipse(sprtCrdX,sprtCrdY, sprtSize,sprtSize);//body
    //~~~spikes
    push();
    strokeWeight(.8);
    line(sprtCrdX - 5.5,sprtCrdY, sprtCrdX + 5.5,sprtCrdY);//horizontal
    line(sprtCrdX - 1,sprtCrdY - 5.5, sprtCrdX + 1,sprtCrdY + 5.5);//1L
    line(sprtCrdX + 1,sprtCrdY - 5.5, sprtCrdX - 1,sprtCrdY + 5.5);//1R
    line(sprtCrdX - 2,sprtCrdY - 5, sprtCrdX + 2,sprtCrdY + 5);//2L
    line(sprtCrdX + 2,sprtCrdY - 5, sprtCrdX - 2,sprtCrdY + 5);//2R
    line(sprtCrdX - 3,sprtCrdY - 4.5, sprtCrdX + 3,sprtCrdY + 4.5);//3L
    line(sprtCrdX + 3,sprtCrdY - 4.5, sprtCrdX - 3,sprtCrdY + 4.5);//3R
    line(sprtCrdX - 4,sprtCrdY - 4, sprtCrdX + 4,sprtCrdY + 4);//4L
    line(sprtCrdX + 4,sprtCrdY - 4, sprtCrdX - 4,sprtCrdY + 4);//4R
    line(sprtCrdX - 5,sprtCrdY - 2, sprtCrdX + 5,sprtCrdY + 2);//5L
    line(sprtCrdX + 5,sprtCrdY - 2, sprtCrdX - 5,sprtCrdY + 2);//5R
    line(sprtCrdX - 4.5,sprtCrdY - 3, sprtCrdX + 4.5,sprtCrdY + 3);//6L
    line(sprtCrdX + 4.5,sprtCrdY - 3, sprtCrdX - 4.5,sprtCrdY + 3);//6R
    line(sprtCrdX - 5.5,sprtCrdY - 1, sprtCrdX + 5.5,sprtCrdY + 1);//7L
    line(sprtCrdX + 5.5,sprtCrdY - 1, sprtCrdX - 5.5,sprtCrdY + 1);//7R
    line(sprtCrdX,sprtCrdY - 5.5, sprtCrdX,sprtCrdY + 5.5);//vertical
    pop();
    //---eyes
    //~~~whites
    push();
    push();
    stroke(100,174,236);//blue
    ellipse(sprtCrdX - 2.1,sprtCrdY, sprtSize / 2.4,sprtSize / 2.4);
    ellipse(sprtCrdX + 2.1,sprtCrdY, sprtSize / 2.4,sprtSize / 2.4);
    pop();
    //~~~pupils
    fill(100,174,236);//blue
    ellipse(sprtCrdX - 2.1,sprtCrdY, sprtSize / 4,sprtSize / 4);
    ellipse(sprtCrdX + 2.1,sprtCrdY, sprtSize / 4,sprtSize / 4);
    pop();

    //---white mini totoro
    ellipse(74,324, 10,12);//body
    ellipse(74,326, 11,10);//bottom
    //~~~ears
    bezier(69.5,322, 70.5,313.5, 71,313.5, 72,320);//left ear
    bezier(78.5,322, 77,313.5, 76.5,313.5, 75.5,320);//right ear
    //---eyes
    push();
    stroke(100,174,236);//blue
    //~~~whites
    ellipse(72,322, 3.5,3.5);//left 
    ellipse(76,322, 3.5,3.5);//right
    //~~~pupils
    fill(100,174,236);//blue
    ellipse(72,322, 1.2,1.2);//left
    ellipse(76,322, 1.2,1.2);//right
    pop();

    //---plants
    var stemX = 52//stem X of sign plant
    var stemY = 320;//stem Y of sign plant
    var leafW = 7;//leaf width of sign plant
    var leafH = 2.5;//leaf height of sign plant
    //~~~on sign
    line(stemX,stemY + 8, stemX,stemY);//stem
    ellipse(stemX + 4,stemY, leafW,leafH);//right leaf
    ellipse(stemX - 4,stemY, leafW,leafH);//left leaf
    //~~~on ground 
    line(stemX - 4,576, stemX - 4,573);//stem (left of pole)
    ellipse(stemX - 6,stemY + 252, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX - 2,stemY + 252, leafW - 3,leafH - .5);//left leaf
    line(stemX + 11,575, stemX + 11,567);//stem (right of pole big)
    ellipse(stemX + 14.5,stemY + 247, leafW - 1,leafH);//right leaf
    ellipse(stemX + 7.5,stemY + 247, leafW - 1,leafH);//left leaf  
    line(stemX + 14,576, stemX + 14,573);//stem (right of pole small 1)
    ellipse(stemX + 16,stemY + 252, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 12,stemY + 252, leafW - 3,leafH - .5);//left leaf
    line(stemX + 16.5,581, stemX + 16.5,579);//stem (right of pole small 2)
    ellipse(stemX + 18.5,stemY + 258, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 14.5,stemY + 258, leafW - 3,leafH - .5);//left leaf
    line(stemX + 24,577, stemX + 24,574);//stem (right of pole small 3)
    ellipse(stemX + 26,stemY + 254, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 22,stemY + 254, leafW - 3,leafH - .5);//left leaf
    line(stemX + 29,578, stemX + 29,577.5);//stem (right of pole small 4)
    ellipse(stemX + 30.5,stemY + 256.3, leafW - 4,leafH - .5);//right leaf
    ellipse(stemX + 27.5,stemY + 256.3, leafW - 4,leafH - .5);//left leaf
    line(stemX + 37.5,580, stemX + 37.5,579.5);//stem (right of pole small 5)
    ellipse(stemX + 38.7,stemY + 258.5, leafW - 5,leafH - 1.5);//right leaf
    ellipse(stemX + 36.2,stemY + 258.5, leafW - 5,leafH - 1.5);//left leaf

    noFill();
    //TOTORO
    //---eyes
    stroke(255);//WHITE
    ellipse((width / 2) + 37, (height / 2) + 6, 23,22);//left eyeball
    ellipse((width / 2) + 120, (height / 2) + 6, 23,22);//right eyeball
    ellipse((width / 2) + 37, (height / 2) + 6, 6,6);//left pupil
    ellipse((width / 2) + 120, (height / 2) + 6, 6,6);//right pupil
    push();
    noStroke();
    ellipse((width / 2) + 39, (height / 2) + 6, 1,2);//left eye shine
    ellipse((width / 2) + 122, (height / 2) + 5.5, 1,1);//right eye shine
    pop();
    //---nose
    stroke(255);
    bezier(277,308, 283,309, 292,310, 294,312);//left bottom line
    bezier(311,308, 303,309, 299,310, 294,312);//right bottom line
    bezier(277,308, 289,302, 300,302, 311,308);//top of triangle
    bezier(277,308, 289,298, 300,298, 311,308);//top arc 
    //~~~nostrils
    push();
    fill(100,174,236);
    ellipse(286,309, 4,4);//left
    ellipse(301,309, 4,4);//right
    pop();
    //---whiskers
    //~~~right 
    line(332,321, 395,318);//top
    line(339,326, 392,326);//middle
    line(338,331, 399,338);//bottom
    //~~~left
    line(252,321, 186,319);//top
    line(243,327, 187,330);//middle
    line(250,332, 192,344);//bottom
    //---ears
    //~~~left
    bezier(252,214, 241,245, 243,256, 242,264);//left side top
    bezier(252,214, 258,231, 266,242, 267,257);//right side top
    bezier(242,264, 243,265, 245,266, 248,266);//left side bottom
    bezier(267,257, 266,259, 265,261, 262,264);//right side bottom
    bezier(248,266, 249,269, 249,273, 249,276);//stem left
    bezier(262,264, 261,266, 262,270, 264,271);//stem right
    //~~~right
    bezier(338,214, 330,229, 326,248, 325,258);//left side top
    bezier(338,214, 341,227, 348,254, 345,264);//right side top
    bezier(325,258, 326,260, 328,261, 329,262);//left side bottom
    bezier(345,264, 344,265, 343,265, 342,265);//right side bottom
    bezier(329,262, 329,263, 329,264, 328,267);//stem left
    bezier(342,265, 342,268, 340,275, 342,278);//stem right
    //---head
    bezier(249,276, 223,290, 215,325, 207,353);//left side
    bezier(264,271, 266,271, 268,271, 271,270);//left bit next to ear
    bezier(342,278, 368,292, 368,325, 377,344);//right side
    //---Leaf
    //~~~stem
    bezier(295,265, 300,261, 298,245, 296,240);//right side
    bezier(296,240, 297,238, 298,238, 299,238);//top
    bezier(299,238, 301,246, 302,259, 300,267);//left side
    //~~~base
    bezier(273,272, 278,285, 289,284, 295,280);//left front lump
    bezier(295,280, 302,273, 310,275, 313,278);//middle front lump
    bezier(313,278, 319,281, 326,280, 328,274);//right front lump
    bezier(328,274, 328,270, 328,264, 326,262);//right of right lump
    bezier(326,262, 322,261, 313,263, 308,264);//right front lump top
    bezier(308,264, 306,264, 303,264, 301,264);//small bit right if stem
    bezier(296,263, 286,259, 277,258, 270,266);//back lump
    bezier(265,271, 264,262, 270,267, 273,272);//leftest lump
    line(267,266, 281,265.5);//line detail

    //---body
    //~~~stomach
    strokeWeight(.5);
    bezier(361,372, 327,332, 257,332, 227,372);//top curve
    bezier(227,372, 210,395, 200,434, 198,464);//left top
    bezier(361,372, 380,395, 385,434, 387,465);//right top
    bezier(361,562, 342,589, 250,590, 226,562);//bottom
    bezier(387,465, 391,515, 376,543, 361,562);//right bottom
    bezier(198,464, 194,501, 206,541, 226,562);//left bottom
    //~~~markings (from right to left and top to bottom)
    bezier(231,382, 238,368, 241,367, 247,378);//top 1
    bezier(231,382, 236,377, 241,374, 247,378);//bottom 1
    bezier(259,374, 266,362, 269,362, 278,372);//top 2
    bezier(259,374, 265,370, 270,370, 278,372);//bottom 2
    bezier(295,372, 302,360, 304,360, 315,371);//top 3
    bezier(295,372, 300,368, 309,368, 315,371);//bottom 3
    bezier(331,374, 337,361, 340,366, 349,377);//top 4
    bezier(331,374, 336,370, 343,372, 349,377);//bottom 4
    bezier(211,423, 215,409, 219,408, 221,418);//top 5
    bezier(211,423, 214,419, 216,416, 221,418);//bottom 5
    bezier(240,416, 247,400, 250,398, 257,413);//top 6
    bezier(240,416, 245,410, 252,409, 257,413);//bottom 6
    bezier(278,410, 286,394, 291,394, 297,410);//top 7
    bezier(278,410, 285,404, 290,405, 297,410);//bottom 7
    bezier(321,410, 328,395, 329,397, 341,413);//top 8
    bezier(321,410, 328,405, 334,408, 341,413);//bottom 8
    bezier(358,415, 362,403, 365,403, 372,418);//top 9
    bezier(358,415, 362,410, 366,410, 372,418);//bottom 9
    //~~~arms
    bezier(207,353, 193,373, 188,401, 185,417.5);//left top outer
    bezier(184,428, 179,452, 179,493, 192,503);//left bottom outer
    bezier(377,344, 406,390, 407,440, 410,455);//top right outer
    bezier(410,455, 410,469, 406,498, 394,509);//bottom right outer
    bezier(206,396, 194,425, 190,473, 192,503);//left inner
    bezier(390,403, 396,445, 396,479, 394,509);//right inner
    //~~~legs
    //L
    bezier(192,503, 192,532, 206,566, 226,576.5);//left outer
    bezier(243,580, 249,582, 261,582, 268,581);//left bottom
    //R
    bezier(359,580, 352,581, 338,582, 326,580);//right bottom
    bezier(394,509, 394,537, 390,561, 375,576);//right outer
    //---claws
    //~~~on hands
    bezier(186,495, 183,505, 185,506, 189,500);//left of left
    bezier(190,501, 181,517, 183,517, 192,506);//right of left
    bezier(402,496, 409,508, 408,509, 400,500);//right of right
    bezier(399,502, 406,512, 405,514, 397,505);//middle of right
    bezier(396,507, 398,513, 398,515, 394,510);//bottom of right
    //~~~on feet
    //L
    bezier(229,576.5, 207,578, 210,580, 221,580);//leftest claw of left
    bezier(220,581, 227,576, 234,576, 237,579);//top of middle of left
    bezier(220,581, 226,580, 232,579, 237,579);//top of middle of left
    bezier(243,580, 239,578, 237,579, 235,581);//top of rightest of left
    bezier(243,580, 240,581, 237,582, 235,581);//bottom of rightest
    //R
    bezier(373,576, 378,576, 383,577, 387,581);//top of rightest of right
    bezier(373,576, 371,580, 382,579, 387,581);//bottom of rightest of right
    bezier(365,579, 369,576, 374,578, 381,583);//top of middle of right
    bezier(365,579, 370,580, 374,581, 381,583);//bottom of middle of right
    bezier(359,580, 362,577, 365,579, 370,582.5);//top of leftest of right
    bezier(359,580, 362,581, 365,582, 370,582.5);//bottom of leftest of right
//----------------------------------------------------------------------------
    //SATSUKI
    //---Head
    bezier(110.5,450, 116,456, 127,458, 134,450);//bottom
    bezier(134,450, 134,445, 136,440, 137,439);//right cheek
    line(109,447.5, 109.5,448.5);//left little cheek
    //~~~ears
    bezier(107,447, 101,441, 105,436, 108,442);//left
    line(107,447, 109,447.5);//left lobe
    line(105,441, 108,444);//left line
    bezier(134.5,447, 137,447, 140,443, 137,439);//right
    bezier(135,445, 137,443, 137,441, 136,440);//right line
    //---neck
    line(118,455., 118,457);//left side
    line(125.5,455.5, 125.5,458);//right side
    //---Face
    //~~~blush
    ellipse(113,444, 2,1);//left
    ellipse(132,444, 2,1);//right
    //~~~mouth
    bezier(121,452, 122,450, 124,450, 125,452);//mouth
    line(122.6,453, 123.4,453);//bottom lip
    //~~~nostrils
    point(121, 443);//left
    point(123, 443);//right
    //~~~eyebrows
    bezier(112,434, 114,432, 115,432, 117,434);//left
    bezier(127,434, 129,432, 130,432, 132,434);//right
    //---eyes
    //~~~outline
    //L
    bezier(112,439, 112,435, 116,435, 117,438);//left top
    line(129,442, 130.5,442);//left bottom
    //R
    bezier(127,438, 129,435, 131,435, 132.5,439);//right top
    line(114,442, 115.5,442);//right bottom
    //~~~pupils
    ellipse(114.5,439, 2,3);//left
    ellipse(129.5,439, 2,3);//right
    //---Hair
    //~~~inner
    bezier(137,439, 137,434, 137,426, 132,423);//right inner
    bezier(108,442, 108,438, 107, 434, 109.5,432);//left inner
    //~~~details
    bezier(110.5,431.5, 113,430, 118,429, 121,429);//bang bottom
    bezier(121,429, 123,428, 124,426, 125,424);//bang right
    bezier(123.5,429, 126,426, 126,425, 125,424);//big hair piece left
    bezier(123.5,429, 128,428, 130,423, 129,421);//big hair piece right
    bezier(129,421, 130.5,426, 131,426, 132,423);//small hair piece
    //~~~outer
    bezier(104,440, 99,431, 102,421, 106,418);//outer left
    bezier(138,440, 144,438, 143,421, 136,417);//outer right
    //~~~pony tails
    //L
    bezier(85,440, 87,436, 89,431, 97,429);//left top of left
    bezier(85,440, 87,438, 88,437, 89,435);//left bit of left
    bezier(87.5,438, 85,440, 86,445, 90,450);//left bottom of left
    bezier(90,450, 97,446, 100,442, 100,441);//right bottom of left
    bezier(100,441, 101,437, 100,433, 99.5,434);//right top of left
    //R
    bezier(146,429, 154,431, 157,438, 157,442);//right top of right
    bezier(152,450, 154,448, 155,447, 155,447);//right bottom of right
    bezier(152,450, 151,449, 149,448, 149,448);//left bottom of right bottom
    bezier(142,442, 142,442, 143,443, 145,445);//left bottom of right top
    line(141.5,436, 142,442);//left top of right 
    //~~~hair tie balls
    //R
    ellipse(144.5,428, 4,4);//right front
    ellipse(143.5,426, 4,4);//right back
    //L
    ellipse(99,428, 4,4);//left front
    ellipse(100,424, 4,4);//left back
    ellipse(99,432, 4,4);//left back bottom
    //---Clothes
    //---shirt
    bezier(132.5,485, 132,483, 132,483, 132,481);//right side bottom
    bezier(132,481, 134.5,477, 133,473, 133.5,466.5);//right side top
    //~~~collar
    //L
    bezier(113.5,458, 114,459, 113,463, 115.5,467);//collar left outer
    bezier(117,456, 117,457, 119,460, 122.5,461);//collar left inner
    bezier(117,456, 116,456, 115,458, 113.5,458);//collar left back
    bezier(115.5,467, 119,465, 121,461, 122.5,461);//collar left middle
    //R
    bezier(129,466, 130,464, 131,461, 130,458);//collar right outer
    bezier(126,456, 127,457, 124,460, 122.5,461);//collar right inner
    bezier(126,456, 128,455, 129,458, 130,458);//collar right back
    bezier(129,466, 127,466, 124,463, 122.5,461);//collar right middle
    //M
    ellipse(122,465, 2,2);//button
    //~~~sleeves
    //L
    bezier(107,458, 109,458, 111,459, 113.5,458);//left top of shoulder
    bezier(107,458, 102,461, 103,469, 100,474);//left of left sleeve
    bezier(105,477, 99,472, 98,474, 104,478);//opening of left
    //R
    bezier(130,458, 133,459, 135, 458, 136,459);//right top of shoulder
    bezier(136,459, 140,460, 141,467, 141,468);//right of right sleeve
    bezier(133.5,477, 136,476, 137,475, 140,472);//opening of right
    line(133.5,470, 135,467.5);//crease
    //~~~skirt
    bezier(95.5,513, 98.7,513, 102,492, 111,488);//left side
    bezier(95.5,513, 96,519, 105,515, 114,521);//bottom right
    bezier(114,521, 127,523, 140,520, 147,515);//bottom left
    bezier(147,515, 141,509, 142,494, 133,489);//right side
    bezier(133,489, 133,487, 133,486, 133,485);//right band
    bezier(116,485, 120,486.2, 127,486.4, 133,485);//top
    line(119,489.5, 125,489.5);//bottom band line
    //~~~skirt straps
    //R
    bezier(129,466, 128.5,480, 128.5,471, 129,486);//left of right strap
    bezier(130.5,485, 131,479, 132,469, 131,458);//right of right strap
    //L
    line(112.5,484, 113,472);//left of left strap bottom
    bezier(112.5,465, 113,462, 113,460, 113.5,458);//left of left strap top
    line(115.5,474, 115.5,467);//right of left strap
    //~~~skirt buttons
    ellipse(115,487, 3,3);//left
    ellipse(130,487, 3,3);//right
    //---umbrellas
    //~~~handle
    //pink
    bezier(109,477.5, 107,491, 118,491, 117,476);//outer loop
    bezier(111,476.5, 110,487, 116,487, 114.5,476);//inner loop
    bezier(114.5,476, 115.5,474, 116,474, 117,476);//top of loop
    bezier(109,466, 109,462, 111,462, 111,466);//top of handle
    //black
    bezier(142,456, 142,436, 166,438, 162,456);//outer loop curve
    bezier(141,469, 142,463, 142,459, 142,456);//outer loop line
    bezier(147,456, 147,442, 160,444, 157,456);//inner loop curve
    bezier(146,469, 146,464, 147,461, 147,456);//inner loop line
    bezier(157,456, 157.5,461, 161.5,461, 162,456);//bottom of loop
    bezier(141,469, 143,469.5, 144,469.5, 146,469);//bottom line
    bezier(141,469, 139.5,470, 140,470, 140,472);//left side of rectangle
    bezier(146,469, 147,471, 146,471, 146,472.5);//right side of rectangle
    line(140,472, 143,472);//bottom of rectangle
    //~~~umbrella body
    //R
    bezier(136,532, 137,528, 138,523, 139,519);//bottom part near leg
    bezier(142,503, 145,498, 143,494, 143,492);//middle of right
    bezier(143,490, 150,485, 150,485, 146,481);//top of right
    //L
    bezier(137,492, 137,485, 136,479, 138,479);//left long bit
    line(141,473, 141,472);//left short bit
    //S
    bezier(143,492, 143.5,491, 143.5,491, 143,490);//right of strap
    bezier(137,489, 138.5,490.5, 141,490.5, 143,490);//top of strap
    bezier(137,492, 139.5,493, 141,493, 143,492);//bottom of strap
    //D
    line(145,482, 147.5,485);//detail right diagonal
    line(144,488, 145,483);//detail vertical right
    line(143,487, 143.5,485);//detail  vertical  (small)
    line(141.5,487, 142,481);//detail vertical left
    line(139,488, 139.5,479);//detail vertical (long)
    line(141.5,493, 142,495);//detail bottom right
    line(140,493, 139.5,494);//detail bottom left
    push();
    //~~~stem
    strokeWeight(.5);
    line(110,463, 110,418);//left
    line(110.5,463, 110,418);//right
    pop();
    //~~~arcs
    bezier(umbPnt1X,umbPnt1Y, 137,414, 159,415, umbPnt2X,umbPnt2Y);//arc 1-- 
        //--(right of p1)
    bezier(umbPnt2X,umbPnt2Y, 180,421, 186,425, umbPnt3X,umbPnt3Y);//arc 2 
    bezier(189,428, 183,427, 174,429, umbPnt4X,umbPnt4Y);//arc 3
    bezier(153,433, 157,432, 163,432, umbPnt4X,umbPnt4Y);//arc 4
    bezier(89,433, 84,432, 73,432, umbPnt5X,umbPnt5Y);//arc 5
    bezier(umbPnt5X,umbPnt5Y, 58,430, 47,428, 38.3,430);//arc 6
    bezier(umbPnt6X,umbPnt6Y, 44,425, 55,421, umbPnt7X,umbPnt7Y);//arc 7
    bezier(umbPnt7X,umbPnt7Y, 83,416, 114,416, umbPnt1X,umbPnt1Y);//arc 8-- 
        //--(left of p1)
    //~~~dividing lines
    bezier(81,395.5, 50,401, 36,420, umbPnt6X,umbPnt6Y);//leftest outline
    bezier(88,393, 74,396, 66,412, umbPnt7X,umbPnt7Y);//left line
    bezier(118,391, 124,400, 123,416, umbPnt1X,umbPnt1Y);//middle line
    bezier(145,392, 163,397, 166,413, umbPnt2X,umbPnt2Y);//rightline
    bezier(154,396, 180,403, 187,419, umbPnt3X,umbPnt3Y);//rightest outline
    bezier(118,391, 108,393, 98,393, 88,393);//top left
    bezier(118,391, 128,393, 139,392, 145,392);//top right
    bezier(161,419.3, 167,425, 168,432, umbPnt4X,umbPnt4Y);//underneath right
    bezier(74,421.9, 69,427, 68,431, umbPnt5X,umbPnt5Y);//underneath left
    //---Limbs
    //~~~arms
    //L
    bezier(105,489, 101,483, 102,480, 105,477);//left of left arm
    bezier(105,489, 108,488, 108,487, 109,486);//bottom of left arm
    //R
    bezier(134.5,477, 135,480, 136,482, 136.5,484);//right arm
    //~~~hands
    strokeWeight(.7);
    bezier(105,477, 104,474, 104.5,471, 104.5,469);//left hand left side
    bezier(104.5,469, 107,466, 110,466, 112,466.5);//left hand top
    bezier(109,477.5, 111,476, 112,476, 112,476);//left hand bottom
    //~~~fingers
    //L
    bezier(108,469, 114,468, 111,469, 112,466.5);//top finger left
    bezier(108,471.5, 113,470, 112,472, 112,469);//2nd left
    bezier(109,474, 113,473, 112,473, 112,471);//3rd left
    bezier(112,476, 112.5,475.5, 112.5,475, 112,474);//bottom left
    bezier(112,468, 114,470, 114,471, 112,473);//thumb left
    //R
    bezier(145,472.5, 147,473, 147,478, 146,481);//right side
    bezier(145,472.5, 139,473.5, 139,476, 146,474.5);//top finger right
    bezier(146,475, 140,476, 140,477, 146,477);//2nd right
    bezier(146,477, 141,478.5, 141,479.5, 146,479);//3rd right
    bezier(146,479, 142,481, 142,481, 146,481);//bottom right
    bezier(137,479, 137,475, 138,474, 141,472.5);//thumb right outer
    bezier(137,479, 137,480.5, 142,474, 140,474);//thumb right inner
    //~~~legs
    //L
    bezier(109,547, 108,543, 106,535, 109.5,526);//calf of left leg
    bezier(109.5,526, 110,523, 109.5,522, 108.5,518.5);//left of left leg top
    bezier(118,547, 118,540, 120,528, 119,522);//right of left leg
    bezier(111,526.5, 111,527, 111,527, 113,528.5);//detail left leg
    //R
    bezier(135,548, 136,540, 137,533, 135,527);//calf of right leg
    bezier(135,527, 135,525, 134.5,523, 135.5,520);//left of right leg top
    bezier(127,548, 126.5,540, 124,526, 124.5,522);//left of right leg
    bezier(127,529, 127.5,530, 128,530, 128,531);//detail right leg left
    line(132,530, 133,529);//detail right leg right
    //~~~boots
    //L
    bezier(107,547, 111,548, 114,548, 118,547);//top curve of left
    bezier(108,545, 103.5,544, 105,564, 107,569);//left of left side top
    bezier(107,569, 106,572, 104,575, 106,577);//left of left side bottom
    bezier(106,577, 110,584, 119,580.5, 121,580);//bottom curve of left
    bezier(121,580, 122,576, 121,573, 119,570);//right of right side bottom
    bezier(119,570, 120,559, 123,546, 118,545);//right of left side top
    //R
    bezier(126,547, 127,549, 133,549, 137,547);//top curve of right
    bezier(135,545.5, 142.5,545, 137,563, 137,570);//right of right side top
    bezier(137,570, 138,574, 139,577, 138,580);//right of right side bottom
    bezier(138,580, 134,582, 127,582, 123,580);//bottom curve of right
    bezier(123,580, 122,577, 124,573, 125,569);//left of right side bottom
    bezier(125,569, 125,558, 121,545, 127,546);//right of right side top
}

function mousePressed() {//if mouse is pressed...
    //if the mouse is pressed between these specific areas, then...
    if(dist(mouseX,mouseY, 294,440) < 85){///growl 
        growl.play();//plays growl audio
    }
    if(dist(mouseX,mouseY, 115,406) < 75){///umbrella rain 
        umbrellaRain.play();//plays rain on umbrella audio
    }
    if(dist(mouseX,mouseY, 297,269) < 65){//leaf rain sound
        leafRain.play();//plays rain on leaves audio
    }
}

Leave a Reply