{"id":69141,"date":"2021-11-15T16:05:48","date_gmt":"2021-11-15T21:05:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69141"},"modified":"2021-11-15T16:09:24","modified_gmt":"2021-11-15T21:09:24","slug":"project-11-generative-landscape-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/15\/project-11-generative-landscape-9\/","title":{"rendered":"Project 11: Generative Landscape"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"400\" data-fontsize=\"9\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-62.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-62.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"400\"><\/iframe><pre class=\"language-javascript\" style=\"font-size:9px !important; line-height:13.05px !important\"><code class=\"p5_editor language-javascript\" style=\"font-size:9px !important;\">\/\/global variables\nvar cloudsX = [];\nvar cloudsY = [];\nvar brickX = [];\nvar brickY = [];\nvar mushroomX = [];\nvar mushroomY = [];\nvar cloudImg;\nvar brickImg;\nvar floorImg;\nvar noiseParam = 0;\nvar noiseStep = 0.01;\nvar numClouds = 5;\nvar numBricks = 3;\nvar numMushrooms = 3;\nvar mh = []; \/\/height of the mountains\n\nfunction preload() { \n  \/\/preload images\n  cloudImg = loadImage(\"https:\/\/i.imgur.com\/i3pLDv0.png\");\n  brickImg = loadImage(\"https:\/\/i.imgur.com\/yNNs74U.png\");\n  floorImg = loadImage(\"https:\/\/i.imgur.com\/LZwSMdA.png\");\n  mushroomImg = loadImage(\"https:\/\/i.imgur.com\/tflvlXK.png\");\n}\n\nfunction setup() {\n  createCanvas(480, 400);\n\n  \/\/mountain\n  for (var i = 0; i &lt; width\/2 + 1; i ++) {\n    var n = noise(noiseParam);\n    var v = map(n, 0, 1, height\/2, height);\n    mh.push(v);\n    noiseParam += noiseStep;\n  }\n\n  \/\/cloud\n  for (var i = 0; i &lt; numClouds; i ++) {\n    var cx = random(width\/numClouds*i, width\/numClouds*(i+1));\n    var cy = random(height\/4);\n    cloudsX.push(cx);\n    cloudsY.push(cy);\n  }\n\n  \/\/brick\n  for (var i = 0; i &lt; numBricks; i ++) {\n    var bx = random(width\/numBricks*i, width\/numBricks*(i+1));\n    var by = random(height\/3, height\/2);\n    brickX.push(bx);\n    brickY.push(by);\n  }\n\n  \/\/mushroom\n  for (var i = 0; i &lt; numMushrooms; i ++) {\n    var mx = random(width\/numMushrooms*i, width\/numMushrooms*(i+1));\n    var my = height-90;\n    mushroomX.push(mx);\n    mushroomY.push(my);\n  }\n  frameRate(10);\n}\n\nfunction draw() {\n  background(102, 154, 255); \/\/blue\n  drawMountain();\n  drawCloud();\n  drawBrick();\n  drawMushroom();\n\n\/\/floor\n  image(floorImg, 0, 340, 130, 30);\n  image(floorImg, 129, 340, 130, 30);\n  image(floorImg, 258, 340, 130, 30);\n  image(floorImg, 387, 340, 130, 30);\n  image(floorImg, 0, 370, 130, 30);\n  image(floorImg, 129, 370, 130, 30);\n  image(floorImg, 258, 370, 130, 30);\n  image(floorImg, 387, 370, 130, 30);\n}\n\n\/\/mountains\nfunction drawMountain() {\n  fill(52, 151, 9); \/\/green\n  beginShape();\n  vertex(0, height);\n  for (var i = 0; i &lt; mh.length; i ++) {\n    x = 2*i;\n    y = mh[i];\n    vertex(x,y);\n  }\n  vertex(width, height);\n  endShape();\n  mh.shift();\n  n = noise(noiseParam);\n  v = map(n, 0, 1, height\/2, height);\n  mh.push(v);\n  noiseParam += noiseStep;\n}\n\n\/\/cloud\nfunction drawCloud() {\n  for (var i = 0; i &lt; numClouds; i ++) {\n    image(cloudImg, cloudsX[i], cloudsY[i], 100, 33);\n  }\n  for (var i = 0; i &lt; numClouds; i ++) {\n    cloudsX[i] -= 3; \/\/update cloud position\n    if (cloudsX[i] &lt; -100) { \/\/remove cloud\n      cloudsX[i] = width;\n      cloudsY[i] = random(height\/4);\n    }\n  }\n}\n\n\/\/brick\nfunction drawBrick() {\n  for (var i = 0; i &lt; numBricks; i ++) {\n    image(brickImg, brickX[i], brickY[i], 100, 30);\n  }\n  for (var i = 0; i &lt; numBricks; i ++) {\n    brickX[i] -= 3; \/\/update brick position\n    if (brickX[i] &lt; -100) { \/\/remove cloud\n      brickX[i] = width;\n      brickY[i] = random(height\/3, height\/2);\n    }\n  }\n}\n\n\n\/\/mushroom\nfunction drawMushroom() {\n  for (var i = 0; i &lt; numMushrooms; i ++) {\n    image(mushroomImg, mushroomX[i], mushroomY[i], 40, 30);\n  }\n  for (var i = 0; i &lt; numMushrooms; i ++) {\n    mushroomX[i] -= 7; \/\/update brick position\n    if (mushroomX[i] &lt; -100) { \/\/remove cloud\n      mushroomX[i] = width;\n      mushroomY[i] = height-90;\n    }\n  }\n}\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>For this project, I decided to replicate one of my favorite childhood game, Super Mario Bros Game we used to play with Nintendo. For moving variables, I added clouds, bricks, mushrooms and the mountain the background, and included floor tiles using png files. It was challenging at first to make them move and disappear, but it was really fun to create this game-like scenery. If I had more time, I would like to add a jumping Mario so the character interacts with the game scene. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I decided to replicate one of my favorite childhood game, Super Mario Bros Game we used to play with Nintendo. For moving variables, I added clouds, bricks, mushrooms and the mountain the background, and included floor tiles using png files. It was challenging at first to make them move and disappear, but &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/15\/project-11-generative-landscape-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":630,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69141"}],"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\/630"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69141"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69141\/revisions"}],"predecessor-version":[{"id":69504,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69141\/revisions\/69504"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}