{"id":68841,"date":"2021-11-07T22:55:30","date_gmt":"2021-11-08T03:55:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68841"},"modified":"2021-11-13T21:26:54","modified_gmt":"2021-11-14T02:26:54","slug":"project-9-sonic-story","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-9-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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/wpf-sonic-story.js\" data-width=\"500\" data-height=\"300\">wpf-curves.js<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Patrick Fisher wpf@andrew.cmu.edu Assignment-10-project\nvar fireSound;\nvar earthSound;\nvar windSound;\nvar waterSound;\nvar rockxarray = []; \/\/array for falling rocks\nvar rockyarray = [];\nvar dy = 12; \/\/drop rate for rocks\nvar fireYPoints = []; \/\/array for the points for drawing the fire \nvar noiseParam = 0; \/\/variable for noise function\nvar noiseStep = 0.05; \/\/variable to change noiseParam\nvar windx = []; \/\/wind sweep x array\nvar windy = []; \/\/wind swee y array\nvar wind2x = [];\nvar wind2y = [];\nvar waterPoints = []; \/\/array for the points for drawing the river\nvar oppoWaterPoints = [];\nvar framesC = 0; \/\/frame count variable \n\nfunction preload() {\n    fireSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/fireedit.wav\");\n    earthSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/earthedit.wav\");\n    windSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/windedit.wav\");\n    waterSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/wateredit.wav\");\n}\n\n\nfunction setup() {\n    createCanvas(500, 300);\n    for(var i = 0; i &lt;= 19; i++){ \/\/establish rocks\n        rockxarray[i] = random(0,500);\n        rockyarray[i] = random(0,20);\n    }\n    for(var i = 0; i &lt;= 120; i++){ \/\/establishes fire\n        fireYPoints[i] = map(noise(noiseParam),0,1,100,300);\n        noiseParam += noiseStep\n    }\n    for(var i = 0; i &lt;= 120; i++){ \/\/establsihes water\n        waterPoints[i] = map(noise(noiseParam),0,1,0,height\/2);\n        oppoWaterPoints[i] = map(waterPoints[i],0,height\/2,height,height\/2)\n        noiseParam += noiseStep\n    }\n\n    for(var i = 0; i &lt;= 19; i++){ \/\/establish wind 1 array\n        windy[i] = map(noise(noiseParam),0,1,100,300);\n        windx[i] = map(noise(noiseParam),0,1,100,500);\n        noiseParam += noiseStep\n    }\n\n    for(var i = 0; i &lt;= 19; i++){ \/\/establishes wind 2 array\n        wind2y[i] = map(noise(noiseParam),0,1,100,300);\n        while(wind2y[i] == windy[i]){\n            wind2y[i] = map(noise(noiseParam),0,1,100,300);\n        }\n        wind2x[i] = map(noise(noiseParam),0,1,100,500);\n        while(wind2x[i] == windx[i]){\n            wind2x[i] = map(noise(noiseParam),0,1,100,300);\n        }\n\n        noiseParam += noiseStep\n    }\n\n    createDiv(\"p5.dom.js library is loaded.\");\n    \/\/======== call the following to use sound =========\n    useSound();\n    frameRate(4);\n\n}\n\n\nfunction soundSetup() { \/\/ setup for audio generation\n    fireSound.setVolume(0.5);\n    earthSound.setVolume(0.5);\n    waterSound.setVolume(0.5);\n    windSound.setVolume(0.5);\n}\n\n\nfunction draw() {\n    background(40);\n    if(framesC == 0){ \/\/does the earth section\n        earthSound.play();\n\n    }\n    if(framesC &lt; 28){\n        earthDraw();\n\n    }\n\n    if(framesC == 28){ \/\/does the fire section\n        fireSound.play();\n\n    }\n    if(framesC &gt;= 28 & framesC < 56){\n        fireDraw();\n    }\n\n    if(framesC == 56){ \/\/does the wind section\n        windSound.play();\n    }\n    \n    if(framesC &gt;= 56 & framesC < 84){ \n        windDraw();\n    }\n\n    \n\n    if(framesC == 84){ \/\/does the water section\n        background(40);\n        waterSound.play();\n    }\n    if(framesC &gt;= 84 & framesC < 112){\n\n        waterDraw();\n    }\n\n    if(framesC == 112){ \/\/ends the program\n        background(0);\n        noLoop();\n    }\n\n\n\n    framesC ++;\n} \n\nfunction waterDraw() { \/\/ draws the water\n    \n    push();\n    noStroke();\n    fill(158,196,226);\n    waterPoints.shift(); \/\/removes the last entry in the array to make room for the next one\n    waterPoints.push(map(noise(noiseParam),0,1,0,height\/2));\n    oppoWaterPoints.shift();\n    oppoWaterPoints.push(map(waterPoints[120],0,height\/2,height,height\/2))\n    beginShape(); \/\/begins drawing the mountain\n    for(i = 0; i &lt;= 120; i++){    \/\/for loop that makes the peaks     \n        vertex(i*5,waterPoints[i]);\n        vertex(i*5,oppoWaterPoints[i]);\n    }\n    endShape(CLOSE);\n    noiseParam += noiseStep;\n    pop();\n\n}\n\nfunction fireDraw() { \/\/draws the fire\n\n    push();\n    noStroke();\n    fill(248,103,19);\n    beginShape(); \/\/begins drawing the fire\n    vertex(0,height);\n    for(i = 0; i &lt;= 120; i++){    \/\/for loop that makes the fire     \n        vertex(i*5,fireYPoints[i]);\n    }\n    vertex(width,height);\n    endShape(CLOSE);\n\n    for(var i = 0; i &lt;= 120; i++){ \/\/for loop that initrially fills the array\n        fireYPoints[i] = map(noise(noiseParam),0,1,100,300);\n        noiseParam += noiseStep\n    }\n    pop();\n\n}\n\nfunction earthDraw() { \/\/draws the rocks\n\n    for(var i = 0; i &lt;= 19; i++){\n        fill(87,64,52);\n        ellipse(rockxarray[i],rockyarray[i],random(5,10,random(5,10))); \/\/draws the rocks, the randomness makes them \"tumble\"\n        rockyarray[i] += dy; \/\/moves the rocks down\n    }   \n}\n\nfunction windDraw() { \/\/draws the wind\n\n    push();\n    strokeWeight(5);\n    stroke(190,239,143);\n\n    for(var i = 0; i &lt;= 9; i++) {\n        line(windx[i],windy[i],windx[i+1],windy[i+1]); \/\/draws the wind\n    }\n    windx.push(random(100,500)); \/\/shifts the array and adds new points\n    windy.push(random(100,300));\n    windx.shift();\n    windy.shift();\n\n    for(var i = 0; i &lt;= 9; i++) {\n        line(wind2x[i],wind2y[i],wind2x[i+1],wind2y[i+1]);\n    }\n    wind2x.push(random(100,500));\n    wind2y.push(random(100,300));\n    wind2x.shift();\n    wind2y.shift();\n    \n}\n\n<\/code><\/pre><\/div>\n\n\n\n<p>I was inspired by the intro to a certain children&rsquo;s cartoon. My sounds are earth, fire, air, and water. It was surprisingly difficult to find quality sounds of some of these, and I had a lot of trouble with the web server stuff.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-curves.js \/\/Patrick Fisher wpf@andrew.cmu.edu Assignment-10-project var fireSound; var earthSound; var windSound; var waterSound; var rockxarray = []; \/\/array for falling rocks var rockyarray = []; var dy = 12; \/\/drop rate for rocks var fireYPoints = []; \/\/array for the points for drawing the fire var noiseParam = 0; \/\/variable for noise function var noiseStep &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-9-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":648,"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\/68841"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68841"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68841\/revisions"}],"predecessor-version":[{"id":69009,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68841\/revisions\/69009"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}