{"id":68617,"date":"2021-11-06T16:05:42","date_gmt":"2021-11-06T20:05:42","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68617"},"modified":"2021-11-06T16:05:42","modified_gmt":"2021-11-06T20:05:42","slug":"sonic-story-frog-in-the-rain","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/sonic-story-frog-in-the-rain\/","title":{"rendered":"Sonic Story : frog in the rain"},"content":{"rendered":"\n

file<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Story:\n\/\/There is a frog sitting on the ground who waves at you.\n\/\/You can here rain and frogs croaking in the background.\n\/\/a rain cloud appears and soon the frog stops waving\n\/\/as the rain cloud moves across the screen, thunder strikes and makes the frog blush\n\nvar m = 13; \/\/ for my measurement ration out of 13\nvar f = 220; \/\/frog size\nvar thunder;\nvar raining;\nvar frog;\n\nfunction preload() {\n frog = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/frogs.wav\");\n raining = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/rain.wav\");\n thunder = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/thunderstorm.wav\");\n}\n\nfunction soundSetup() { \/\/ setup for audio generation\n frog.setVolume(1.3);\n raining.setVolume(0.7);\n thunder.setVolume(5);\n}\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(1);\n useSound();\n}\n\nfunction froggie(){\n translate(90,170);\n strokeWeight(5);\n fill(168, 239, 154);\n beginShape(); \/\/measurements are by #\/13 because my reference was 13 x 13 roughly\n curveVertex((11.4 \/ m) * f, (12.4 \/ m) * f);\/\/1\n curveVertex((11.4 \/ m) * f, (12.4 \/ m) * f);\/\/1\n curveVertex((12.5 \/ m) * f, (9.2 \/ m) * f);\/\/2\n curveVertex((9.4 \/ m) * f, (2.5 \/ m) * f);\/\/4 (skips 3 did not use point)\n curveVertex((8.9 \/ m) * f, (.5 \/ m) * f);\/\/5\n curveVertex((8.1 \/ m) * f, (.1 \/ m) * f);\/\/6\n curveVertex((7.4 \/ m) * f, (.5 \/ m) * f);\/\/7\n curveVertex((6 \/ m) * f, (.4 \/ m) * f);\/\/8\n curveVertex((4.6 \/ m) * f, (.5 \/ m) * f);\/\/9\n curveVertex((3 \/ m) * f, (.2 \/ m) * f);\/\/10\n curveVertex((1.5 \/ m) * f, (3 \/ m) * f);\/\/11\n curveVertex((2.3 \/ m) * f, (5.3 \/ m) * f);\/\/12\n curveVertex((2 \/ m) * f, (6.5 \/ m) * f);\/\/13\n curveVertex((1.9 \/ m) * f, (7.5 \/ m) * f);\/\/13.5 (new point)\n curveVertex((2 \/ m) * f, (9 \/ m) * f);\/\/14\n curveVertex((2.2 \/ m) * f, (9.7 \/ m) * f);\/\/15\n curveVertex((1.4 \/ m) * f, (10.4 \/ m) * f);\/\/15.5 (new point)\n curveVertex((.8 \/ m) * f, (10.8 \/ m) * f);\/\/16\n curveVertex((.2 \/ m) * f, (10.5 \/ m) * f);\/\/17\n curveVertex((.8\/ m) * f, (12.4 \/ m) * f);\/\/18\n curveVertex((6.5\/ m) * f, f);\/\/19\n endShape(CLOSE);\n \n noFill(); \n beginShape();\n curveVertex((3.8 \/ m) * f,(1.9 \/ m) * f);\n curveVertex((3.8 \/ m) * f,(1.9 \/ m) * f);\n curveVertex((4.2 \/ m) * f,(1.95 \/ m) * f);\n curveVertex((5 \/ m) * f,(1.7 \/ m) * f);\n curveVertex((5.8 \/ m)*f,(1.95 \/ m) * f);\n curveVertex((6.2 \/ m)*f,(1.9 \/ m) * f);\n curveVertex((6.2 \/ m)*f,(1.9 \/ m) * f);\n endShape();\n\n beginShape(); \/\/ arm on left\n curveVertex((2.3 \/ m) * f, (9.6 \/ m) * f);\n curveVertex((2.3 \/ m) * f, (9.6 \/ m) * f);\n curveVertex((2.5 \/ m) * f, (10.7 \/ m) * f);\n curveVertex((3.3 \/ m) * f, (11.8 \/ m) * f);\n curveVertex((3.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((3.5 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n\n beginShape(); \/\/ foot on right\n curveVertex((8 \/ m) * f, (12.9 \/ m) * f);\n curveVertex((8 \/ m) * f, (12.9 \/ m) * f);\n curveVertex((7.6 \/ m) * f, (11 \/ m) * f);\n curveVertex((8.4 \/ m) * f, (11.4 \/ m) * f);\n curveVertex((8.8 \/ m) * f, (10.6 \/ m) * f);\n curveVertex((9.7 \/ m) * f, (10.5 \/ m) * f);\n curveVertex((9.7 \/ m) * f, (10.5 \/ m) * f);\n endShape();\n}\n\nfunction arm1() { \/\/wave arm\n strokeWeight(5);\n noFill(); \n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.7 \/ m) * f, (10.7 \/ m) * f);\n curveVertex((6.5 \/ m) * f, (11.8 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction arm2() { \/\/wave arm\n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.7 \/ m) * f, (9.7 \/ m) * f);\n curveVertex((6.5 \/ m) * f, (10.5 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction arm3() { \/\/wave arm\n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.7 \/ m) * f, (9 \/ m) * f);\n curveVertex((6.5 \/ m) * f, (8.8 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction arm4() { \/\/wave arm\n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((6 \/ m) * f, (7 \/ m) * f);\n curveVertex((6.5 \/ m) * f, (7 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction arm5() { \/\/wave arm\n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5 \/ m) * f, (7 \/ m) * f);\n curveVertex((5.7 \/ m) * f, (7 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction arm6() { \/\/wave arm\n beginShape(); \/\/ arm on left\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((5.5 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.3 \/ m) * f, (7 \/ m) * f);\n curveVertex((8 \/ m) * f, (7 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n curveVertex((7.2 \/ m) * f, (9.2 \/ m) * f);\n endShape();\n} \n\nfunction eyes1() {\n fill(0);\n ellipse((3 \/ m) * f, (1.2 \/ m) * f, 7, 10);\n ellipse((7.7 \/ m) * f, (1.2 \/ m) * f, 7, 10);\n}\n\nfunction eyes2() {\n arc((3 \/ m) * f, (1.2 \/ m) * f, 7, 10, 0, PI, CHORD);\n arc((7.7 \/ m) * f, (1.2 \/ m) * f, 7, 10, 0, PI, CHORD);\n}\n\nfunction eyes3() {\n rect((2.9 \/ m) * f, (1.1 \/ m) * f, 4, .05);\n rect((7.6 \/ m) * f, (1.1 \/ m) * f, 4, .05);\n}\n\nfunction blush(alpha) {\n push();\n translate(90,180);\n noStroke();\n fill(239, 101, 58, alpha);\n circle((2.5 \/ m) * f, (2.3 \/ m) * f, 30);\n circle((8 \/ m) * f, (2.3 \/ m) * f, 30);\n pop();\n}\n\nfunction cloud(b) { \/\/b is x movement of cloud\n translate(-90, -180);\n fill(240);\n strokeWeight(0);\n beginShape();\n vertex(-50 + b, 100);\n vertex(-50 + b, 100);\n vertex(-150 + b, 100);\n curveVertex(-170 + b, 90);\n curveVertex(-165 + b, 85);\n curveVertex(-170 + b, 50);\n curveVertex(-75 + b, 80);\n curveVertex(-55 + b, 85);\n curveVertex(-45 + b, 90);\n endShape(CLOSE);\n}\n\nfunction ground(){\n fill(124, 66, 55);\n ellipse(200, 430, 550, 300);\n}\n\nfunction drawEyes(){\n if(frameCount % 4 === 0) { \/\/for eyes \/\/frameCount starts @ 0 \n eyes1();\n }\n if(frameCount % 4 === 1 || frameCount % 4 === 3) {\n eyes2();\n }\n if(frameCount % 4 === 2){\n eyes3();\n }\n}\n\nfunction drawarm() {\n if(frameCount % 1 === 0 & frameCount <= 1 || frameCount >= 16){\n arm1();\n }\n if(frameCount < 3 & frameCount >= 2 || frameCount == 15){\n arm2();\n }\n if(frameCount < 4 & frameCount >= 3 || frameCount == 14){\n arm3();\n }\n if(frameCount == 5 || frameCount == 7 || frameCount == 9 || \n frameCount == 11 || frameCount == 13) {\n arm4();\n }\n if(frameCount == 4 || frameCount == 12 || frameCount == 8) { \n arm5();\n }\n if(frameCount == 6 || frameCount == 10) {\n arm6();\n }\n}\n\nfunction rain(b, c, d) { \/\/c is x movement of rain, d is y movement \n fill(58, 101, 239); \n constrain(c, -50 + b, -150 + b);\n constrain(d, 100, 400);\n circle(-87.5 + c + b, -145 + d, 5);\/\/need to use noise\n}\n\nfunction draw() {\n background(173, 220, 216);\n ground();\n fill(0);\n if(frameCount > 0){\n text(\"Froggie in rain\", 10, 15);\n froggie();\n drawarm(); \n drawEyes();\n frog.play();\n raining.play();\n }\n if(frameCount >= 7){\n cloud(-170 + (frameCount * 35));\n for(var i = 0; i <= frameCount; i++){\n rain(-170 + (frameCount * 35), random(-85,40), random(250,600)); \n }\n }\n if(frameCount >= 18){\n blush(45 * frameCount);\/\/take 5 frames to get to full opac\n }\n if(frameCount >= 17){\n thunder.play();\n }\n if(frameCount > 22){\n frameCount === 1;\n }\n}\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>I ended up using a ton of curves to draw my frog, so I have a ton of sketches showing my progress. I first worked by making my animations and characters and then moving on to sound so I knew my code better and new if things were not working last second it would be the sound files.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-768x1024.jpg\" alt=\"\" class=\"wp-image-68630\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-225x300.jpg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5788-scaled.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>the numbers and amount of curves<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-768x1024.jpg\" alt=\"\" class=\"wp-image-68631\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-225x300.jpg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5789-scaled.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>figuring out my statistics<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>file \/\/Story: \/\/There is a frog sitting on the ground who waves at you. \/\/You can here rain and frogs croaking in the background. \/\/a rain cloud appears and soon the frog stops waving \/\/as the rain cloud moves across the screen, thunder strikes and makes the frog blush var m = 13; \/\/ for … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/sonic-story-frog-in-the-rain\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Sonic Story : frog in the rain”<\/span><\/a><\/p>\n","protected":false},"author":660,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68617"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68617"}],"version-history":[{"count":21,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68617\/revisions"}],"predecessor-version":[{"id":68649,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68617\/revisions\/68649"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}