{"id":68567,"date":"2021-11-05T16:25:11","date_gmt":"2021-11-05T20:25:11","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68567"},"modified":"2021-11-05T16:32:37","modified_gmt":"2021-11-05T20:32:37","slug":"project-10-sonic-story","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/05\/project-10-sonic-story\/","title":{"rendered":"Project 10: Sonic Story"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>My project is a simple animation of a bee flying through some daisies and a sunflower to collect nectar. For my process, I created several objects that I animated first. Afterward, I inserted sounds that at different places within the story where the action was happening. <\/p>\n\n\n\n<p>Canvas is 900 pixels wide so you can see the right side on here \ud83d\ude41<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"400\" data-width=\"900\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-8.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"900\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Anthony Pan\n\/\/Section C\n\nvar index = 0;\nvar duration = 0;\nvar sunflower;\nvar daisy;\nvar daisy2;\nvar bee;\nvar cloud;\n\n\/\/sounds\nvar beeSound;\nvar windSound;\nvar popSound;\nvar yumSound;\n\n\n\n\/\/bee positions\nvar beex = [900, 880, 860, 840, 820, 800, 780, 760, 740, 720, 700, \n680, 660, 640, 620, 600, 580, 560, 540, 540, 540, 540, 540, 540, 540, 540, 500, 450, 400, 200, -100];\n\n\/\/noise for beey heights\nvar noiseParam = 0;\nvar noiseStep = 0.05;\nvar beey = [];\n\n\/\/cloud positions\nvar cloudX = [];\n\nfunction preload() {\n    beeSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/beeBuzz.wav\");\n    windSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/wind.wav\");\n    popSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/pop.wav\");\n    yumSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/yum.wav\");\n\n}\n\n\nfunction soundSetup() {\n    windSound.amp(0.4);\n    beeSound.amp(0.8);\n    popSound.amp(1.0);\n    yumSound.amp(0.8);\n}\n\n\n\nfunction setup() {\n    createCanvas(900, 400);\n    frameRate(1);\n    useSound();\n\n    \/\/random y positions of beey\n    for(var i=0; i &lt; 30; i++) {\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 0, height);\n        beey.push(value);\n        noiseParam += noiseStep;\n    }\n\n    \/\/positions for cloudX\n    for(var j = 0; j &lt; 30; j++) {\n        var cloudvalue = 900 - (j * 20);\n        cloudX.push(cloudvalue);\n\n    }\n\n\n    \/\/make objects\n    daisy = makeDaisy(width\/2, 2* height\/3, 100);\n    sunflower = makeSunflower(width\/4, height\/2, 80);\n    daisy2 = makeDaisy(2 * width\/3, height\/3, 100);\n    bee = makeBee(beex[index], beey[index]);\n    cloud = makeCloud();\n\n    \n}\n\nfunction draw() {\n    \/\/draw sky\n    background(149, 217, 255);\n    cloud.draw(cloudX[index], 100);\n\n    \/\/play windSound at end\n    if(frameCount &gt;= 28 & frameCount <= 31) {\n        windSound.play();\n\n    } \n    \n    sunflower.draw();\n    daisy.draw();\n    daisy2.draw();\n\n    \/\/daisy petal fall \n    if(index &gt;= 20) {\n        fill(255);\n        ellipse(600, index * 15, 60, 160);\n    }\n\n    \/\/daisy petal pop\n    if(frameCount &gt;= 23 & frameCount <= 24) {\n        popSound.play();\n    }\n\n    \/\/play yum sound when bee is above flower\n    if(index &gt;= 20 & index < 21) {\n        yumSound.play();\n    }\n\n    \/\/sunflower petal pop\n    if(frameCount &gt;= 24 & frameCount <= 25) {\n        popSound.play();\n    }\n\n    \/\/sunflower petal fall\n    if(index &gt;= 24) {\n        fill(\"yellow\");\n        ellipse(width\/4, 50+index*15, 20, 180);\n        ellipse(1.25 * width\/4, 50+index*15, 20, 180);\n\n    }\n\n    bee.draw(beex[index], beey[index]);\n\n    \/\/play bee sound at beginning\n    if(frameCount &gt;= 0 & frameCount <= 3) {\n        beeSound.play();\n\n    }\n\n    \n    index += 1;\n\n    \/\/stop sounds at 30 seconds\n    if(index &gt;= 32) {\n        popSound.stop();\n        windSound.stop();\n        beeSound.stop();\n        yumSound.stop();\n        background(0);\n        noLoop();\n    }\n\n\n\n\n\n}\n\n\/\/cloud constructor\nfunction makeCloud(cx, cy) {\n    var cloud = {x: cx, y: cy, draw: drawCloud}\n    return cloud;\n\n}\n\n\/\/draw cloud\nfunction drawCloud() {\n    fill(230);\n    ellipse(cloudX[index], 100, 300, 100);\n    ellipse(cloudX[index]-90, 110, 100, 80);\n    ellipse(cloudX[index]-30, 120, 100, 80);\n    ellipse(cloudX[index]+30, 120, 100, 80);\n    ellipse(cloudX[index]+90, 110, 100, 80);\n\n    ellipse(cloudX[index]-90, 90, 100, 80);\n    ellipse(cloudX[index]-30, 80, 100, 80);\n    ellipse(cloudX[index]+30, 80, 100, 80);\n    ellipse(cloudX[index]+90, 90, 100, 80);\n\n}\n\n\/\/constructor for daisy\nfunction makeDaisy(fx, fy, fh) {\n    var daisy = {x: fx, y: fy, height: fh, draw: drawDaisy}\n    return daisy; \/\/return daisy as object\n\n}\n\n\/\/draw daisy\nfunction drawDaisy() {\n    fill(10, 200, 20);\n    rect(this.x, this.y, 40, height);\n    \/\/petals\n    for(var i = 0; i &lt; 10; i++) {\n        push();\n        translate(this.x, this.y);\n        noStroke();\n        var rotationAngle = radians(36);\n        rotate(i * rotationAngle);\n        fill(255);\n        ellipse(0, -60, 60, 160);\n        pop();\n\n    }\n\n    fill(\"yellow\");\n    noStroke();\n    circle(this.x, this.y, 80);\n\n}\n\n\/\/constructor for sunflower\nfunction makeSunflower(sx, sy, sh) {\n    var sunflower = {x: sx, y: sy, height: sh, draw: drawSunflower}\n    return sunflower;\n\n}\n\nfunction drawSunflower() {\n    fill(10, 200, 20);\n    rect(this.x, this.y, 40, height\/2);\n    for(var i = 0; i &lt; 40; i++) {\n        push();\n        translate(this.x, this.y);\n        var rotationAngle2 = radians(9);\n        rotate(i * rotationAngle2);\n        fill(\"yellow\");\n        ellipse(0, -80, 20, 180);\n        pop();\n    }\n    fill(33, 12, 11);\n    circle(this.x, this.y, 200);\n}\n\n\n\/\/bee constructor\nfunction makeBee(bx, by) {\n    var bee = {x: bx, y: by, draw: drawBee}\n    return bee;\n\n}\n\nfunction drawBee() {\n    \/\/wings\n    stroke(0);\n    fill(255);\n    ellipse(beex[index]-5, beey[index]-30, 20, 40);\n    ellipse(beex[index]+10, beey[index]-20, 20, 40);\n\n    \/\/body\n    fill(0);\n    ellipse(beex[index], beey[index], 60, 40);\n\n    \/\/stinger\n    triangle(beex[index]+25, beey[index]+5, beex[index]+40, beey[index], beex[index]+25, beey[index]-5);\n\n    \/\/stripes\n    noStroke();\n    fill(\"yellow\");\n    rect(beex[index], beey[index]-20,5, 40);\n    rect(beex[index]-10, beey[index]-20, 5, 40);\n    rect(beex[index]+10, beey[index]-20, 5, 40);\n\n\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My project is a simple animation of a bee flying through some daisies and a sunflower to collect nectar. For my process, I created several objects that I animated first. Afterward, I inserted sounds that at different places within the story where the action was happening. Canvas is 900 pixels wide so you can see &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/05\/project-10-sonic-story\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10: Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68567"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68567"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68567\/revisions"}],"predecessor-version":[{"id":68977,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68567\/revisions\/68977"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}