Month: November 2019

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 

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
    }
}

sketch

For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10

var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds

function preload() {
    // loads four sounds
    field = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
    night = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
    daytime = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
    river = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");
}

function setup() {
    createCanvas(480, 480);
    useSound();
}

function soundSetup() { // setup for audio generation
    field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
    night.setVolume(0.1);
    daytime.setVolume(0.1);
    river.setVolume(0.1);
}

function draw() {
    background(200);

    noStroke();
    colorMode(HSB, 100); //switches color mode to HSB, easier to manipulate with mouse
    var constMouseX = constrain(mouseX, 0, width); //constrains X direction of mouse within canvas
    var constMouseY = constrain(mouseY, 0, height); //constrains Y direction of mouse within canvas

    //variables for the different colors
    var skyColor = color(55, 55, map(constMouseX, 0, width, 25, 100)); //sky changes color w/ mouse position between light and dark blue
    var mountainColor = color(25, 55, map(constMouseX, 0, width, 0, 85)); //mountains change color w/ mouse between light and dark green
    var desertColor = color(map(constMouseY, 0, height, 10, 25), 67, 75); //field or desert changes color w/ mouse between brown and green
    var riverColor = color(48, 70, map(constMouseY, height, 0, 50, 100)); //river changes color w/ mouse slightly from light to dark blue
    
    //sky
    createSky(skyColor);
    //background mountains
    createMountains(mountainColor);
    //desert or field
    createDesert(desertColor);
    //river
    createRiver(riverColor);
    
}
function mousePressed() {
    if (mouseX < (width / 2)) {
        night.play(0, 1, 2); //plays nighttime sounds
    } else {
        night.pause();
    }
    if (mouseX > (width / 2)) {
        daytime.play(0, 1, 2); //plays daytime sounds
    } else {
        daytime.pause();
    }
    if (mouseY < (height / 2)) {
        field.play(0, 1, 2); //plays field sounds
    } else {
        field.pause();
    }
    if (mouseY > (height / 2)) {
        river.play(0, 1, 2); //plays river sounds
    } else {
        river.pause();
    }
}

function createSky(fillColor) { //function creates the sky
    fill(fillColor);
    rect(0, 0, width, height);
}
function createMountains(fillColor) { //function creates background hills
    var mountainY = height * 2 / 3;
    fill(fillColor);
    ellipse(width / 5, mountainY, width / 2, height / 2);
    ellipse(width * 2 / 3, mountainY, width * 3 / 4, height * 4 / 5);
}
function createDesert(fillColor) { //function creates desert/field
    var desertY = height * 5 / 8;
    fill(fillColor);
    rect(0, desertY, width, desertY);
}
function createRiver(fillColor) { //function creates river
    var riverY = height * 7 / 8;
    fill(fillColor);
    var constRivMouseY = constrain(mouseY, height / 2, height); //river only starts to appear when the mouse is below the halfway mark
    rect(0, map(constRivMouseY, height, height / 2, riverY, height), width, riverY);
}

sketch-152.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-10

//size of the vinyl
var size1 = 300;
//size of the label
var size2 = 100;

function preload(){
    jazz1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/475409__sandib__bass2.wav");
    jazz2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/49658__sub-d__more-jazz-guitar.wav");
    jazz3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/233699__gulyas25__acid-jazz-loop-music-bed.wav");
    jazz4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/187099__simondsouza__alto-sax-90bpm-cm-4-solo.wav");
    jazz4.setVolumn(0.1);
}


function setup() {
    createCanvas(500, 500);
}

function draw() {
    background(250);
    drawRecord();
}
function drawRecord(){
    fill(0);
    ellipse(width/2, width/2, size1, size1);

    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(105);
        strokeCap(SQUARE);
        strokeWeight(0.4);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 0.8 * PI);
    }

    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(255);
        strokeCap(SQUARE);
        strokeWeight(1);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
    }
    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(105);
        strokeCap(SQUARE);
        strokeWeight(0.4);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 1.8 * PI);
    }
    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(255);
        strokeCap(SQUARE);
        strokeWeight(1);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI);
    }

    fill(250,50);
    arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
    fill(250,50);
    arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI)

    //drawing red label
    fill(255, 0, 0);
    noStroke();
    ellipse(width/2, width/2, size2, size2);

    //drawing controls
    var yc = constrain(mouseY,350, 470);

    fill(100);
    rect(410, 350, 10, 120);
    fill(0);
    rect(400, yc, 30, 15);

    fill(100);
    rect(450, 350, 10, 120);
    fill(0);
    rect(440, yc, 30, 15);

    fill(100);
    ellipse(430, 100, 60, 60);
    fill(0);
    ellipse(430, 100, 40, 40);

    fill(100);
    ellipse(450, 160, 45, 45);
    fill(0);
    ellipse(450, 160, 30, 30);

}

function mousePressed() {
    //setting mousepresed location
    if (dist(mouseX,mouseY, width / 2, height/ 2) <= size1 ) {
        jazz1.play();
        } else {
        jazz1.pause();
        }
    if (dist(mouseX, mouseY, 430, 100) <= 60) {
        jazz2.play();
        } else {
        jazz2.pause();
        }
    if (dist(mouseX, mouseY, 450, 160) <= 45) {
        jazz3.play();
        } else {
        jazz3.pause();
        }
}

function mouseMoved(){
    if (mouseX <= 450 & mouseX >= 410 && mouseY <= 470 && mouseY >= 350) {
        jazz4.play();
        } else {
        jazz4.pause();
        }
}

It is inspired by jazz mixtapes. there are 3 different jazz tracks that can be started and paused by pressing the buttons and the record player. The fouth is controlled by the moving control which is more interesting to play with.

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-10-SonicSketch

var myTopL;
var myTopR;
var myBotL;
var myBotR;

function preload() {
    myTopL = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/808bass.wav");
    myTopR = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bass-1.wav");
    myBotL = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snare-1.wav");
    myBotR = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hihat.wav");
}

function setup() {
    createCanvas(400, 400);
    //======== call the following to use sound =========
    useSound();
}

function soundSetup() { // setup for audio generation
    myTopL.setVolume(0.5); //808 bass
    myTopR.setVolume(0.3); //bass
    myBotL.setVolume(0.3); //snare
    myBotR.setVolume(0.3); //hihat
}

function draw() {
    background(0);
//draw each squares
    push();
    translate(40, 40);
    fill('yellow');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(210, 40);
    fill('red');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(40, 210);
    fill('blue');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(210, 210);
    fill('green');
    rect(0, 0, 150, 150);
    pop();
}

//when a square is pressed, play the sound
function mousePressed() {
    if (mouseX > 40 & mouseX < 190 && mouseY > 40 && mouseY < 190) {
        myTopL.play();//808bass
    }
    if (mouseX > 210 & mouseX < 360 && mouseY > 40 && mouseY < 190) {
        myTopR.play();//bass
    }
    if (mouseX > 40 & mouseX < 190 && mouseY > 210 && mouseY < 360) {
        myBotL.play();//snare
    }
    if (mouseX > 210 & mouseX < 360 && mouseY > 210 && mouseY < 360) {
        myBotR.play();//hihat
    }
}

For this project, I wanted to create a very simple version of “launchpad.” The four sounds are some of the most common sounds used in beat-making.

Each button plays different sounds:

Yellow – 808 Bass

Red- Bass

Blue – Snare

Green – Hi-hat

reshin-10-pokemon

/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 10 

*/

// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

var imageLinks = [
    "https://i.imgur.com/VyMU3A0.png", //charmander
    "https://i.imgur.com/qji2HbI.png", //pikachu
    "https://i.imgur.com/dHUobNP.png", //squirtle
    "https://i.imgur.com/bugsaaS.png", //bulbasaur
]

//image variables

var charmander;
var pikachu;
var squirtle;
var bulbasaur;

//sound variables;
var fire;
var thunder;
var water;
var grass;

function preload() {
    //loading images
    charmander = loadImage("https://i.imgur.com/VyMU3A0.png");
    pikachu = loadImage("https://i.imgur.com/qji2HbI.png");
    squirtle = loadImage("https://i.imgur.com/dHUobNP.png");
    bulbasaur = loadImage("https://i.imgur.com/bugsaaS.png");

    //loading sounds
    fire = loadSound("fire-2.wav");
    thunder = loadSound("thunder.wav");
    water = loadSound("water-4.wav");
    grass = loadSound("grass.wav");

    // call loadImage() and loadSound() for all media files here
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    usesound();
}


function soundSetup() { // setup for audio generation
    fire.setVolume(3);
    thunder.setVolume(1);
    water.setVolume(1.5);
    grass.setVolume(1.2);
}


function draw() {
    background(196, 186, 118);;

    // images of the four elements
    image(charmander, 0, 0, width/2, height/2);
    image(pikachu, width/2, 0, width/2, height/2);
    image(squirtle, 0, height/2, width/2, height/2);
    image(bulbasaur, width/2, height/2, width/2, height/2);
}
  
function mousePressed() {

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= 0 && mouseY < height/2) {
        fire.play();
    } 
    else { 
        fire.pause();
    }

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= height/2 && mouseY < height) {
        water.play();
    } 
    else {
        water.pause();
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= 0 && mouseY < height/2) {
        thunder.play();
    } 
    else {
        thunder.pause(); 
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= height/2 && mouseY < height) {
        grass.play();
    } 
    else {
        grass.pause();
    }
}

After thinking of ways to incorporate 4 different sounds, I immediately thought of the 4 elements, and I decided to connect it to one of my childhood favorites- Pokemon. I decided to use the first four Pokemon that I loved and used their types and connected it to different sounds. I was inspired by the legendary Pokemon mural from the first season of Pokemon. It was fun to configure sound and visuals together especially when it came to designing my own version of the mural with 4 basic Pokemon that I loved as a kid.