{"id":69096,"date":"2021-11-14T23:14:44","date_gmt":"2021-11-15T04:14:44","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69096"},"modified":"2021-11-14T23:17:07","modified_gmt":"2021-11-15T04:17:07","slug":"project-11-generative-landscape-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-11-generative-landscape-7\/","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> <a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-57.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=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Julianna Bolivar\n\/\/jbolivar@andrew.cmu.edu\n\/\/Section D\n\/\/Generative Landscape\n\nvar hills = []; \/\/hills array\nvar trees = [];\nvar treesShowing = [];\nvar clouds = [];\nvar cloudsShowing = [];\nvar counter = 0;\nvar cloudCounter = 0;\nvar noiseParam = 0;\nvar noiseStep = 0.002;\n\n\nfunction setup() {\n    createCanvas(480, 300);\n    \/\/trees \n    for (var i = 0; i &lt; 20;i++){\n        var trs = random(width);\n        trees[i] = makeTrees(trs);\n    }\n    \/\/hills\n    for (var i=0; i&lt;width\/2+1; i++){\n        var n = noise(noiseParam);\n        var value = map(n, 0, 1, 0, height);\n        noiseParam += noiseStep;\n        hills.push(value);\n    }\n\n      for (var i = 0; i &lt; 5; i ++) {\n        var cloudX = random(width);\n        var cloudY = random(0, 40);\n        cloudsShowing[i] = makeClouds(cloudX, cloudY);\n    }\n\n    frameRate(20);\n}\n\nfunction draw() {\n    background(165,182,182);\n    noStroke();\n    \n    \/\/sun\n    fill(204,102,0);\n    circle(40,50,30);\n    \n\n    \/\/hills fill shape\n    beginShape(); \n    fill(56,87,33);\n    vertex(0, height);\n    for (var i=0; i&lt;width\/2; i+=1){\n        vertex(i*5, hills[i]);\n    }\n    vertex(width, height);\n    endShape();\n    hills.shift();\n    hills.push(map(noise(noiseParam), 0, 1, 0, height));\n    noiseParam += noiseStep; \/\/move sideways\n\n    updateAndDrawClouds();\n    removeCloudsOffScreen();\n    addNewClouds();\n\n    updateandDrawTrees();\n    removeTreesOffScreen();\n    addNewTrees();\n    \n}\n\nfunction updateandDrawTrees(){\n    for(var i=0; i &lt; treesShowing.length; i++){\n        treesShowing[i].move();\n        treesShowing[i].draw();\n    }\n\n}\n\nfunction removeTreesOffScreen(){\n    var treesToKeep = [];\n    for (var i = 0; i &lt; treesShowing.length; i++){\n        if (treesShowing[i].x+20 &gt; 0) {\n            treesToKeep.push(treesShowing[i]);\n        }\n    }\n    treesShowing = treesToKeep; \/\/ remember showing trees\n}\n\nfunction addNewTrees(){\n    counter+=1;\n    if (counter % 25 == 0){\n        treesShowing.push(makeTrees(width, random(150,300)));\n    }\n}\n\nfunction makeTrees(tx, ty){\n    var trees = {x:tx, y:ty, \n        width:random(10, 20), \n        height:random(50, 90), \n        r:random(75,200), g:random(75,100), b: 0,\n        speed: -1.0,\n        move: treesMove,\n        draw: drawTrees }\n    return trees;\n\n}\n\n\/\/draw trees\nfunction drawTrees(){\n    fill(160,82,45);\n    rect(this.x, this.y, this.width, this.height);\n    fill(this.r, this.g, this.b);\n    circle(this.x-5, this.y-10, 50);\n    circle(this.x+20, this.y-10, 50);\n    circle(this.x+5, this.y-20, 50);\n}\n\nfunction treesMove(){\n    this.x += this.speed;\n}\n\n\n\n\nfunction updateAndDrawClouds(){\n    for (var i = 0; i &lt; cloudsShowing.length; i++) {\n        cloudsShowing[i].move();\n        cloudsShowing[i].draw();\n    }\n}\n\nfunction removeCloudsOffScreen(){\n    var cloudsToKeep = [];\n    for (var i = 0; i &lt; cloudsShowing.length; i++){\n        if (cloudsShowing[i].cloudX + 10 &gt; 0) {\n            cloudsToKeep.push(cloudsShowing[i]);\n        }\n    }\n    cloudsShowing = cloudsToKeep;\n}\n\nfunction addNewClouds(){\n  cloudCounter+=1;\n    if (cloudCounter % 100 == 0){\n        cloudsShowing.push(makeClouds(width, random(0,60)));\n    }\n}\n\nfunction makeClouds(cx, cy){\n    var c = {cloudX: cx,\n             cloudY: cy,\n             cloudSpeed: -1,\n             move: cloudMove,\n             draw: cloudDraw}\n    return c;\n}\n\nfunction cloudMove(){\n    this.cloudX += this.cloudSpeed;\n}\n\nfunction cloudDraw(){\n    fill(165);\n    noStroke();\n    ellipse(this.cloudX, this.cloudY - 5, 60, 50);\n    ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);\n    ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);\n    ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);\n    ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);\n}\n\n<\/code><\/pre><\/div>\n\n\n\n<p>My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I&rsquo;ve struggled to make beautiful projects, but I&rsquo;m pretty satisfied with this one. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I&rsquo;ve struggled to make beautiful projects, but I&rsquo;m pretty satisfied with this one.<\/p>\n","protected":false},"author":640,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69096"}],"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\/640"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69096"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69096\/revisions"}],"predecessor-version":[{"id":69101,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69096\/revisions\/69101"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}