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

Gretchen Kupferschmid-Project 10 Sonic Sketch

sketch

//gretchen kupferschmid
//gkupfers@andrew.cmu.edu
//project 10
//section e

var banana;
var lick;
var mouth;
var eyes;


function preload() {
    // call loadImage() and loadSound() for all media files here
    banana = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/banana.wav");
    lick = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lick.wav");
    mouth = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mouth.wav");
    eyes = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/eyes.wav");
    
}


function setup() {
    createCanvas(480, 480);
    useSound();
    //======== call the following to use sound =========
   
}
function soundSetup() { // setup for audio generation
    banana.setVolume(0.5); 
    lick.setVolume(0.5); 
    mouth.setVolume(0.5); 
    eyes.setVolume(0.5); 
}



function draw() {
    background(241,198,217);
    
    
    //mouth lips
    noStroke();
    fill(255,0,0);
    beginShape();
    curveVertex(68,359);
    curveVertex(101,319);
    curveVertex(133,304);
    curveVertex(150,312);
    curveVertex(175,302);
    curveVertex(196,329);
    curveVertex(188,360);
    curveVertex(197,416);
    curveVertex(156,431);
    curveVertex(111,404);
    curveVertex(68,359);
    curveVertex(101,319);
    endShape();
    
    
    //mouth black
    fill(0);
    beginShape();
    curveVertex(87,357);
    curveVertex(100,350);
    curveVertex(112,337);
    curveVertex(130,328);
    curveVertex(146,327);
    curveVertex(170,320);
    curveVertex(181,330);
    curveVertex(178,363);
    curveVertex(142,363);
    curveVertex(87,357);
    curveVertex(100,350);
    endShape();
    
    //mouth toungue
    fill(240,110,270);
    noStroke();
    beginShape();
    curveVertex(84,357);
    curveVertex(127,358);
    curveVertex(176,365);
    curveVertex(177,408);
    curveVertex(133,398);
    curveVertex(84,357);
    curveVertex(127,358);
    endShape();
    
    
    
    //mouth teeth
    fill(255);
    beginShape();
    curveVertex(107,341);
    curveVertex(129,328);
    curveVertex(148,327);
    curveVertex(171,320);
    curveVertex(180,327);
    curveVertex(175,340);
    curveVertex(158,343);
    curveVertex(150,340);
    curveVertex(146,342);
    curveVertex(127,341);
    curveVertex(120,345);
    curveVertex(114,340);
    curveVertex(107,341);
    endShape();
    
    //banana
    fill(235,222,176);
    beginShape();
    curveVertex(325,39);
    curveVertex(325,45);
    curveVertex(326,10);
    curveVertex(336,9);
    curveVertex(347,39);
    curveVertex(363,77);
    curveVertex(352,90);
    curveVertex(332,89);
    curveVertex(325,39);
    endShape();
    
    
    //banana peel
    fill(240,201,66);
    beginShape();
    curveVertex(304,166);
    curveVertex(311,149);
    curveVertex(310,102);
    curveVertex(318,80);
    curveVertex(331,86);
    curveVertex(343,92);
    curveVertex(349,86);
    curveVertex(364,80);
    curveVertex(364,64);
    curveVertex(407,89);
    curveVertex(423,115);
    curveVertex(412,117);
    curveVertex(395,108);
    curveVertex(379,104);
    curveVertex(373,96);
    curveVertex(383,132);
    curveVertex(412,189);
    curveVertex(398,194);
    curveVertex(372,181);
    curveVertex(340,134);
    curveVertex(331,104);
    curveVertex(329,113);
    curveVertex(331,134);
    curveVertex(326,161);
    curveVertex(306,167);
    curveVertex(304,166);
    curveVertex(311,149);
    endShape();
    
    //banana dots
    fill(96,57,19);
    ellipse(359,155,6,6);
    ellipse(366,160,4,5);
    ellipse(363,165,3,5.5);
    
    //ice cream cone
    fill(166,124,82);
    triangle(337,437,290,310,384,310);
    
    //ice cream cone shadow
    fill(124,88,53);
    ellipse(337,320,80, 20);
    
    //ice cream
    fill(240,110,170);
    beginShape();
    curveVertex(275,296);
    curveVertex(283,279);
    curveVertex(299.270);
    curveVertex(304,259);
    curveVertex(317,255);
    curveVertex(321,240);
    curveVertex(330,236);
    curveVertex(336,220);
    curveVertex(349,210);
    curveVertex(347,226);
    curveVertex(357,234);
    curveVertex(362,245);
    curveVertex(364,247);
    curveVertex(378,256);
    curveVertex(362,268);
    curveVertex(394,292);
    curveVertex(397,311);
    curveVertex(352,319);
    curveVertex(351,314);
    curveVertex(293,316);
    curveVertex(277,304);
    curveVertex(275,296);
    curveVertex(283,279);
    endShape();
    
    //eye line
    noFill();
    stroke(0);
    strokeWeight(4);
    beginShape();
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    curveVertex(184,124);
    curveVertex(182,128);
    curveVertex(152,145);
    curveVertex(100,147);
    curveVertex(60,132);
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    endShape();
    
    //eye interior
    noStroke();
    fill(0,174,239);
    ellipse(126,124,50,50);
    fill(0);
    ellipse(133,119,14,14);
    
    //eyelashes
    strokeWeight(4);
    stroke(0);
    line(65,123,52,108);
    line(75,114,64,95);
    line(94,104,87,86);
    line(108,98,105,82);
    line(129,95,130,77);
    line(150,99,155,81);
    line(163,107,178,88);
    line(178,118,192,102);
 
}

function mousePressed(){
    if(mouseX > 305 & mouseX < 423 && mouseY > 7.2 && mouseY < 195){
        banana.play();
    }
    if (mouseX > 275 & mouseX < 398 && mouseY > 211 && mouseY < 436){
        lick.play();
    }
    if (mouseX > 70 & mouseX < 196 && mouseY > 302 && mouseY < 432){
        mouth.play();
    }
    if (mouseX > 52 & mouseX < 192 && mouseY > 76 && mouseY < 150){
        eyes.play();
    }
}

I wanted to play with icons and the sounds that could possibly go with these when clicked on. I could see myself implementing this into my website later on so that sounds can accompany my illustrations.

Julia Nishizaki – Project 10 – Sonic Sketch


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

Crystal-Xue-Project-10

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.

Claire Lee – Project 10 – Sonic Sketch

project10

/* 
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/

// I'm using one of my grace days for this project!

var bearUrls = [
    "https://i.imgur.com/BOQ7Bt9.jpg", 
    "https://i.imgur.com/uhBjJf4.jpg",
    "https://i.imgur.com/UK6rJXn.jpg",
    "https://i.imgur.com/UsOhg2L.jpg" ]

var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;

var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables

function preload() {
    bearBrown  = loadImage(bearUrls[0]);
    bearPolar = loadImage(bearUrls[1]);
    bearBlack = loadImage(bearUrls[2]);
    bearPanda = loadImage(bearUrls[3]);
    //loading the images

    bearBrownSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
    bearPolarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
    bearBlackSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
    bearPandaSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav");
    //loading the sounds
}


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

function soundSetup() { // setup for audio generation
    bearBrownSound.setVolume(1);
    bearPolarSound.setVolume(1);
    bearBlackSound.setVolume(1);
    bearPandaSound.setVolume(1);
}


function draw() {
    image(bearBrown, 0, 0, width/4, height);
    image(bearPolar, width/4, 0, width/4, height);
    image(bearBlack, width/2, 0, width/4, height);
    image(bearPanda, 3*width/4, 0, width/4, height);
    //divides canvas into quarters and sets different image for each
}

function mousePressed() {
    if (mouseX > 0 & mouseX < (width/4)) {
        bearBrownSound.play();
    } else {
        bearBrownSound.pause();
    }
    // brown bear sound

    if (mouseX > (width/4) & mouseX < (width/2)) {
        bearPolarSound.play();
    } else {
        bearPolarSound.pause();
    }
    // polar bear sound

    if (mouseX > (width/2) & mouseX < (3*width/4)) {
        bearBlackSound.play();
    } else {
        bearBlackSound.pause();
    }
    // black bear sound

    if (mouseX > (3*width/4) & mouseX < width) {
        bearPandaSound.play();
    } else {
        bearPandaSound.pause();
    }
    //panda bear sound
}

I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.

Minjae Jeong-project10-sonic sketch

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

Danny Cho – LookingOutwards 10

The Weather Thingy is an instrument that takes into account the weather to play various sounds in harmony. I found the serenity produced by this project fascinating. Different sensors bring the numerical input to be translated into the algorithm and produce sound. The ambience of the sound and the concept of weather go along very well together.

This project makes me wonder the very extreme cases and different possible variables. For instance, when it is hailing, what will happen? Or when the climate is very arid and hot? I think this project has a lot of potential and room to explore.

Weather Thingy – ECAL/Adrien Kaeser

Jacky Tian’s LookingOutwards-10

Computer Music —— The Emerging Art of Algorithmic Music

Ville-Matias Heikkila, a Finnish artist and computer programmer, has been experimenting with algorithmic music with the help of computer programs. He proposed that we need to not only listen to the music, but also be able to visualize it to enhance the impact that music can bring to us.

Heikkila says that sometime, codes and algorithms can generate surprisingly interesting music by repeating only two or three arithmetic operations. Therefore, he is really interested in creating audio and visual artworks with simple programs but in a rather disorganized way.

Danny Cho – SonicSketch Project 10


sketch

I made an interactive sound grid where the position of your mouse determines which of the soundtracks are being played the loudest. The ellipses also change colors and scales accordingly. There is unbalance due to innate volume difference in the sound files. The sound files are all 120bpm to match the beat, but due to the volume imbalance, it’s hard to be aware of individual sounds.

//Danny Cho
//changjuc@andrew.cmu.edu
//Section A
//Project 10

var px = [];
var py = [];
var div = 10;
var noiseOn = false;
var myLeftTop;
var myRightTop;
var myLeftBot;
var myRightBot;

function preload() {
    myLeftTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftTop-1.wav");
    myRightTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightTop.wav");
    myLeftBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftBot.wav");
    myRightBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightBot.wav");
    // call loadImage() and loadSound() for all media files here
}


function soundSetup() { // setup for audio generation
    // setting initial volume
    myLeftTop.setVolume(0.1); 
    myLeftBot.setVolume(0.1); 
    myRightTop.setVolume(0.1); 
    myRightBot.setVolume(0.1); 
}


function setup() {
    createCanvas(400, 400); //create canvas
    for (var i = 0; i < div; i++) {
        px.push(i * (height / div)); //create array for creating grid
        py.push(i * (height / div));
    }
    useSound();
}

function mousePressed() { //play when mouse is pressed
    myLeftTop.play(); 
    myLeftBot.play(); 
    myRightTop.play(); 
    myRightBot.play();
}

function draw() {
    background(0);
    stroke(255);
    strokeWeight(0.5);
    //creates the grid
    for (var i = 0; i < px.length; i++) {
        line(px[i], 0, px[i], height);
        line(0, py[i], width, py[i]);
        }
    //draws circles on the grid
    for (var i = 0; i < px.length - 1; i++) {
        for(var j = 0; j < px.length - 1; j++) {
            fill(100, 255/(i), 255/j);
            //circles resond to the mouse position
            if (dist(mouseX, mouseY, px[i+1], py[j+1]) < 20) {
                ellipse(px[i+1], py[j+1], 50, 50);
            }
            else {
                strokeWeight(0);
                ellipse(px[i+1], py[j+1],
                        1300/dist(mouseX, mouseY, px[i+1], py[j+1]),
                        1300/dist(mouseX, mouseY, px[i+1], py[j+1]));
            }
            
        }
        
    }
    //the volume of each soundtrack depends on the distance of the mouse to the corners
    myLeftTop.setVolume((dist(mouseX, mouseY, 0, 0))^2/2500); 
    myLeftBot.setVolume((dist(mouseX, mouseY, 0, height))^2/2500); 
    myRightTop.setVolume((dist(mouseX, mouseY, width, 0))^2/2500); 
    myRightBot.setVolume((dist(mouseX, mouseY, width, height))^2/2500);
    

}

Rachel Shin – Project 10 – Pokemon

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.