For this project I wanted to make a boat move through a fiery landscape, like the final world in Mario or Mustafar from Star Wars. I made moving embers, meteors, and randomly generated spires in the background to illustrate this volcanic landscape. <\/p>\n\n\n\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Graham Murtha\n\/\/Section A\n\/\/gmurtha@andrew.cmu.edu\n\/\/Project 11- moving landscape\n\n\/\/ A fire Nation boat sails through Mustafar AND world 8 of Mario - so many universes in one!\n\nvar embers = [];\nvar spire = [];\nvar meteors = [];\n\nvar ship; \/\/ fire nation ship from Avatar lol- it seemed to fit the color scheme, and is steam powered\n\nfunction preload(){ \/\/ input boat image\n ship = loadImage(\"https:\/\/i.imgur.com\/v5MzkRY.png\");\n}\n\nfunction setup() {\n createCanvas(450, 300);\n frameRate(10);\n\n \/\/initial embers in the sky\n for(var i = 0; i < 6; i++){\n var sx = random(width);\n embers[i] = makeEmber(sx);\n }\/\/initial spires\n for(var i = 0; i < 10; i++){\n var sx = random(width);\n spire[i] = makeSpire(sx);\n }\n \/\/random meteors\n for(var i = 0; i < 1; i++){\n var sx = random(width);\n meteors[i] = makeMeteors(sx);\n }\n\n}\n\nfunction draw() {\n \/\/fiery sky\n background(200, 100, 0); \/\/mid-tone neutral orange\n\n \/\/ generates sequence of random embers slowly panning left\n updateAndDisplayEmber();\n removeEmberOutOfView();\n addNewEmber();\n\n \/\/ generates sequence of random meteors quickly panning left\n updateAndDisplayMeteors();\n removeMeteorsOutOfView();\n addNewMeteors();\n\n \/\/ generates sequence of random spires quickly panning left\n updateAndDisplaySpire();\n removeSpireOutOfView();\n addNewSpire();\n\n \/\/water\n fill(120,70,30); \/\/ darker orange- reflects sky a bit\n noStroke();\n rect(0, 230, 500, 75);\n\n \/\/ship stays stagnant, but as its surroundings move left it seems to move right\n image(ship, width\/2 - 200, 180, 200, 100);\n\n}\n\n\/\/Ember object\nfunction makeEmber(emberLocationX){\n var ember = {x : emberLocationX,\n y : random(0, 170),\n emberScale : random(0.5, 2.5),\n speed : -1,\n move : moveEmber,\n display : displayEmber}\n return ember;\n}\n\nfunction displayEmber(){\n push();\n translate(this.x, this.y);\n fill('gold');\n noStroke();\n scale(this.emberScale);\n ellipse(0,0,5,5);\n pop();\n}\n\n\/\/recoordinates ember positions and display\nfunction updateAndDisplayEmber(){\n for(var i = 0; i < embers.length; i++){\n embers[i].move();\n embers[i].display();\n }\n}\n\nfunction addNewEmber(){\n var newEmberProbability = 0.01; \/\/ controls scarcity of embers in background \n if (random(0, 1) < newEmberProbability){\n embers.push(makeEmber(width));\n }\n}\n\nfunction removeEmberOutOfView (){\n \/\/if ember dissappears on the left, remove it from the array\n var embersToKeep = [];\n for (var i = 0; i < embers.length; i++){\n if (embers[i].x + 50 > 0) {\n embersToKeep.push(embers[i]);\n }\n }\n \/\/embers left\n embers = embersToKeep;\n}\n\nfunction moveEmber(){\n this.x += this.speed;\n}\n\n\n\/\/Spire object\nfunction makeSpire(spireLocationX){\n var spire = {xt : spireLocationX,\n yt : 240,\n spireScale : random(0.1, 0.5),\n spireColor : color(random(20,80),0, 0),\n speedT : -6,\n moveT : moveSpire,\n displayT : displaySpire}\n return spire;\n}\n\nfunction displaySpire(){\n push();\n translate(this.xt + 60, this.yt); \/\/add 60 so transitions onto screen\n noStroke();\n scale(this.spireScale);\n \n \/\/Spire defining shape\n noStroke();\n fill(this.spireColor);\n beginShape();\n vertex(-80,-10);\n vertex(80,-10);\n vertex(10,-200);\n vertex(40,-250);\n vertex(0,-300);\n vertex(-40,-250);\n vertex(-10,-200);\n endShape();\n\n pop();\n}\n\n\/\/update spire positions and display\nfunction updateAndDisplaySpire(){\n for(var i = 0; i < spire.length; i++){\n spire[i].moveT();\n spire[i].displayT();\n }\n}\n\nfunction addNewSpire(){\n var newSpireProbability = 0.04; \/\/ controls scarcity of rock spires \n if (random(0, 1) < newSpireProbability){\n spire.push(makeSpire(width));\n }\n}\n\nfunction removeSpireOutOfView (){\n \/\/if ember dissappears on the left, remove it from the array\n var spireToKeep = [];\n for (var i = 0; i < spire.length; i++){\n if (spire[i].xt + 100 > 0) {\n spireToKeep.push(spire[i]);\n }\n }\n \/\/spires left\n spire = spireToKeep;\n}\n\nfunction moveSpire(){\n this.xt += this.speedT;\n}\n\n\n\n\/\/meteors object\nfunction makeMeteors(locationX){\n var meteors = {xs : locationX,\n ys : random(75, 125),\n meteorsScale : random(0.5, 3),\n speedS : -13,\n moveS : moveMeteors,\n displayS : displayMeteors}\n return meteors;\n}\n\nfunction displayMeteors(){\n push();\n translate(this.xs + 80, this.ys); \/\/adds 80 transitions on screen\n fill(\"gold\");\n noStroke();\n scale(this.meteorScale);\n \n \/\/meteor\n fill('orange');\n triangle(0,6,0,-6,50,0)\n fill(40,20,20)\n ellipse(0,0,20,20);\n fill('orange');\n ellipse(1,2,3,3);\n ellipse(3,6,3,3);\n ellipse(-4,-6,3,3);\n\n pop();\n}\n\n\/\/update Spire positions and display\nfunction updateAndDisplayMeteors(){\n for(var i = 0; i < meteors.length; i++){\n meteors[i].moveS();\n meteors[i].displayS();\n }\n}\n\nfunction addNewMeteors(){\n var newMeteorsProbability = 0.01; \/\/ controls scarcity of meteors\n if (random(0, 1) < newMeteorsProbability){\n meteors.push(makeMeteors(width));\n }\n}\n\nfunction removeMeteorsOutOfView (){\n \/\/if ember dissappears on the left, remove it from the array\n var meteorsToKeep = [];\n for (var i = 0; i < meteors.length; i++){\n if (meteors[i].xs + 100 > 0) {\n meteorsToKeep.push(meteors[i]);\n }\n }\n \/\/Spires left\n meteors = meteorsToKeep;\n}\n\nfunction moveMeteors(){\n this.xs += this.speedS;\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Graham Murtha Section A For this project I wanted to make a boat move through a fiery landscape, like the final world in Mario or Mustafar from Star Wars. I made moving embers, meteors, and randomly generated spires in the background to illustrate this volcanic landscape. sketch \/\/Graham Murtha \/\/Section A \/\/gmurtha@andrew.cmu.edu \/\/Project 11- moving … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-landscape-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 11- Landscape”<\/span><\/a><\/p>\n","protected":false},"author":748,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75948"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/748"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75948"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75948\/revisions"}],"predecessor-version":[{"id":75950,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75948\/revisions\/75950"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}