{"id":69109,"date":"2021-11-14T23:59:55","date_gmt":"2021-11-15T04:59:55","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69109"},"modified":"2021-11-15T00:00:35","modified_gmt":"2021-11-15T05:00:35","slug":"window-gazing-generative-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/window-gazing-generative-landscape\/","title":{"rendered":"Window Gazing &#8211; 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-height=\"240\" data-width=\"640\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-59.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=\"640\" height=\"240\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var trunks = [];\nvar hills = [];\nvar mountains = [];\nvar noiseParam = 0;\nvar noiseStep = 0.01;\nvar clouds = [];\nfunction setup() {\n    createCanvas(640, 240); \n\n    \/\/Trunks\n    for (var i = 0; i &lt; 10; i++){\n        var rx = random(width);\n        trunks[i] = makeTrunk(rx);\n    }\n\n   \/\/Hills\n    for (var i = 0; i &lt;= width; i ++) {\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 0, height*1.5);\n        hills.push(value-10);\n        noiseParam += noiseStep;\n    }\n\n    \/\/Mountains\n    for (var i = 0; i &lt;=width\/5+1; i++) {\n        var n = noise(noiseParam);\n        var value = map(n,0,1,height*1\/5,height*4\/5);\n        mountains.push(value);\n        noiseParam += noiseStep;\n    }\n\n    \/\/Clouds\n    for (var i = 0; i &lt; 10; i ++) {\n        var cloudX = random(width);\n        var cloudY = random(height\/2, height);\n        clouds[i] = makeClouds(cloudX, cloudY);\n    }\n\n    frameRate(60);\n}\n\n\nfunction draw() {\n    background(191,234,255); \n\n    drawMountains();\n\n    updateAndDisplayClouds();\n    removeClouds();\n    addNewClouds(); \n\n    drawHills();\n\n    updateAndDisplayTrunks();\n    removeTrunks();\n    addNewTrunks(); \n\n    drawWindow();\n}\n\nfunction drawWindow() {\n    \/\/simple code used to draw window that viewer is looking through\n    var border = 40\n    stroke(141,171,223);\n    noFill();\n    strokeWeight(border);\n    rect(border\/2,border\/2,width-border,height-border);\n    stroke(220);\n    strokeWeight(border\/2)\n    rect((border\/2)+20,(border\/2)+20,(width-border)-40,(height-border)-40,20);\n\n}\n\n\/\/Updating position and displaying clouds\nfunction updateAndDisplayClouds() {\n    for (var i = 0; i &lt; clouds.length; i ++) {\n        clouds[i].move();\n        clouds[i].display();\n    }\n}\n\n\/\/if the clouds reach the end of the screen, remove and replace in new array\nfunction removeClouds() {\n    var cloudsToKeep = [];\n    for (var i = 0; i &lt; clouds.length; i++){\n        if (clouds[i].x &gt; 0) {\n            cloudsToKeep.push(clouds[i]);\n        }\n    }\n    clouds = cloudsToKeep;\n}\n\n\/\/based on set probability, add new cloud into array\nfunction addNewClouds() {\n    var newCloudLikelihood = 0.07; \n    if (random(0,1) &lt; newCloudLikelihood) {\n        var newcloudX = 640;\n        var newcloudY = random(200);\n        clouds.push(makeClouds(newcloudX, newcloudY));\n    }\n}\n\nfunction makeClouds(CLOUDX, CLOUDY) {\n    var cld = {x: CLOUDX,\n             y: CLOUDY,\n             speed: -5,\n             move: cloudMove,\n             display: cloudDisplay}\n    return cld;\n}\n\n\/\/moving clouds\nfunction cloudMove() {\n    this.x += this.speed;\n}\n\n\/\/drawing of cloud\nfunction cloudDisplay() {\n    fill(255); \/\/ cream color\n    noStroke();\n    ellipse(this.x, this.y, 20, 30);\n    ellipse(this.x, this.y, 20, 30);\n    ellipse(this.x, this.y, 30, 10);\n    ellipse(this.x, this.y, 10, 20);\n    ellipse(this.x, this.y, 40, 20);\n}\n\n\/\/hill drawing using Begin and End Shape\nfunction drawHills() {\n    noStroke();\n    fill(\"green\");\n    \n    beginShape();\n    vertex(0, height);\n    for (i = 0; i &lt;= width\/5 + 1; i += 1) {\n        vertex(i*5, hills[i]);\n        vertex((i+1)*5, hills[i+1]);\n    }\n    vertex(width, height);\n    endShape();\n\n    hills.shift();\n    var n = noise(noiseParam);\n    var value = map(n, 0, 1, 0, height);\n    hills.push(value);\n    noiseParam += noiseStep;\n\n}\n\n\/\/Mountains is variantion of hill code\nfunction drawMountains() {\n    noStroke();\n    fill(161,178,158);\n    \n    beginShape();\n    vertex(0, height);\n    for (i = 0; i &lt;= width\/5 + 1; i += 1) {\n        vertex(i*5, mountains[i]);\n        vertex((i+1)*5, mountains[i+1]);\n    }\n    vertex(width, height);\n    endShape();\n\n    mountains.shift();\n    var n = noise(noiseParam);\n    var value = map(n, 0, 1, 0, height);\n    mountains.push(value);\n    noiseParam += noiseStep;\n\n}\n\n\/\/trunks in front of window being moved and displayed here\nfunction updateAndDisplayTrunks(){\n    for (var i = 0; i &lt; trunks.length; i++){\n        trunks[i].move();\n        trunks[i].display();\n    }\n}\n\n\/\/if trunk leaves screen, remove and replace with another\nfunction removeTrunks(){\n    var trunksToKeep = [];\n    for (var i = 0; i &lt; trunks.length; i++){\n        if (trunks[i].x + trunks[i].breadth &gt; 0) {\n            trunksToKeep.push(trunks[i]);\n        }\n    }\n    trunks = trunksToKeep; \n}\n\n\/\/small probability of adding new trunk\nfunction addNewTrunks() {\n    var probability = 0.08; \n    if (random(0,1) &lt; probability) {\n        trunks.push(makeTrunk(width));\n    }\n}\n\n\n\/\/ moving trunk along window as if \"passing\"\nfunction TrunkMove() {\n    this.x += this.speed;\n}\n    \n\n\/\/ drawing of trunks\nfunction TrunkDisplay() {\n    noStroke();\n    var tHeight = 0\n    fill(102,60,11);  \n    push();\n    translate(this.x, height);\n    rect(0, 0, this.breadth, -height);\n    stroke(200); \n    pop();\n}\n\nfunction makeTrunk(birthLocationX) {\n    var trnk = {x: birthLocationX,\n                breadth: 40,\n                speed: -7,\n                move: TrunkMove,\n                display: TrunkDisplay}\n    return trnk;\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>This is my project on Generative landscapes. Using what I learned from class, I created an artistic interpretation of what it feels like to look out of the window of a moving vehicle.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var trunks = []; var hills = []; var mountains = []; var noiseParam = 0; var noiseStep = 0.01; var clouds = []; function setup() { createCanvas(640, 240); \/\/Trunks for (var i = 0; i &lt; 10; i++){ var rx = random(width); trunks[i] = makeTrunk(rx); } \/\/Hills for (var i = 0; i &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/window-gazing-generative-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Window Gazing &#8211; Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":679,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69109"}],"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\/679"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69109"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69109\/revisions"}],"predecessor-version":[{"id":69114,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69109\/revisions\/69114"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}