{"id":69001,"date":"2021-11-13T20:38:08","date_gmt":"2021-11-14T01:38:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69001"},"modified":"2021-11-13T20:38:53","modified_gmt":"2021-11-14T01:38:53","slug":"project-11-generative-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/project-11-generative-landscape\/","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><p>As winter approaches, I wanted create a landscape that resembles the cold weather and loneliness of the season. That&rsquo;s why I decided to keep a greyscale color scheme. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-1024x1024.png\" alt=\"\" class=\"wp-image-69002\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-1024x1024.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-768x768.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-1536x1536.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18-1200x1200.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-18.png 2048w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-46.js\">sketch<\/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=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Christy Zo\n\/\/ andrew id: czo\n\/\/ Section C\n\nvar hill = [];\nvar hill2 = [];\nvar noiseParam = 0;\nvar noiseStep = 0.05;\nvar noiseParam2 = 0;\nvar noiseStep2 = 0.05\n\nvar snowflakePerLayer = 200;\nvar maxSize = 3;\nvar gravity = 0.75;\nvar layerCount = 5;\nvar snowflakes = [];\n\nvar walkImage = [];\nvar newCharacter = [];\nvar airplane;\nvar newPlane = [];\n\nvar buildings = [];\n\n\n\nfunction preload() {\n    var filenames = [];\n    filenames[0] = \"https:\/\/i.imgur.com\/Uz3ltZC.png\";\n    filenames[1] = \"https:\/\/i.imgur.com\/ofNc4Wv.png\";\n    filenames[2] = \"https:\/\/i.imgur.com\/7hMA7W6.png\";\n    filenames[3] = \"https:\/\/i.imgur.com\/3RBTODb.png\";\n    filenames[4] = \"https:\/\/i.imgur.com\/FliwTsj.png\";\n\n    for (var i = 0; i &lt; filenames.length; i++) {\n        walkImage[i] = loadImage(filenames[i]);\n    }\n    airplane = loadImage(\"https:\/\/i.imgur.com\/dbPwlhp.png\");\n}\n\n\/\/airplane \nfunction makePlane(px, pdx, py, pdy) {\n    var p = {x: px, dx: pdx, y:py, dy: pdy,\n            stepFunction: stepPlane,\n            drawFunction: drawPlane\n        }\n    return p;\n}\n\nfunction stepPlane() {\n    this.x += this.dx;\n    this.y += this.dy;\n\n    if (this.x &gt; 480) {\n        this.x = 0;\n        this.y = 100;\n    }\n}\n\nfunction drawPlane() {\n    image(airplane, this.x, this.y, 20, 20);\n}\n\n\/\/person\nfunction makeCharacter(cx, cdx) {\n    var c = {x: cx, dx: cdx,\n             \/\/ walkingRight: true, \n             imageNum: 0,\n             stepFunction: stepCharacter,\n             drawFunction: drawCharacter\n         }\n    return c;\n}\n\nfunction stepCharacter() {\n    this.x += this.dx;\n    this.imageNum += 1;\n    \n    if (this.imageNum == 4 ) {\n        this.imageNum = 0;\n    }\n\n    if (this.x &gt;= 680) { \n        this.x = 200;\n    } \n}\n\nfunction drawCharacter() {\n    image(walkImage[this.imageNum], this.x, 430);\n    \n}\n\n\/\/snowflake update\nfunction updateSnowflake(snowflake) {\n    var diameter = (snowflake.l * maxSize) \/ layerCount;\n    if (snowflake.y &gt; height + diameter) {\n        snowflake.y = -diameter;\n    } else {\n        snowflake.y += gravity * snowflake.l * snowflake.mass;\n    }\n}\n\n\/\/buildings\nfunction updateAndDisplayBuildings(){\n    \/\/ Update the building's positions, and display them.\n    for (var i = 0; i &lt; buildings.length; i++){\n        buildings[i].move();\n        buildings[i].display();\n    }\n}\n\nfunction removeBuildingsThatHaveSlippedOutOfView(){\n    var buildingsToKeep = [];\n    for (var i = 0; i &lt; buildings.length; i++){\n        if (buildings[i].x + buildings[i].breadth &gt; 0) {\n            buildingsToKeep.push(buildings[i]);\n        }\n    }\n    buildings = buildingsToKeep; \/\/ remember the surviving buildings\n}\n\nfunction addNewBuildingsWithSomeRandomProbability() {\n    \/\/ With a very tiny probability, add a new building to the end.\n    var newBuildingLikelihood = 0.007; \n    if (random(0,1) &lt; newBuildingLikelihood) {\n        buildings.push(makeBuilding(width));\n    }\n}\n\nfunction buildingMove() {\n    this.x += this.speed;\n}\n    \n\n\/\/ draw the building and some windows\nfunction buildingDisplay() {\n    var floorHeight = 20;\n    var bHeight = this.nFloors * floorHeight; \n    fill(255); \n    noStroke; \n    push();\n    translate(this.x, height - 40);\n    rect(0, -bHeight, this.breadth, bHeight);\n    stroke(200); \n    fill(200);\n    for (var i = 0; i &lt; this.nFloors; i++) {\n        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);\n    }\n    pop();\n}\n\nfunction makeBuilding(birthLocationX) {\n    var bldg = {x: birthLocationX,\n                breadth: 50,\n                speed: -1.0,\n                nFloors: round(random(2,8)),\n                move: buildingMove,\n                display: buildingDisplay}\n    return bldg;\n}\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    noStroke();\n    frameRate(20);\n    for (i=0; i&lt;width\/5+1; i++) {\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 100, height);\n        \n        hill.push(value);\n        noiseParam += noiseStep;\n\n    }\n\n\n\/\/ snowflakes\n    for (let l = 0; l &lt; layerCount; l++) {\n        snowflakes.push([]);\n        for (let i = 0; i &lt; snowflakePerLayer; i++) {\n            snowflakes[l].push({\n            x: random(width),\n            y: random(height),\n            mass: random(0.75, 1.25),\n            l: l + 1\n            });\n        }\n    }\n    for (var i = 0; i &lt; 10; i++){\n        var rx = random(width);\n        buildings[i] = makeBuilding(rx);\n    }\n\n    imageMode(CENTER);\n\n    var d = makeCharacter(50, 1);\n    newCharacter.push(d);\n\n    var p = makePlane(10, 5, 100, -1);\n    newPlane.push(p);\n    \n}\n\nfunction draw() {\n    background(0);\n\n    for (let l = 0; l &lt; snowflakes.length; l++) {\n        var layer = snowflakes[l];\n\n        for (let i = 0; i &lt; layer.length; i++) {\n            var snowflake = layer[i];\n            fill(255);\n            circle(snowflake.x, snowflake.y, (snowflake.l * maxSize) \/ layerCount);\n            updateSnowflake(snowflake);\n        }\n    }\n\n    beginShape();\n        vertex(0, height);\n        for (i=0; i&lt;width\/5+1; i++) {\n            noStroke();\n            fill(200);\n            vertex(i*5, hill[i]);\n \n\n        }\n        vertex(width, height);\n        endShape();\n\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 100, height);\n        hill.shift();\n        \/\/ append(hill, value);\n        hill.push(value);\n        noiseParam += noiseStep;\n    fill(150);\n    rect(0, 430, width, height);\n\n\n    updateAndDisplayBuildings();\n    removeBuildingsThatHaveSlippedOutOfView();\n    addNewBuildingsWithSomeRandomProbability(); \n\n\n    newCharacter[0].stepFunction();\n    newCharacter[0].drawFunction();\n\n    newPlane[0].stepFunction();\n    newPlane[0].drawFunction();\n    \/\/ image(walkImage[1], 100,100);\n\n}<\/code><\/pre><\/div>\n\n\n\n<p>*Due to the way I saved my png drawing of the person, you have to wait a little long for the person to appear!*<\/p>\n\n\n\n<p>After I created this work, I realized that the mountain behind moves significantly faster than everything else, making it look like this space is not on earth. Maybe this could be what winter looks like in a different planet.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>As winter approaches, I wanted create a landscape that resembles the cold weather and loneliness of the season. That&rsquo;s why I decided to keep a greyscale color scheme. sketch \/\/ Christy Zo \/\/ andrew id: czo \/\/ Section C var hill = []; var hill2 = []; var noiseParam = 0; var noiseStep = 0.05; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/project-11-generative-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":682,"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\/69001"}],"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\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69001"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69001\/revisions"}],"predecessor-version":[{"id":69005,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69001\/revisions\/69005"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}