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

For this project, I made 2 fish who are lovers that swim randomly around an aquarium looking for each other. When they meet, they fall in love again and the supportive crab in the corner claps for them and a love song plays.<\/p>\n\n\n\n

sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl@andrew.cmu.edu\n\/\/Section D\n\/\/project 10\n\n\/\/two fishes swimming around tank (bump sound when they hit the sides)\n\/\/when they bump into each other they fall in love (song plays)\n\/\/crab clapping for them (clapping sound)\n\/\/house bubbles turn into hearts (bubbling sound)\n\n\/\/ use http:\/\/localhost:8000\/ to run html\n\n\/\/variables for pink fish\nvar x1 = 50;\nvar y1 = 50;\nvar dx1 = 50;\nvar dy1 = 20;\n\n\/\/variables for green fish\nvar x2 = 300;\nvar y2 = 300;\nvar dx2 = 40;\nvar dy2 = 30;\n\nvar meet = false; \/\/checks to see if fish meet\nvar crabClaw = 1; \/\/keeps track of frame for crab claw clapping\nvar songCount = 0; \/\/counter for song played\nvar bubbleArrayX = []; \/\/x value for each bubble\nvar bubbleArrayY = []; \/\/y value for each bubble\nvar heartArrayX = []; \/\/x value for each heart\nvar heartArrayY = []; \/\/y value for each heart\n\n\/\/sound variables \nvar bump;\nvar bubbles;\nvar heart;\nvar clap;\n\nfunction preload() {\n bump = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/bump.mp3\");\n bubbles = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/bubble-4.wav\");\n heart = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/lovesong.mp3\");\n clap = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/clap.wav\");\n}\n\nfunction setup() {\n noStroke();\n createCanvas(600, 400);\n useSound();\n frameRate(10);\n\n \/\/sets up bubble and heart arrays\n for (i = 170; i > 50 ; i-=15) {\n bubbleArrayX.push(400 + random(-10,10));\n bubbleArrayY.push(i);\n heartArrayX.push(400 + random(-10,10));\n heartArrayY.push(i);\n }\n\n}\n\nfunction soundSetup() { \n bump.setVolume(0.2);\n bubbles.setVolume(0.2);\n clap.setVolume(0.1);\n heart.setVolume(0.3)\n\n}\n\nfunction draw() {\n background(65,105,225);\n fill(255,250,205);\n rect(0,height-50,width,height);\n\n\n drawCrab();\n drawHouse();\n\n \/\/if fish meet, play song and stop bump sounds\n if (meet == true) {\n bump.stop();\n playSong();\n }\n\n \/\/if fish have not met, keep moving them\n if (meet == false) {\n x1 += dx1;\n y1 += dy1;\n }\n fill(255,182,193) \/\/pink fish\n drawFish(x1,y1,dx1);\n dx1 += random(-5,5);\n dy1 += random(-5,5);\n if (x1 < 40) {\n bump.play();\n dx1 = -dx1;\n }\n if (x1 > width - 40) {\n bump.play();\n dx1 = -dx1;\n }\n if (y1 < 40) {\n bump.play();\n dy1 = -dy1;\n }\n if (y1 > height - 75) {\n bump.play();\n dy1 = -dy1;\n }\n\n if (meet == false) {\n x2 += dx2;\n y2 += dy2;\n }\n fill(173,255,47) \/\/green fish\n drawFish(x2,y2,dx2);\n dx2 += random(-5,5);\n dy2 += random(-5,5);\n if (x2 < 40) {\n bump.play();\n dx2 = -dx2;\n }\n if (x2 > width - 40) {\n bump.play();\n dx2 = -dx2;\n }\n if (y2 < 40) {\n bump.play();\n dy2 = -dy2;\n }\n if (y2 > height - 75) {\n bump.play();\n dy2 = -dy2;\n }\n\n meetUp(25); \/\/checks if fish have met\n}\n\nfunction drawFish(x, y, dx) {\n ellipse(x, y, 60, 40); \/\/fish body\n\n \/\/checks which direction fish is facing to draw tail\n if (dx > 0) {\n if (meet == true) { \/\/if fish met, draw smile\n push();\n fill(0);\n circle(x+20,y,10);\n pop();\n\n push();\n noFill();\n stroke(2);\n arc(x+10, y+7, 10, 10, 0, PI);\n pop();\n } else { \/\/no smile\n push();\n fill(0);\n circle(x+20,y,10);\n pop();\n }\n triangle(x-30, y, x-50, y-10, x-50, y+10); \/\/fish tail\n\n } if (dx < 0) {\n if (meet == true) { \/\/if fish met, draw smile\n push();\n fill(0);\n circle(x-20,y,10);\n pop();\n\n push();\n noFill();\n stroke(2);\n arc(x-10, y+7, 10, 10, 0, -PI);\n pop();\n } else { \/\/no smile\n push();\n fill(0);\n circle(x-20,y,10);\n pop();\n }\n triangle(x+30, y, x+50, y-10, x+50, y+10); \/\/fish tail\n }\n\n}\n\n\/\/checks if fish have \"met\" by checking distance between them <= 0 and draws heart\nfunction meetUp(size) {\n if (dist(x1, y1, x2, y2) <= 40) {\n \/\/draws heart\n fill(\"red\")\n var xPos = x1;\n if ((y1-70) < 10) {\n var yPos = y1 + 70;\n } else {\n var yPos = y1 - 70;\n }\n beginShape();\n vertex(xPos, yPos);\n bezierVertex(xPos - size \/ 2, yPos - size \/ 2, xPos - size, yPos + size \/ 3, xPos, yPos + size);\n bezierVertex(xPos + size, yPos + size \/ 3, xPos + size \/ 2, yPos - size \/ 2, xPos, yPos);\n endShape();\n\n meet = true; \/\/change variable to true to show fish have met\n }\n}\n\nfunction drawCrab() {\n fill(\"orange\");\n ellipse(100, height-80,80,50);\n circle(60,height-100,20);\n circle(140,height-100,20);\n arc(60,height-130, 50, 50, -(radians(30)), -HALF_PI);\n arc(150,height-130, 50, 50, -(radians(30)), -HALF_PI);\n push();\n noFill();\n strokeWeight(10);\n stroke(\"orange\");\n arc(120, height-35, 80, 80, PI + QUARTER_PI, TWO_PI);\n arc(80, height-35, 80, 80, PI, PI + HALF_PI);\n pop();\n fill(0);\n circle(120,height-90, 8);\n circle(100,height-90, 8);\n\n \/\/if fish have met, crab claps by drawing circles on top of arcs\n if (meet == true) {\n arc(100, height-80, 20, 20, 0, -PI);\n\n \/\/alternating variable so crab claws open and close with every frame\n if (crabClaw == 1) {\n clap.play();\n fill(\"orange\");\n circle(60, height-130,50,50);\n circle(150,height-130,50,50);\n crabClaw += 1;\n } else if (crabClaw == 2) {\n crabClaw = 1;\n }\n\n }\n\n}\n\nfunction drawHouse() {\n fill(160,82,45); \/\/brown\n rect(width-200, height-170, 120,120);\n triangle(width-220,height-170,width-140,height-250,width-60,height-170);\n rect(width-200,height-230,20,80);\n fill(173,216,230); \/\/light blue\n rect(width-160, height-110,40,60);\n fill(0); \/\/black\n circle(width-155,height-70,5);\n fill(173,216,230); \/\/light blue\n rect(width-180,height-150,20,20);\n rect(width-120,height-150,20,20);\n\n fill(224,255,255); \/\/light cyan\n bubbles.play();\n\n \/\/moving bubbles up the canvas by adding random dx and dy\n for (i = 0; i < bubbleArrayX.length; i++) {\n var randomDx = (random(-5,5));\n var randomDy = (random(-10,0));\n\n if (meet == false) { \/\/if fish have not met, house bubbles\n bubbleArrayX[i] += randomDx;\n bubbleArrayY[i] += randomDy;\n \/\/reset x and y position if bubble leaves canvas\n if (bubbleArrayY[i] <= 0) {\n bubbleArrayX[i] = 400 + random(-10,10);\n bubbleArrayY[i] = 150;\n }\n circle(bubbleArrayX[i], bubbleArrayY[i], 5)\n\n } else if (meet == true) { \/\/if fish have met, house bubbles hearts\n heartArrayX[i] += randomDx;\n heartArrayY[i] += randomDy;\n var size = 10;\n fill(\"pink\")\n beginShape();\n vertex(heartArrayX[i], heartArrayY[i]);\n bezierVertex(heartArrayX[i] - size \/ 2, heartArrayY[i] - size \/ 2, heartArrayX[i] - size, heartArrayY[i] + size \/ 3, heartArrayX[i], heartArrayY[i] + size);\n bezierVertex(heartArrayX[i] + size, heartArrayY[i] + size \/ 3, heartArrayX[i] + size \/ 2, heartArrayY[i] - size \/ 2, heartArrayX[i], heartArrayY[i]);\n endShape();\n \/\/reset x and y position if heart leaves canvas\n if (heartArrayY[i] <= 0) {\n heartArrayX[i] = 400 + random(-10,10);\n heartArrayY[i] = 150;\n }\n }\n } \n\n}\n\n\/\/plays love song after fish meet\nfunction playSong() {\n \/\/only want song to play once so use counter\n if (songCount == 0) {\n heart.play();\n songCount += 1;\n } else {\n \/\/do nothing\n }\n}\n\n\n\n\n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I made 2 fish who are lovers that swim randomly around an aquarium looking for each other. When they meet, they fall in love again and the supportive crab in the corner claps for them and a love song plays. sketchDownload \/\/Catherine Liu \/\/jianingl@andrew.cmu.edu \/\/Section D \/\/project 10 \/\/two fishes swimming around … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/11\/project-10-sonic-story-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 10: Sonic Story”<\/span><\/a><\/p>\n","protected":false},"author":654,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68955"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68955"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68955\/revisions"}],"predecessor-version":[{"id":68964,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68955\/revisions\/68964"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}