{"id":68875,"date":"2021-11-08T09:46:09","date_gmt":"2021-11-08T14:46:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68875"},"modified":"2021-11-08T09:46:09","modified_gmt":"2021-11-08T14:46:09","slug":"project-10-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/08\/project-10-3\/","title":{"rendered":"Project 10"},"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>This project depicts a bicycle moving along a path through different scenery. Different sound effects play as the bicycle passes through grass, birds fly by, trees and fall foliage appear, and night starts to fall.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.36-AM.png\" alt=\"\" class=\"wp-image-68876\" width=\"300\" height=\"300\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.36-AM.png 796w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.36-AM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.36-AM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.36-AM-768x768.png 768w\" sizes=\"(max-width: 300px) 85vw, 300px\"><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.42-AM.jpg\" alt=\"\" class=\"wp-image-68877\" width=\"312\" height=\"310\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.42-AM.jpg 800w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.42-AM-150x150.jpg 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.42-AM-768x764.jpg 768w\" sizes=\"(max-width: 312px) 85vw, 312px\"><\/figure><div class=\"wp-block-image\"><figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.52-AM.jpg\" alt=\"\" class=\"wp-image-68878\" width=\"304\" height=\"298\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.52-AM.jpg 796w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.52-AM-300x294.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.35.52-AM-768x753.jpg 768w\" sizes=\"(max-width: 304px) 85vw, 304px\"><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.36.14-AM.jpg\" alt=\"\" class=\"wp-image-68879\" width=\"309\" height=\"309\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.36.14-AM.jpg 800w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.36.14-AM-300x300.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.36.14-AM-150x150.jpg 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-08-at-9.36.14-AM-768x768.jpg 768w\" sizes=\"(max-width: 309px) 85vw, 309px\"><\/figure><p><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-37.js\">sketch<\/a>\n\n\n\n<iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 10: Sonic Story\n\nvar birdSound;\nvar autumn;\nvar chimes;\nfunction preload()\n{\n    chimes = loadSound(\"http:\/\/localhost:8000\/chimes3.wav\");\n    birdSound = loadSound(\"http:\/\/localhost:8000\/bird.wav\");\n    autumn = loadSound(\"http:\/\/localhost:8000\/autumn.wav\");\n    chirping = loadSound(\"http:\/\/localhost:8000\/chirping.wav\");\n\n}\n\n\nfunction setup()\n{\n    createCanvas(400, 400);\n    useSound();\n    frameRate(5);\n}\n\n\nfunction soundSetup()\n{\n    birdSound.setVolume(5);\n    autumn.setVolume(3);\n    autumn.amp (.4);\n    chimes.setVolume(.5);\n\n}\n\nvar x;\nvar y;\nfunction draw()\n{\n\n    background(0, 200, 255);\n\/\/biking through the grass, windchimes playing\n    if (frameCount &lt; 40)\n    {\n        grass();\n        chimes.play();\n    }\n\n\/\/birds fly by and chirp\n    if (frameCount &gt;= 40 & frameCount < 80)\n    {\n        bird(width + 400 - frameCount*10, frameCount*4);\n        bird(width + 430 - frameCount*10, height - frameCount*5);\n        bird(width + 400 - frameCount*10, height\/2 - frameCount*3);\n        bird(width + 420 - frameCount*10, height\/3 + frameCount*2);\n        bird(width + 400 - frameCount*10, 15 + frameCount*2);\n        if (frameCount % 8 == 0)\n        {\n            birdSound.play();\n        }\n    }\n\/\/bike through the autumn trees, wind is blowing\n    if (frameCount &gt;= 80 & frameCount < 160)\n    {\n        if (frameCount % 10 == 0 && frameCount < 120)\n        {\n            autumn.play();\n        }\n        background(0, 200, 255);\n        trees (width + 1120 - frameCount*14, height);\n    }\n    if (frameCount &gt;= 140)\n    {\n        night();\n    }\n\n    noStroke();\n    fill (200);\n\/\/road and bicycle\n    rect (0, 385, width, 20);\n    bicycle(150, 350);\n\/\/ends program after a certain amount of time\n    if (frameCount &gt; 200)\n    {\n        noLoop();\n    }\n\n}\n\nfunction bicycle (x, y)\n{\n    stroke(0);\n    strokeWeight(5);\n    noFill();\n    circle (x, y, 70, 70);\n    circle (x + 100, y, 70, 70);\n    line (x, y, x + 50, y);\n    line (x + 50, y, x + 32, y - 42);\n    line (x + 24, y - 42, x + 42, y - 42);\n    line (x + 50, y, x + 90, y - 55);\n    line (x + 88, y - 65, x + 100, y);\n    line (x + 88, y - 65, x + 72, y - 65);\n\n}\n\nfunction bird (x, y)\n{\n    noStroke();\n    fill (0, 0, 255);\n    ellipse (x, y, 40, 32);\n    push();\n    translate(x, y);\n    rotate (radians(5));\n    ellipse(20, 5, 10, 5);\n    rotate (radians(15));\n    ellipse(20, 4, 10, 5);\n\/\/wing\n    fill (170, 220, 255);\n    ellipse(6, 4, 11, 6);\n    rotate(radians(-25));\n    ellipse(5, 3, 11, 6);\n    rotate(radians(-25));\n    ellipse(4, 2, 11, 6);\n    pop();\n    fill (255);\n    ellipse (x - 8, y - 5, 12, 12);\n    fill (0);\n    ellipse (x - 10, y - 5.5, 6, 6);\n    fill (255, 180, 30);\n    triangle (x - 26, y + 8, x - 19, y, x - 15, y + 9);\n}\n\nfunction grass()\n{\n    fill (0, 230, 0);\n    noStroke();\n    push();\n    translate (400 - frameCount*20, 0);\n    for (var x = width; x &gt;= 0; x -= 20)\n    {\n        triangle (x, height, x + 20, height, x + 10, height - 100);\n    }\n    pop();\n}\n\nfunction trees (x)\n{\n\/\/green tree\n    noStroke();\n    fill (100, 50, 0);\n    triangle (x - 10, height, x + 10, height, x, height - 100);\n    triangle (x - 26, height - 55, x, height - 55, x, height - 45);\n    triangle (x + 35, height - 60, x, height - 65, x, height - 55);\n    fill (0, 150, 0);\n    circle (x - 25, height - 100, 60);\n    circle (x + 25, height - 120, 75);\n    circle (x + 35, height - 60, 50);\n    circle (x - 30, height - 55, 40);\n\n\/\/yellow tree\n    x += 75;\n    fill (100, 50, 0);\n    triangle (x - 10, height, x + 10, height, x, height - 250);\n    fill (255, 200, 0);\n    ellipse (x, height - 250, 80, 110);\n\n\/\/red orange yellow tree\n    x += 200;\n    fill (100, 50, 0);\n    triangle (x - 10, height, x + 15, height, x, height - 200);\n\n    fill (255, 130, 0);\n    circle (x + 15, height - 135, 50);\n    fill (255, 50, 50);\n    circle (x, height - 170, 80);\n    fill (240, 230, 0);\n    circle (x - 18, height - 125, 40);\n\n\/\/tallest tree\n    x -= 75;\n    fill (100, 50, 0);\n    triangle (x + 20, height, x-10, height, x + 5, 0);\n    fill (255, 255, 0);\n    circle (x + 20, 90, 50);\n    fill (200, 255, 0);\n    circle (x + 25, 5, 100);\n    fill (150, 255, 0);\n    circle (x + 10, 45, 70);\n    fill (100, 255, 0);\n    circle (x-12, 70, 60);\n}\n\n\/\/sky becomes night time, stars come out\nfunction night()\n{\n    if (frameCount % 15 == 0)\n    {\n         chirping.play();   \n    }\n\n    background (0, 200 - (frameCount - 140), 255 - (frameCount-140));\n    fill (255);\n    noStroke();\n    if (frameCount &gt; 160)\n    {\n        circle (random(width),random(height), 10);\n    }\n    circle (random(width),random(height), 10);\n    circle (random(width),random(height), 10);\n}\n\n\n\n\n\n\n<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This project depicts a bicycle moving along a path through different scenery. Different sound effects play as the bicycle passes through grass, birds fly by, trees and fall foliage appear, and night starts to fall. sketch \/\/Alana Wu \/\/ID: alanawu \/\/Project 10: Sonic Story var birdSound; var autumn; var chimes; function preload() { chimes = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/08\/project-10-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10&#8221;<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/68875"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68875"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68875\/revisions"}],"predecessor-version":[{"id":68883,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68875\/revisions\/68883"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}