{"id":69039,"date":"2021-11-14T13:43:49","date_gmt":"2021-11-14T18:43:49","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69039"},"modified":"2021-11-14T13:48:34","modified_gmt":"2021-11-14T18:48:34","slug":"project-11-generative-landscape-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-11-generative-landscape-4\/","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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-50.js\" data-width=\"450\" data-height=\"400\">generative landscape<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var wood; \/\/ wooden table\nvar belt = []; \/\/ conveyer belt\nvar sushi = [];\nvar plate = [];\nvar sushiTypes = [];\nvar terrain = [];\nvar noiseParam = 0;\nvar noiseStep = 0.01;\nvar sky;\nvar clouds = [];\n\nvar sushiLinks = [\n    \"https:\/\/i.imgur.com\/fm2adto.png\",\n    \"https:\/\/i.imgur.com\/Q2z9Ki8.png\",\n    \"https:\/\/i.imgur.com\/tUeehNx.png\",\n    \"https:\/\/i.imgur.com\/H2lTaNf.png\",\n    \"https:\/\/i.imgur.com\/t7TbPiI.png\",\n    \"https:\/\/i.imgur.com\/dNH5jvD.png\",\n    \"https:\/\/i.imgur.com\/YJ7h1Hl.png\",\n    \"https:\/\/i.imgur.com\/Hu1TVEI.png\",\n    \"https:\/\/i.imgur.com\/ZyAzhTq.png\",\n    \"https:\/\/i.imgur.com\/X8sFOwk.png\",\n    \"https:\/\/i.imgur.com\/t3pzPkC.png\",\n    ]\n\nfunction preload() {\n    wood = loadImage(\"https:\/\/i.imgur.com\/5cpfZzh.png\");\n    belt = loadImage(\"https:\/\/i.imgur.com\/s1SR1ru.png\");\n    sky = loadImage(\"https:\/\/i.imgur.com\/qvwpqNr.png\");\n    \n    for (var i = 0; i &lt; 11; i ++) {\n        var sushiImage;\n        sushiImage = loadImage(sushiLinks[i]);\n        sushiTypes.push(sushiImage);\n    }\n}\n\nfunction setup() {\n    createCanvas(450, 400);\n    imageMode(CENTER);\n    wood.resize(450, 0);\n    belt.resize(450, 0);\n    sky.resize(450, 0);\n\n    \/\/ make collection of sushi\n    for (var i = 0; i &lt; 5; i++) {\n        var sx = random(width);\n        sushi[i] = makeSushi(sx);\n    }\n\n    \/\/ make background terrain\n    for (var i = 0; i &lt;= width; i ++) {\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 0, height);\n        terrain.push(value);\n        noiseParam += noiseStep;\n    }\n\n    \/\/ make clouds\n    for (var i = 0; i &lt; 5; i ++) {\n        var cloudx = random(width);\n        var cloudy = random(height);\n        clouds[i] = makeClouds(cloudx, cloudy);\n    }\n\n}\n\n\nfunction draw() {\n    image(sky, width\/2, height\/2);\n    drawTerrain();\n    image(wood, width\/2, 250);\n    image(belt, width\/2, 250);\n\n    updateAndDisplaySushi();\n    removeSushiThatHaveSlippedOutOfView();\n    addNewSushiWithSomeRandomProbability(); \n\n    updateAndDisplayClouds();\n    removeCloudsThatHaveSlippedOutOfView();\n    addNewCloudsWithSomeRandomProbability(); \n}\n\n\/\/ all cloud related functions\n\nfunction updateAndDisplayClouds() {\n    for (var i = 0; i &lt; clouds.length; i ++) {\n        clouds[i].move();\n        clouds[i].display();\n    }\n}\n\nfunction removeCloudsThatHaveSlippedOutOfView() {\n    var cloudsToKeep = [];\n    for (var i = 0; i &lt; clouds.length; i++){\n        if (clouds[i].x + 60 &gt; 0) {\n            cloudsToKeep.push(clouds[i]);\n        }\n    }\n    clouds = cloudsToKeep;\n}\n\nfunction addNewCloudsWithSomeRandomProbability() {\n    var newCloudLikelihood = 0.01; \n    if (random(0,1) &lt; newCloudLikelihood) {\n        var newcloudX = random(width);\n        var newcloudY = random(200);\n        clouds.push(makeClouds(newcloudX, newcloudY));\n    }\n}\n\nfunction makeClouds(CLOUDX, CLOUDY) {\n    var c = {x: CLOUDX,\n             y: CLOUDY,\n             speed: -2,\n             move: cloudMove,\n             display: cloudDisplay}\n    return c;\n}\n\nfunction cloudMove() {\n    this.x += this.speed;\n}\n\nfunction cloudDisplay() {\n    fill(255, 254, 246); \/\/ cream color\n    noStroke();\n    ellipse(this.x, this.y - 5, 60, 50);\n    ellipse(this.x - 20, this.y + 10, 60, 50);\n    ellipse(this.x + 15, this.y - 5, 70, 50);\n    ellipse(this.x + 5, this.y + 20, 60, 50);\n    ellipse(this.x + 30, this.y + 10, 80, 50);\n}\n\n\/\/ all terrain functions\n\nfunction drawTerrain() {\n    fill(73, 133, 115); \n    noStroke();\n    beginShape();\n    vertex(0, height);\n    for (i = 0; i &lt;= width\/5 + 1; i += 1) {\n        vertex(i*5, terrain[i]);\n        vertex((i+1)*5, terrain[i+1]);\n    }\n    vertex(width, height);\n    endShape();\n\n    \/\/ make terrain continuous\n    terrain.shift();\n    var n = noise(noiseParam);\n    var value = map(n, 0, 1, 0, height);\n    terrain.push(value);\n    noiseParam += noiseStep;\n\n}\n\n\/\/ all sushi related functions\n\nfunction updateAndDisplaySushi() {\n    for (var i = 0; i &lt; sushi.length; i ++) {\n        sushi[i].move();\n        sushi[i].display();\n    }\n}\n\nfunction removeSushiThatHaveSlippedOutOfView() {\n    var sushiToKeep = [];\n    for (var i = 0; i &lt; sushi.length; i++){\n        if (sushi[i].x + sushi[i].breadth &gt; 0) {\n            sushiToKeep.push(sushi[i]);\n        }\n    }\n    sushi = sushiToKeep;\n}\n\nfunction addNewSushiWithSomeRandomProbability() {\n    var newSushiLikelihood = 0.007; \n    if (random(0,1) &lt; newSushiLikelihood) {\n        sushi.push(makeSushi(450));\n    }\n}\n\n\nfunction makeSushi(birthLocationX) {\n    var s = {x: birthLocationX,\n                breadth: 50,\n                speed: -1,\n                sushiType: random(sushiTypes),\n                move: sushiMove,\n                display: sushiDisplay}\n    return s;\n}\n\n\nfunction sushiMove() {\n    this.x += this.speed;\n}\n\nfunction sushiDisplay() {\n    image(this.sushiType, this.x, 310, this.breadth+10, this.breadth);\n}\n<\/code><\/pre><\/div>\n\n\n<p>For this project, I decided to create a sushi conveyer belt that&rsquo;s located outdoors. I started off by drawing all the different types of sushi that&rsquo;ll be randomized in the landscape. I also drew the conveyer belt and the wooden table. Then I implemented the background which is the sky with a randomized terrain\/hill and clouds. I struggled a bit with creating an array of objects using images, so I couldn&rsquo;t quite figure how to make the sushi not overlap each other. I also tried to create plates under the sushi, but I ended up removing them because they weren&rsquo;t quite matching up with the sushi.<\/p>\n\n\n\n<p>This is all the variations of the sushi:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"715\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-1024x715.png\" alt=\"\" class=\"wp-image-69044\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-1024x715.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-300x210.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-768x536.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-1536x1073.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-2048x1431.png 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sushi-12-1200x838.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>generative landscape var wood; \/\/ wooden table var belt = []; \/\/ conveyer belt var sushi = []; var plate = []; var sushiTypes = []; var terrain = []; var noiseParam = 0; var noiseStep = 0.01; var sky; var clouds = []; var sushiLinks = [ &#8220;https:\/\/i.imgur.com\/fm2adto.png&#8221;, &#8220;https:\/\/i.imgur.com\/Q2z9Ki8.png&#8221;, &#8220;https:\/\/i.imgur.com\/tUeehNx.png&#8221;, &#8220;https:\/\/i.imgur.com\/H2lTaNf.png&#8221;, &#8220;https:\/\/i.imgur.com\/t7TbPiI.png&#8221;, &#8220;https:\/\/i.imgur.com\/dNH5jvD.png&#8221;, &#8220;https:\/\/i.imgur.com\/YJ7h1Hl.png&#8221;, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-11-generative-landscape-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69039"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69039"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69039\/revisions"}],"predecessor-version":[{"id":69047,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69039\/revisions\/69047"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}