{"id":68604,"date":"2021-11-06T14:54:41","date_gmt":"2021-11-06T18:54:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68604"},"modified":"2021-11-06T14:54:41","modified_gmt":"2021-11-06T18:54:41","slug":"project-sonic-story","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-sonic-story\/","title":{"rendered":"Project: Sonic Story"},"content":{"rendered":"\n

luca sonic story<\/a><\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Luca Cao\n\/\/lucacao@andrew.cmu.edu\n\/\/Section D\n\n\/\/Story: \n\/\/pan put on stove. Sound 1\n\/\/Gas starts. Sound 2\n\/\/Steak cooks on pan and sizzle. Sound 3\n\/\/eats steak. Sound 4\n\nvar pan = {x:200,y:400,d:100,r:73,g:80,b:87,\n hx:200,hy:480,hw:15,hh:70,dy:20};\/\/object pan\nvar stv = {x:200,y:200,d:150,r:33, g:37, b:41};\/\/object stove\nvar stk = {x:200,y:200,w:40,h:60,r:220,g:24,b:54,dy:30};\/\/object steak\nvar metal;\nvar gas;\nvar steak;\nvar eat;\n\nfunction preload(){\n metal = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/metal.wav\");\n gas = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/gas1.wav\");\n steak = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/steak.wav\");\n eat = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/eat.wav\");\n\n}\n\nfunction soundSetup(){\n metal.setVolume(5);\n gas.setVolume(0.5);\n steak.setVolume(1);\n eat.setVolume(2);\n}\n\nfunction setup() {\n createCanvas(400, 400);\n noStroke();\n frameRate(2);\n useSound();\n}\n\nfunction draw() {\n background(255, 243, 176);\n\n \/\/platform\n push();\n fill(173, 181, 189);\n rect(0,0,400,400);\n fill(108, 117, 125);\n rect(0,320,400,90);\n pop();\n\n \/\/controls\n push();\n if (pan.y <= 350){\n fill(0,255,0);\n ellipse(300,350,10,10);\n ellipse(350,350,10,10);\n }\n pop();\n\n \/\/stove\n push();\n fill(stv.r,stv.g,stv.b);\n ellipse(stv.x,stv.y,stv.d,stv.d);\n\n if (pan.y <= 300){\n stv.r = 200;\n stv.g = 0;\n stv.b = 0;\n gas.play();\n }\n pop();\n\n \/\/pan\n push();\n rectMode(CENTER);\n fill(pan.r,pan.g,pan.b);\n ellipse(pan.x,pan.y,pan.d,pan.d);\n rect(pan.hx,pan.hy,pan.hw,pan.hh);\n pan.y = pan.y - pan.dy\n pan.hy = pan.hy - pan.dy\n\n if (pan.y <= 200){\n gas.stop();\n pan.dy = 0; \n }\n \/\/pan.hy = 280\n \n pop();\n\n\n \/\/steak\n if (frameCount >= 15){\n fill(stk.r,stk.g,stk.b);\n ellipse(stk.x,stk.y,stk.w,stk.h);\n steak.play();\n \n\n if (frameCount >= 20){\n stk.r = 157;\n stk.g = 2;\n stk.b = 8;\n\n if (frameCount >= 25){\n stk.r = 106;\n stk.g = 4;\n stk.b = 15;\n\n if (frameCount >= 35){\n stk.r = 80;\n stk.g = 6;\n stk.b = 23;\n stk.y = stk.y - stk.dy;\n steak.stop();\n\n if (frameCount >= 45){\n eat.play();\n }\n\n if (frameCount >= 50){\n eat.stop();\n background(0);\n noLoop();\n }\n }\n }\n }\n }\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>I created the story of cooking a steak. I started by animating all my visual assets and making sure that they appear at the right time. After that, I added sound into my code based on the position of the assets, as well as the frame count. I stored all the values on my characters in object form, which helped me to better manipulate them. During the process, I had difficulties preloading sounds into my code and I later realized that I used the wrong template for my code. I enjoyed making this project because, besides visual interaction, I also get to experiment with sonic interaction and make the outcome more engaging.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>luca sonic story \/\/Luca Cao \/\/lucacao@andrew.cmu.edu \/\/Section D \/\/Story: \/\/pan put on stove. Sound 1 \/\/Gas starts. Sound 2 \/\/Steak cooks on pan and sizzle. Sound 3 \/\/eats steak. Sound 4 var pan = {x:200,y:400,d:100,r:73,g:80,b:87, hx:200,hy:480,hw:15,hh:70,dy:20};\/\/object pan var stv = {x:200,y:200,d:150,r:33, g:37, b:41};\/\/object stove var stk = {x:200,y:200,w:40,h:60,r:220,g:24,b:54,dy:30};\/\/object steak var metal; var gas; var steak; … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-sonic-story\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project: Sonic Story”<\/span><\/a><\/p>\n","protected":false},"author":642,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68604"}],"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\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68604"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68604\/revisions"}],"predecessor-version":[{"id":68615,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68604\/revisions\/68615"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}