{"id":68674,"date":"2021-11-06T22:11:23","date_gmt":"2021-11-07T02:11:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68674"},"modified":"2021-11-06T22:12:14","modified_gmt":"2021-11-07T02:12:14","slug":"project-10-sonic-story-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-10-sonic-story-2\/","title":{"rendered":"Project-10: Sonic Story"},"content":{"rendered":"\n

My Project<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Chuong Truong;\n\/\/cbtruong;\n\/\/cbtruong@andrew.cmu.edu;\n\/\/Section B;\n\n\/\/The Overall Story of this program is that of fall;\n\/\/Leaves are falling off of trees, the sun is getting whiter;\n\/\/The air is getting frostier;\n\/\/And the birds are seen more actively flying;\n\/\/I included no custom sound and instead wanted to portray a scene;\n\/\/That was described with a song;\n\n\n\/\/initial empty array that will hold leaf objects;\nvar leaves = [];\n\/\/variables for the sun's green and blue values which change;\nvar sunG = 238;\nvar sunB = 82;\n\/\/initial empty array for birds;\nvar birds = [];\n\n\/\/function of the leaf object that allows it to fall;\nfunction leafFall (){\n \/\/stops each leaf from falling off the canvas;\n \/\/if it has not reached that point, it will continue to fall until it does;\n if (this.f == true){\n if (this.y > height-17){\n this.y = height-5;\n }\n else {\n this.y += random(30, 60);\n }\n }\n \/\/if met, this condition causes the leaf to fall;\n \/\/this randomization occurs to allow for the tree and leaves to be more lifelike;\n \/\/as not all leaves fall off immediately;\n else if (floor(random(200)) == 25){\n this.y += random(30);\n this.x += random(-15, 15);\n this.f = true;\n\n }\n return this.y;\n}\n\n\/\/function that draws the leaves;\nfunction drawLeaf(){\n \/\/this switch and case allows for color variance for the leaves;\n \/\/the colors are those of fall;\n switch(this.col){\n case 0: fill(237, 164, 23); break;\n case 1: fill(167, 159, 15); break;\n case 2: fill(233, 134, 4); break;\n case 3: fill(223, 57, 8); break;\n case 4: fill(201, 30, 10); break;\n }\n rectMode(CENTER);\n push();\n translate(this.x, this.y);\n rotate(radians(45));\n rect(0, 0, 15, 15);\n pop();\n}\n\n\/\/function that makes leaves;\nfunction leaf(lx, ly, cPreset){\n \/\/the leaf object constructor;\n l = {x: lx, y: ly, orgY: ly, col: cPreset, f: false, \n drawFunction: drawLeaf, fallFunction: leafFall};\n return l;\n}\n\nfunction makeLeavesOnTrees (x, y){\n \/\/for loops create the leaves on the trees themselves;\n \/\/the leaves' x and y are dependent on the tree's x and y;\n \/\/the first row is 17 and then decreases by 1 as the row gets closer to the tree's x;\n \/\/as the row gets closer, the leaves' initial x and y increase;\n\n \/\/this variable allows the leaves to center as each row of them becomes less;\n \/\/it is initalized again to allow for the top row to be centered correctly;\n \/\/like it was before the nested for loops below change it;\n var centeringX = 80;\n\n \/\/the starting number of leaves for each row\n var leavesRowNum = 17;\n\n \/\/these nested for loops creates the leaves and gives them their inital x and y;\n \/\/the inner loop creates the leaves for each row, giving them the x, y, and colorPreset;\n \/\/the outer loop controls the leaves' y, as it decreases, a new row will not only be drawn;\n \/\/but that row's total number of leaves decreases, and the centering of them is centered;\n \/\/the loops repeat until only 5 leaves are left and they are closest to the tree's x and y;\n for (var j = 120; j > -10; j-= 10){\n for (var i = 0; i < leavesRowNum; i++){\n var l = leaf(x-centeringX + i*10, y-j, floor(random(5)));\n leaves.push(l);\n }\n \/\/the leaves row number decreases to make each row have less leaves;\n leavesRowNum--;\n \/\/the centering is decreased to make sure the row, as it becomes less in number;\n \/\/is centered correctly to the tree's x;\n centeringX -= 5;\n }\n}\n\n\/\/this function creates bird objects;\nfunction bird (bx, by){\n \/\/bird object constructor;\n b = {x: bx, y: by, orgY: by, flyFunction: birdFly, drawFunction: drawBird};\n return b;\n}\n\n\/\/function that allows the bird to fly;\nfunction birdFly (){\n this.x -= 10;\n if (this.x < 0){\n this.x = width - 20;\n }\n if (this.y > this.orgY + 20 ){\n this.y -= 5;\n }\n else {\n this.y += 5;\n }\n}\n\n\/\/this draws the bird;\nfunction drawBird(){\n fill(36, 143, 190);\n circle(this.x, this.y, 20);\n fill(30);\n circle(this.x, this.y, 5);\n fill(131, 67, 51);\n triangle(this.x-15, this.y, this.x - 10, this.y - 2, this.x - 10, this.y+2);\n stroke(0);\n line(this.x - 15, this.y, this.x - 10, this.y);\n fill(16, 123, 170);\n push();\n rectMode(CORNER);\n translate(this.x, this.y);\n rotate(270);\n rect(0+5, 0 - 12, 15, 10);\n rect(0+5, 0 + 4, 15, 10);\n pop();\n}\n\n\nfunction setup() {\n createCanvas(700, 500);\n frameRate(10);\n useSound();\n frameRate(3);\n\n \/\/calls the makeLeavesOnTree function to create the leaves pattern;\n \/\/on each tree dependent on the trees' location;\n makeLeavesOnTrees(125, 390);\n makeLeavesOnTrees(350, 390);\n makeLeavesOnTrees(575, 390);\n\n \/\/calls the bird function and creates the bird objects;\n for (var i = 0; i < 7; i++){\n var bD = bird(random(100, 600), random(70, 120));\n birds.push(bD);\n }\n}\n\/\/I kept the same sound setup from the assignment because I liked the sounds;\nfunction soundSetup() { \n osc = new p5.Oscillator();\n osc.amp(0.25);\n osc.setType('sine');\n osc.start();\n}\n\n\nfunction draw() {\n \/\/this creates the background of a blue sky and green grass;\n background(154, 211, 222);\n noStroke();\n rectMode(CORNER);\n fill(24, 136, 39);\n rect(0, 475, 700, 5);\n fill(14, 146, 49);\n rect(0, 480, 700, 20);\n\n \/\/calls the drawTree function to draw trees;\n drawTree(125, 390);\n drawTree(350, 390);\n drawTree(575, 390);\n \n \/\/this for loop updates and draws each leaf in the leaves array;\n for (var i = 0; i < leaves.length; i++){\n var l = leaves[i];\n l.fallFunction();\n l.drawFunction();\n }\n \n \/\/calls the clouds function to make clouds;\n drawClouds(125, 80);\n drawClouds(325, 130);\n drawClouds(525, 105);\n\n \/\/draws the sun;\n \/\/this if statement allows for the sun to slowly change colors;\n if (!(sunG == 250 & sunB == 193)){\n sunG += 1.2\/5;\n sunB += 11.1\/5;\n }\n noStroke();\n fill(255, sunG, sunB);\n circle(600, 75, 100);\n print(leaves.length);\n\n \/\/draws the birds;\n for (var o = 0; o < birds.length; o++){\n var b = birds[o];\n b.flyFunction();\n b.drawFunction();\n }\n\n \/\/I turned the code from the assignment into a function;\n musicPlayer(pitches, durations);\n}\n\n\/\/function that draws the trees without the leaves;\nfunction drawTree (x, y){\n fill(191, 75, 25);\n rectMode(CENTER);\n rect(x, y, 20, 205);\n push();\n translate(x - 40, y - 40);\n rotate(radians(-30));\n rect(0, 0, 10, 150);\n pop();\n push();\n translate(x + 40, y - 40);\n rotate(radians(30));\n rect(0, 0, 10, 150);\n pop();\n push();\n translate(x - 30, y - 70);\n rotate(radians(-30));\n rect(0, 0, 8, 100);\n pop();\n push();\n translate(x + 30, y - 70);\n rotate(radians(30));\n rect(0, 0, 8, 100);\n pop();\n push();\n translate(x - 20, y - 90);\n rotate(radians(-30));\n rect(0, 0, 5, 80);\n pop();\n push();\n translate(x + 20, y - 90);\n rotate(radians(30));\n rect(0, 0, 5, 80);\n pop();\n push();\n translate(x - 5, y - 100);\n rotate(radians(-30));\n rect(0, 0, 3, 60);\n pop();\n push();\n translate(x + 5, y - 100);\n rotate(radians(30));\n rect(0, 0, 3, 60);\n pop();\n rect(x, y - 105, 2, 40);\n}\n\n\/\/this function creates the clouds and draws them;\nfunction drawClouds (x, y){\n fill(243, 242, 231);\n ellipse(x, y, 80, 50);\n ellipse(x + 20, y + 10, 80, 40);\n ellipse(x - 40, y + 10, 80, 30);\n ellipse(x - 10, y + 20, 70, 50);\n}\n\n\/\/I used the same code from the assignments to make the music;\n\n\/\/arrays for the pitches and durations;\n\/\/also count variables for the index and frameCount;\n\/\/finally, the boolean rest is added to account for rests in the music;\n\n\/\/I changed the pitches and went with a simple 1 beat per note;\nvar pitches = [ 64, 64, 62, 64, 64, 62, 0, 62, 64, 66, 65, 67, 65, 0,\n 60, 60, 62, 66, 65, 64, 62, 68, 68, 65, 64, 62, 62 ];\nvar durations = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];\nvar indexTracker = 0;\nvar frameCount = 0;\nvar rest = false;\n\n\/\/I turned the code that creates the music with different notes and beat durations into a function;\n\/\/the function takes a note array and a corresponding note duration array;\nfunction musicPlayer (noteArray, noteDurationArray){\n\n \/\/code for the piano to play;\n \/\/this sets the frequencies of the oscillator to the MIDI pitches;\n osc.freq(midiToFreq(noteArray[indexTracker]));\n \n \/\/checks for when the note's duration is over and acts accordingly;\n if (frameCount > noteDurationArray[indexTracker]){\n \/\/this checks for whether the tune has been completely played;\n \/\/if it has been, then the program and oscillator ends;\n if (indexTracker + 1 == noteArray.length) {\n \/\/print(frameCount);\n \/\/print(indexTracker);\n osc.stop();\n noLoop();\n }\n \/\/if it has not been completely played, then the next note will play;\n \/\/with the frameCount reset to 0;\n else {\n print(frameCount);\n indexTracker++;\n \/\/after the indexTracker is increased;\n \/\/it checks to see if the new note is a rest;\n \/\/if it is, then it deals according;\n \/\/it also turns on the oscillator after a rest;\n if (noteArray[indexTracker] != 0){\n if (rest == true) {\n osc.start();\n rest = false;\n }\n }\n else if (noteArray[indexTracker] == 0){\n rest = true;\n osc.stop();\n }\n }\n frameCount = 0;\n }\n else {\n frameCount++;\n }\n print(noteArray[indexTracker]);\n}\n<\/code><\/pre><\/p><p>\n\n\n\n<\/p><p>Instead of making 4 sounds, I used the same code from the assignments to make a song that I felt fit what I wanted to show, a scene of Fall. That scene has birds flying, leaves falling, and a sun that becomes whiter and whiter to fit the upcoming Winter.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Project \/\/Chuong Truong; \/\/cbtruong; \/\/cbtruong@andrew.cmu.edu; \/\/Section B; \/\/The Overall Story of this program is that of fall; \/\/Leaves are falling off of trees, the sun is getting whiter; \/\/The air is getting frostier; \/\/And the birds are seen more actively flying; \/\/I included no custom sound and instead wanted to portray a scene; \/\/That … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-10-sonic-story-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-10: Sonic Story”<\/span><\/a><\/p>\n","protected":false},"author":675,"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\/68674"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68674"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68674\/revisions"}],"predecessor-version":[{"id":68677,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68674\/revisions\/68677"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}