{"id":69175,"date":"2021-11-18T23:07:21","date_gmt":"2021-11-19T04:07:21","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69175"},"modified":"2021-11-18T23:08:30","modified_gmt":"2021-11-19T04:08:30","slug":"project11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/18\/project11\/","title":{"rendered":"Project11"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michelle Dang\n\/\/mtdang\n\/\/Section D\nvar cloud = [];\n\nvar water = [];\nvar offset = 0;\n\nmountain = [];\nvar inc = 0.01;\nvar xoff = 0;\n\nfunction newWater(px, py, pw) {\n var p = {x: px, y: py, w: pw,\n right: watRight};\n return p;\n}\n\n\/\/ compute the location of the right end of a platform\nfunction watRight() {\n return this.x + this.w;\n}\n\n\nfunction setup() {\n createCanvas(480, 300); \n \n \/\/ create an initial collection of cloud\n for (var i = 0; i < 10; i++){\n var rx = random(width);\n cloud[i] = makeCloud(rx);\n }\n\n for (var i=0; i<10; i++) {\n var rx = random(width);\n }\n\n var pl = newWater(0, 210, 60); \/\/ first platform\n water.push(pl);\n\n for (var i=0; i<width\/5+1; i++) {\n var n = noise(xoff)\n var value = map(n, 0, 1, 0, height);\n xoff+=inc;\n mountain.push(value);\n }\n\n frameRate(10);\n\n}\n\n\nfunction draw() {\n background(220)\n \/\/background\n noStroke()\n\n displayHorizon();\n updateAndDisplaycloud();\n removecloudThatHaveSlippedOutOfView();\n addNewcloudWithSomeRandomProbability(); \n\n\/\/mountainss\n beginShape()\n fill(\"blue\")\n vertex(0, height); \/\/bottom left corner of mountain\n for (var i=0; i<width\/5; i++) {\n vertex(i*6, mountain[i]) \/\/mountain surface\n }\n vertex(width, height) \/\/bottom right corner of mountain\n endShape();\n\n mountain.shift();\n mountain.push(map(noise(xoff), 0, 1, 0, 300));\n xoff+= inc;\n\n\n\/\/water and sand\n fill(235, 226, 160)\n rect(0, 250, width, 200); \n fill(98, 147, 204)\n rect(0, 200, width, 50); \n\n\n fill(\"blue\");\n noStroke(0);\n for (var i = 0; i < water.length; i++) {\n var p = water[i];\n rect(p.x - offset, p.y, p.w, 10, 10);\n }\n\n \/\/ if first platform is offscreen to left, remove it\n if (water.length > 0 & water[0].right() < offset) {\n water.shift();\n }\n\n \/\/ if last platform is totally within canvas, make a new one\n var lastPlat = water[water.length-1];\n if (lastPlat.right() - offset < width) {\n var p = newWater(10+lastPlat.right(), \/\/ start location\n random(210, 235), \/\/ height of new platform\n 60); \/\/ all water have width 200 for now\n water.push(p); \/\/ add to our array of water\n }\n\n offset += 1;\n \n\n }\n\nfunction updateAndDisplaycloud(){\n \/\/ Update the building's positions, and display them.\n for (var i = 0; i < cloud.length; i++){\n cloud[i].move();\n cloud[i].display();\n }\n}\n\n\n\nfunction removecloudThatHaveSlippedOutOfView(){\n \/\/ If a building has dropped off the left edge,\n \/\/ remove it from the array. This is quite tricky, but\n \/\/ we've seen something like this before with particles.\n \/\/ The easy part is scanning the array to find cloud\n \/\/ to remove. The tricky part is if we remove them\n \/\/ immediately, we'll alter the array, and our plan to\n \/\/ step through each item in the array might not work.\n \/\/ Our solution is to just copy all the cloud\n \/\/ we want to keep into a new array.\n var cloudToKeep = [];\n for (var i = 0; i < cloud.length; i++){\n if (cloud[i].x + cloud[i].breadth > 0) {\n cloudToKeep.push(cloud[i]);\n }\n }\n cloud = cloudToKeep; \/\/ remember the surviving cloud\n}\n\n\n\n\n\nfunction addNewcloudWithSomeRandomProbability() {\n \/\/ With a very tiny probability, add a new building to the end.\n var newCloudLikelihood = 0.007; \n if (random(0,1) < newCloudLikelihood) {\n cloud.push(makeCloud(width));\n }\n}\n\n\n\/\/ method to update position of building every frame\nfunction cloudMove() {\n this.x += this.speed;\n}\n\n\n\/\/ draw the building and some windows\nfunction cloudDisplay() {\n var floorHeight = 5;\n var bHeight = 30; \n var cHeight = 40; \n fill(255);\n noStroke()\n push();\n translate(this.x, height - 40);\n rect(0, -bHeight-100, this.breadth, bHeight, 20);\n rect(20, -bHeight-100, this.breadth, bHeight+10, 20);\n rect(20, -bHeight-200, this.breadth, cHeight, 20);\n stroke(200); \n pop();\n}\n\n\nfunction makeCloud(birthLocationX) {\n var bldg = {x: birthLocationX,\n breadth: 60,\n speed: -1.0,\n nFloors: round(random(2, 7)),\n move: cloudMove,\n display: cloudDisplay}\n return bldg;\n}\n\n\n\nfunction displayHorizon(){\n stroke(0);\n line (0,height-50, width, height-50); \n}\n\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Michelle Dang \/\/mtdang \/\/Section D var cloud = []; var water = []; var offset = 0; mountain = []; var inc = 0.01; var xoff = 0; function newWater(px, py, pw) { var p = {x: px, y: py, w: pw, right: watRight}; return p; } \/\/ compute the location of the right … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/18\/project11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project11”<\/span><\/a><\/p>\n","protected":false},"author":647,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69175"}],"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\/647"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69175"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69175\/revisions"}],"predecessor-version":[{"id":69178,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69175\/revisions\/69178"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}