{"id":68765,"date":"2021-11-07T18:57:52","date_gmt":"2021-11-07T23:57:52","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68765"},"modified":"2021-11-07T18:57:52","modified_gmt":"2021-11-07T23:57:52","slug":"lo-10-sonic-story","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/lo-10-sonic-story\/","title":{"rendered":"LO 10: Sonic Story"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ sketch.js template for sound and DOM\n\/\/\n\/\/ This is the 15104 Version 1 template for sound and Dom.\n\/\/ This template prompts the user to click on the web page\n\/\/ when it is first loaded.\n\/\/ The function useSound() must be called in setup() if you\n\/\/ use sound functions.\n\/\/ The function soundSetup() is called when it is safe\n\/\/ to call sound functions, so put sound initialization there.\n\/\/ (But loadSound() should still be called in preload().)\nvar img;\nvar bx = 20;\nvar by = 400;\nvar cx = 20;\nvar cy = 300;\nvar tx = 20;\nvar ty = 200;\nvar mx = 20;\nvar my = 100;\nvar bikeTone;\nvar bikeDynamics;\nvar carTone;\nvar carDynamics;\nvar trainTone;\nvar trainDynamics;\nvar motorcycleTone;\nvar motorcycleDynamics;\n\nfunction preload() {\n \/\/ call loadImage() and loadSound() for all media files here\n}\n\n\nfunction setup() {\n \/\/ you can change the next 2 lines:\n createCanvas(480, 480);\n createDiv(\"p5.dom.js library is loaded.\");\n \/\/======== call the following to use sound =========\n useSound();\n}\n\n\nfunction soundSetup() { \/\/ setup for audio generation\n \/\/ you can replace any of this with your own audio code:\n bikeTone = new p5.Oscillator();\n bikeTone.setType('sine');\n bikeTone.freq(440.0);\n bikeTone.amp(0.1);\n bikeTone.start();\n bikeDynamics = new p5.Oscillator();\n bikeDynamics.setType('sine');\n bikeDynamics.disconnect();\n bikeDynamics.start();\n carTone = new p5.Oscillator();\n carTone.setType('sine');\n carTone.freq(261.63);\n carTone.amp(0.1);\n carTone.start();\n carDynamics = new p5.Oscillator();\n carDynamics.setType('sine');\n carDynamics.disconnect();\n carDynamics.start();\n trainTone = new p5.Oscillator();\n trainTone.setType('sine');\n trainTone.freq(164.81);\n trainTone.amp(0.1);\n trainTone.start();\n trainDynamics = new p5.Oscillator();\n trainDynamics.setType('sine');\n trainDynamics.disconnect();\n trainDynamics.start();\n motorcycleTone = new p5.Oscillator();\n motorcycleTone.setType('sine');\n motorcycleTone.freq(110);\n motorcycleTone.amp(0.1);\n motorcycleTone.start();\n motorcycleDynamics = new p5.Oscillator();\n motorcycleDynamics.setType('sine');\n motorcycleDynamics.disconnect();\n motorcycleDynamics.start();\n}\n\n\nfunction draw() {\n \/\/ you can replace any of this with your own code:\n background(255);\n stroke(0);\n makeBike(bx, by);\n bx += .5;\n makeCar(cx, cy);\n cx += 1;\n makeTrain(tx, ty);\n tx += 1.5;\n makeMotorcycle(mx, my);\n mx += 2;\n bikeDynamics.amp(0.5);\n bikeDynamics.freq(.034);\n bikeTone.amp(bikeDynamics);\n carDynamics.amp(1);\n carDynamics.freq(.06);\n carTone.amp(carDynamics);\n trainDynamics.amp(2);\n trainDynamics.freq(.085);\n trainTone.amp(trainDynamics);\n motorcycleDynamics.amp(2);\n motorcycleDynamics.freq(.12);\n motorcycleTone.amp(motorcycleDynamics);\n if (millis() > 4200 + soundStart) {\n motorcycleTone.stop();\n motorcycleDynamics.stop();\n }\n if (millis() > 6000 + soundStart) {\n trainTone.stop();\n trainDynamics.stop();\n }\n if (millis() > 8400 + soundStart) {\n carTone.stop();\n carDynamics.stop();\n }\n if (millis() > 15800 + soundStart) {\n bikeTone.stop();\n bikeDynamics.stop();\n }\n}\n\nfunction makeBike(x, y) {\n circle(x, y, 20);\n circle(x + 40, y, 20);\n line(x, y - 10, x + 40, y - 10);\n line(x, y - 10, x, y - 20);\n line(x + 40, y - 10, x + 40, y - 30);\n line(x + 30, y - 25, x + 50, y - 35);\n line(x - 10, y - 20, x + 10, y - 20);\n}\n\nfunction makeCar (x, y) {\n rect(x - 20, y - 20, 40, 20);\n rect(x - 40, y, 80, 20);\n circle(x - 30, y + 30, 20);\n circle(x + 30, y + 30, 20);\n}\n\n function makeTrain(x, y) {\n rect(x, y, 20, 20);\n rect(x, y + 20, 40, 20);\n line(x, y + 30, x - 10, y + 30);\n rect(x - 40, y + 20, 30, 20);\n line(x - 40, y + 30, x - 50, y + 30);\n rect(x - 80, y + 20, 30, 20);\n circle(x + 5, y + 45, 10);\n circle(x + 35, y + 45, 10);\n circle(x - 15, y + 45, 10);\n circle(x - 35, y + 45, 10);\n circle(x - 55, y + 45, 10);\n circle(x - 75, y + 45, 10);\n} \n\nfunction makeMotorcycle(x, y) {\n rect(x, y, 40, 20);\n triangle(x, y, x + 40, y, x + 40, y - 15);\n triangle(x - 20, y, x, y + 15, x, y);\n triangle(x + 40, y, x + 60, y, x + 40, y + 15);\n circle(x - 10, y + 20, 20);\n circle(x + 50, y + 20, 20);\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ 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. \/\/ … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/lo-10-sonic-story\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “LO 10: Sonic Story”<\/span><\/a><\/p>\n","protected":false},"author":681,"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\/68765"}],"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\/681"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68765"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68765\/revisions"}],"predecessor-version":[{"id":68767,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68765\/revisions\/68767"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}