{"id":68793,"date":"2021-11-07T22:23:35","date_gmt":"2021-11-08T03:23:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68793"},"modified":"2021-11-07T22:23:35","modified_gmt":"2021-11-08T03:23:35","slug":"project-10-sonic-story-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-9\/","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>For this project, I created a scenery of life under ocean. The four elements in my drawing are a starfish, which makes a sound every 25 frames; a fish, which spits  bubbles and make the bubble spitting sound every 15 frames;  an octopus, which swimming in up-left direction and makes tentacle sound every 10 frames when it shrinks before the push to swim forward; and the beach on the soft moving ocean floor accompanied by the mysterious sound starting from the beginning of this animation. During the process, I struggled with matching the sound effects with the animation changes, but I made it working eventually. <\/p>\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-29.js\" data-width=\"600\" data-height=\"400\">sketch<\/a><a class=\"wp-block-file__button\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-29.js\" download=\"\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*Name:Camellia(Siyun) Wang; \nSection: C; \nEmail Address: siyunw@andrew.cmu.edu;\nAssignment-10;*\/\n\/\/This is a normal day of underocean life\n\/\/Violet little fish is spitting bubbles,\n\/\/octopus is swimming left upwards,\n\/\/and the starfish is just lying on the soft\n\/\/moving beach on the ocean floor  \nvar x = 300;\nvar dir = 1;\nvar speed = 5;\nvar boing;\nvar xfish;\nvar yfish;\nvar dxfish;\nvar xoct;\nvar yoct;\nvar dyoct;\n\/\/setup the underwater beach\nvar marketvalue = [];\nvar noiseParam = 0;\nvar noiseStep=0.005;\nvar count;\n\/\/2 arrays to form the starfish\nvar x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];\nvar y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];\n\/\/sounds\nvar ocean;\n\/\/variables to change the background\nvar R = 102;\nvar G = 178;\nvar B = 255;\n\nfunction preload(){\n    ocean = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/ocean.wav\");\n    star = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/star.wav\");\n    bubble = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/bubble.wav\");\n    oct = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/oct.wav\");\n}\n\nfunction setup() {\n    frameRate(3);\n    createCanvas(600, 400);\n    useSound();\n    count = 1;\n    \/\/fish setup\n    xfish = 200;\n    yfish = 250;\n    dxfish = 15;\n    \/\/oct setup\n    xoct = 0;\n    yoct = 0;\n    dyoct = 3;\n    \/\/beach setup\n    for(var i = 0; i &lt; 50*width; i++){\n        var n = noise(noiseParam);\n        var value = map(n,0,1,height \/ 1.5,height);\n        marketvalue.push(value);\n        noiseParam+=noiseStep;\n    }   \n}\nfunction soundSetup(){\n    ocean.setVolume(0.1);\n    star.setVolume(0.3);\n    bubble.setVolume(0.5);\n    oct.setVolume(1);\n}\n\nfunction draw() {\n    ocean.play();\n    background(R,G,B);\n    \/\/change background color\n    \/\/from light blue to dim blue \n    \/\/to show the change of time\n    \/\/from day to night\n    R -= 3;\n    G -= 5;\n    B -= 2;\n    \/\/draw the beach\n    draw_beach();\n    \n    \/\/draw fish\n    draw_fish();\n    xfish += dxfish;\n    if (xfish &gt; width-25 || xfish &lt; 25) {\n        dxfish = -dxfish;\n    }\n\n    \/\/draw octopus\n    draw_oct();\n    yoct -= dyoct;\n\n    \/\/draw starfish\n    draw_starfish();\n    \n\n    count += 1;\n\n\/\/end of the short animation\n    if(count == 90){\n        background(0);\n        fill(255);\n        textSize(32);\n        text('The End', 250, 200);\n        noLoop();\n        ocean.stop();\n        star.stop();\n        bubble.stop();\n        oct.stop();\n    }\n}\n\nfunction draw_beach(){\n    marketvalue.shift();\n    var n = noise(noiseParam);\n    var value = map(n,0,1,height \/ 1.5,height);\n    marketvalue.push(value);\n    noiseParam+=noiseStep;\n    stroke(255,215,0);\n    fill(255,215,0);\n    beginShape();\n    for(var i = 0; i &lt; 50*width; i++){\n        vertex(i*5,height);\n        vertex( i*5 ,marketvalue[i]);\n        vertex( i*5+5 ,marketvalue[i+1]);\n        vertex(i*5+5,height);\n    };\n    endShape();\n    noStroke();\n}\n\nfunction draw_fish() {\n    fill(127,0,255);\n    ellipse(xfish, yfish, 35, 20);\n    if (dxfish &lt; 0) {\n        triangle(xfish+15, yfish, xfish+25, yfish-5, xfish+25, yfish+5);\n    } else {\n        triangle(xfish-15, yfish, xfish-25, yfish-5, xfish-25, yfish+5);\n    }\n     \/\/bubles every 15 frames\n     \/\/small first one\n    if(count % 15 == 0){\n        bubble.play();\n        if(dxfish &gt; 0){\n            fill(224,255,255);\n            ellipse(xfish + 25, yfish - 5, 5, 5);\n        }\n        \n        if(dxfish &lt; 0){\n            fill(224,255,255);\n            ellipse(xfish - 25, yfish - 5, 5, 5);\n        }\n    }\n    \/\/middle second one\n    if(count % 15 == 1){\n        bubble.play();\n        if(dxfish &gt; 0){\n            fill(224,255,255);\n            ellipse(xfish + 25, yfish - 5, 5, 5);\n            ellipse(xfish + 35, yfish - 15, 10, 10);\n        }\n        if(dxfish &lt; 0){\n            fill(224,255,255);\n            ellipse(xfish - 25, yfish - 5, 5, 5);\n            ellipse(xfish - 35, yfish - 15, 10, 10);\n        }\n    }\n    \/\/large last one\n    if(count % 15 == 2){\n        bubble.play();\n        if(dxfish &gt; 0){\n            fill(224,255,255);\n            ellipse(xfish + 25, yfish - 5, 5, 5);\n            ellipse(xfish + 35, yfish - 15, 10, 10);\n            ellipse(xfish + 45, yfish - 25, 15, 15);\n        }\n        if(dxfish &lt; 0){\n            fill(224,255,255);\n            ellipse(xfish - 25, yfish - 5, 5, 5);\n            ellipse(xfish - 35, yfish - 15, 10, 10);\n            ellipse(xfish - 45, yfish - 25, 15, 15);\n        }\n    }\n}\n\nfunction draw_oct(){\n    if(count % 10 == 1){\n        \/\/make sound when shrink to push\n        oct.play();\n        push();\n        translate(400,150);\n        rotate(-PI \/ 3);\n        fill(216,191,216);\n        strokeWeight(5);\n        stroke(216,191,216);\n        line(xoct-10,yoct+10,xoct-20,yoct+30);\n        line(xoct-20,yoct+30,xoct-10,yoct+50);\n        line(xoct+10,yoct+10,xoct+20,yoct+30);\n        line(xoct+20,yoct+30,xoct+10,yoct+50);\n        line(xoct,yoct+15,xoct,yoct+50);\n        ellipse(xoct,yoct,45,35);\n        noStroke();\n        pop();\n    }\n    else{\n        push();\n        translate(400,150);\n        rotate(-PI \/ 3);\n        fill(238,130,238);\n        stroke(238,130,238);\n        strokeWeight(5);\n        ellipse(xoct,yoct,30,50);\n        line(xoct-10,yoct+10,xoct-30,yoct+50);\n        line(xoct,yoct+15,xoct,yoct+55);\n        line(xoct+10,yoct+10,xoct+30,yoct+50);\n        noStroke();\n        pop();\n    }\n}\n\nfunction draw_starfish(){\n    push();\n    translate(450,300);\n    var nPoints = x.length;\n    fill(244,164,96);\n    if(count % 25 == 1){\n        fill(255,140,0);\n        star.play();\n    }\n    if(count % 25 == 2){\n        fill(255,140,0);\n    }\n    if(count % 25 == 3){\n        fill(255,140,0);\n    }\n    if(count % 25 == 4){\n        fill(255,140,0);\n    }\n    if(count % 25 == 5){\n        fill(255,140,0);\n    }\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex( x[i] + random(-3,3), y[i] + random(-3,3) );\n    }\n    endShape(CLOSE);\n    pop();\n}<\/code><\/pre><\/div>\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I created a scenery of life under ocean. The four elements in my drawing are a starfish, which makes a sound every 25 frames; a fish, which spits bubbles and make the bubble spitting sound every 15 frames; an octopus, which swimming in up-left direction and makes tentacle sound every 10 frames &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-10: Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":676,"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\/68793"}],"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\/676"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68793"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68793\/revisions"}],"predecessor-version":[{"id":68822,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68793\/revisions\/68822"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}