{"id":68856,"date":"2021-11-08T00:29:59","date_gmt":"2021-11-08T05:29:59","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68856"},"modified":"2021-11-08T00:35:13","modified_gmt":"2021-11-08T05:35:13","slug":"sonic-story-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/08\/sonic-story-3\/","title":{"rendered":"Sonic-Story"},"content":{"rendered":"\n

sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Yanina Shavialenka\n\/\/Section B\n\nvar walkImage = []; \/\/ an array to store the images\nvar flying = []; \/\/bird flying array images\nvar characters = [];\nvar birds = [];\nvar bg; \/\/background image\nvar lightning; \/\/lighting picture\nvar thunder; \/\/thunder sound\nvar amb; \/\/ambient sound\nvar chirp; \/\/bird sound\n\nfunction preload(){\n \/\/ These URLs are for the individual walk cycle images\n var filenames = [];\n filenames[0] = \"https:\/\/i.imgur.com\/14ifmej.png\";\n filenames[1] = \"https:\/\/i.imgur.com\/r9GhjWn.png\";\n filenames[2] = \"https:\/\/i.imgur.com\/A0L2KVp.png\";\n filenames[3] = \"https:\/\/i.imgur.com\/JFE5CBm.png\";\n filenames[4] = \"https:\/\/i.imgur.com\/14ifmej.png\";\n filenames[5] = \"https:\/\/i.imgur.com\/r9GhjWn.png\";\n filenames[6] = \"https:\/\/i.imgur.com\/A0L2KVp.png\";\n filenames[7] = \"https:\/\/i.imgur.com\/JFE5CBm.png\";\n filenames[8] = \"https:\/\/i.imgur.com\/14ifmej.png\";\n filenames[9] = \"https:\/\/i.imgur.com\/r9GhjWn.png\";\n filenames[10] = \"https:\/\/i.imgur.com\/A0L2KVp.png\";\n filenames[11] = \"https:\/\/i.imgur.com\/JFE5CBm.png\";\n\n \/\/ These URLs are for the individual bird cycle images\n var file = [];\n file[0] = \"https:\/\/i.imgur.com\/82McfxQ.png\";\n file[1] = \"https:\/\/i.imgur.com\/OMNJ7z2.png\";\n file[2] = \"https:\/\/i.imgur.com\/ZP2mduv.png\";\n file[3] = \"https:\/\/i.imgur.com\/2ly1P4T.png\";\n file[4] = \"https:\/\/i.imgur.com\/5VNmIMy.png\";\n file[5] = \"https:\/\/i.imgur.com\/KjJmaEd.png\";\n file[6] = \"https:\/\/i.imgur.com\/036LD8g.png\";\n file[7] = \"https:\/\/i.imgur.com\/OPD7VfW.png\";\n file[8] = \"https:\/\/i.imgur.com\/Rt8p00H.png\";\n\n \/\/ These for loops change the images to create a walking and flying effect\n for (var i = 0; i < filenames.length; i++) {\n walkImage[i] = loadImage(filenames[i]);\n }\n\n for (var i = 0; i < file.length; i++) {\n flying[i] = loadImage(file[i]);\n }\n\n \/\/loads the images and sounds\n bg = loadImage(\"https:\/\/i.imgur.com\/nqIhKWP.png\");\n lightning = loadImage(\"https:\/\/i.imgur.com\/6kvwrHw.gif\");\n lightning.resize(150,0);\n thunder = loadSound(\"http:\/\/localhost:8000\/thunder.wav\");\n amb = loadSound(\"http:\/\/localhost:8000\/amb.wav\");\n chirp = loadSound(\"http:\/\/localhost:8000\/bird.wav\");\n}\n\n\/\/ Constructor for each walking character\nfunction makeCharacter(cx, cy, cdx, cdy) {\n var c = { x: cx, y: cy, dx: cdx, dy: cdy,\n imageNum: 0,\n stepFunction: stepCharacter,\n drawFunction: drawCharacter\n }\n return c;\n}\n\n\/\/ Constructor for each blying bird\nfunction makeBird(cx, cy, cdx, cdy) {\n var c = { x: cx, y: cy, dx: cdx, dy: cdy,\n imageNum: 0,\n stepFun: stepBird,\n drawFun: drawBird\n }\n return c;\n}\n\nfunction stepCharacter() {\n this.imageNum++;\n if(this.imageNum >= walkImage.length) {\n this.imageNum = 0;\n }\n \n this.x += this.dx; \n}\n\nfunction stepBird() {\n this.imageNum++;\n if(this.imageNum >= flying.length) {\n this.imageNum = 0;\n }\n \n this.x += this.dx; \n}\n\n\/\/This function draws the corresponding image\nfunction drawCharacter() {\n image(walkImage[this.imageNum],this.x,this.y);\n}\n\nfunction drawBird() {\n image(flying[this.imageNum],this.x,this.y);\n}\n\n\/\/This function creates the canvas and makes the character\nfunction setup() {\n createCanvas(612,408);\n frameRate(15);\n for (var i = 0; i < walkImage.length; i++) {\n walkImage[i].resize(150,0);\n }\n for (var i = 0; i < flying.length; i++) {\n flying[i].resize(50,0);\n }\n characters.push(makeCharacter(0,125,1,0));\n birds.push(makeBird(0,50,3,0));\n useSound(0);\n}\n\nfunction soundSetup() {\n thunder.setVolume(0.5);\n amb.setVolume(0.2);\n chirp.setVolume(0.1);\n}\n\nfunction draw() {\n background(bg);\n if(frameCount >= 100) {\n image(lightning,425,-10);\n image(lightning,-20,-10);\n thunder.play();\n tint(100);\n characters[0].stepFunction();\n characters[0].drawFunction();\n birds[0].stepFun();\n birds[0].drawFun();\n characters[0].dx = 4;\n birds[0].dx = 6;\n }\n else {\n characters[0].stepFunction();\n characters[0].drawFunction();\n birds[0].stepFun();\n birds[0].drawFun();\n amb.play();\n chirp.play();\n }\n}<\/code><\/pre><\/p>\n\n\n\n<p>For me, this assignment was really challenging considering the fact that we did not spend a lot of time on the sound topic so I was really struggling and tried to come up with something interesting and easy at the same time. In my code I made a girl walk and a bird fly: I used a sound effect to represent the chirping of a bird and sounds of an outside world. Then, the lightning strikes and the thunder sound comes off with dark background. <\/p>\n\n\n\n<p>I could not upload the file properly here because the thunder sound is more than WordPress accepts and thus the file was not able to get loaded onto here. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Yanina Shavialenka \/\/Section B var walkImage = []; \/\/ an array to store the images var flying = []; \/\/bird flying array images var characters = []; var birds = []; var bg; \/\/background image var lightning; \/\/lighting picture var thunder; \/\/thunder sound var amb; \/\/ambient sound var chirp; \/\/bird sound function preload(){ \/\/ … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/08\/sonic-story-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Sonic-Story”<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68856"}],"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\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68856"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68856\/revisions"}],"predecessor-version":[{"id":68861,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68856\/revisions\/68861"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}