{"id":69054,"date":"2021-11-14T15:31:30","date_gmt":"2021-11-14T20:31:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69054"},"modified":"2021-11-14T15:33:39","modified_gmt":"2021-11-14T20:33:39","slug":"project-11-generative-landscape-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-11-generative-landscape-5\/","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><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"663\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-1024x663.jpg\" alt=\"\" class=\"wp-image-69055\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-1024x663.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-300x194.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-768x497.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-1536x994.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-2048x1325.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Untitled_Artwork-8-1200x776.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><\/p>\n\n\n\n<p>This is the concept sketch of my generative landscape. I wanted to create a road with hills in the background and cars driving across the road. If I had more time with the project, I would&rsquo;ve added more randomized details to the hills like stripes or grass texture patterns.<\/p>\n\n\n\n<p>My process was pretty simple. I created objects for the different elements that I would be randomizing. For example, I made an array of objects for the hills, the roads, and the cars. I would repeat the process of creating the different functions for the various elements&mdash;with minor adjustments to the movement and randomness of each element.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"300\" data-width=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-52.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\">\/\/Anthony Pan\n\/\/Section C\n\n\/\/objects to create:\n    \/\/hills\n    \/\/cars\n    \/\/road\n\n\/\/hold hills\nvar hillshowing = [];\n\/\/object for hills\nvar hills;\n\n\/\/hold road1\nvar road1showing = [];\n\/\/object for road1\nvar road1;\n\nvar road2;\nvar road2showing = [];\n\n\/\/car object\nvar car;\n\/\/array holding car object\nvar carShowing = [];\n\n\/\/car2 object\nvar car2;\n\n\/\/array holding car2 objects\nvar car2Showing = [];\n\n\/\/frame counter\nvar counter = 0;\n\n\nfunction setup() {\n    createCanvas(480, 300);\n\n    \/\/create hills\n    for(var i = 0; i &lt; 20; i++) {\n        hills = makeHills(i*30, 245);\n        hillshowing.push(hills);\n    }\n\n    \/\/create road1\n    for(var j = 0; j&lt;10; j++) {\n        road1 = makeRoad1(j*10, 280);\n        road1showing.push(road1);\n\n    }\n\n    \/\/create road2\n    for(var k = 0; k&lt;10; k++) {\n        road2 = makeRoad2(k*10, 250);\n        road2showing.push(road2);\n    }\n\n    \/\/create cars on road1\n    for(var h = 0; h &lt; 5; h++) {\n        car = makeCar(0, round(random(270, 290)), random(2,4));\n        carShowing.push(car);\n    }\n\n    \/\/create cars on road2\n    for(var c = 0; c &lt; 5; c++) {\n        car2 = makeCar2(width, round(random(240, 255)), random(-4,-2));\n        car2Showing.push(car2);\n    }\n\n}\n\n\nfunction draw() {\n    \/\/sky \n    background(135, 221, 255);\n\n    \/\/sun\n    drawSun();\n\n    \/\/hills\n    updateandDrawhills();\n    removeHillsOffScreen();\n    addNewHill();\n\n\n    \/\/roads2 \/ upper roads\n    fill(156, 117, 95);\n    rect(0, 245, width, 40);\n    updateandDrawRoad2();\n    removeRoad2offScreen();\n    addNewRoad2();\n\n    \/\/roads lower\/ road1\n    fill(0);\n    rect(0, 270, width, 40);\n    updateandDrawRoad1();\n    removeRoad1offScreen();\n    addNewRoad1();\n\n    \/\/draw cars on road2\n    updateandDrawCar2();\n    removeCars2OffScreen();\n    addCar2();\n\n    \/\/draw cars\n    updateandDrawCar();\n    removeCarsOffScreen();\n    addNewCar();\n\n    \n\n \n}\n\n\n\/\/draw sun\nfunction drawSun() {\n    fill(\"lightyellow\");\n    noStroke();\n    circle(90,80, 40);\n\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/MAKE Car2 Functions\n\n\/\/car 2 constructor\nfunction makeCar2(cx, cy, zoom) {\n    var car2 = {x: cx, y:cy,\n        speed:zoom,\n        r: random(255),\n        g: random(255),\n        b: random(255),\n        move: car2Move,\n        draw: drawCar2 }\n    return car2;\n}\n\n\/\/draw car2 object\nfunction drawCar2() {\n    fill(this.r, this.g, this.b);\n    rect(this.x, this.y, 20, 10);\n\n    fill(0);\n    ellipse(3+this.x, 10+this.y, 4, 4);\n    ellipse(this.x + 17, this.y +10, 4, 4);\n\n}\n\n\/\/update and draw car2\nfunction updateandDrawCar2() {\n    for(var i = 0; i &lt; car2Showing.length; i++) {\n        car2Showing[i].move();\n        car2Showing[i].draw();\n    }\n}\n\n\/\/move car2\nfunction car2Move() {\n    this.x += this.speed;\n}\n\n\/\/remove car2s that are off screen \nfunction removeCars2OffScreen() {\n    var cars2ToKeep = [];\n    for (var i = 0; i &lt; car2Showing.length; i++){\n        if (car2Showing[i].x &gt; 0) {\n            cars2ToKeep.push(car2Showing[i]);\n        }\n    }\n    car2Showing = cars2ToKeep; \/\/ remember the showing cars\n\n}\n\n\/\/make new car2 based on probability \nfunction addCar2() {\n    var newcarlikelihood = 0.03;\n    if(random(0,1) &lt; newcarlikelihood) {\n         car2Showing.push(makeCar2(width, round(random(240, 255)), random(-4,-2)));\n    }\n}\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/MAKE Car Functions\n\n\/\/car constructor\nfunction makeCar(cx, cy, zoom) {\n    var car = {x: cx, y:cy,\n        speed:zoom,\n        r: random(255),\n        g: random(255),\n        b: random(255),\n        move: carMove,\n        draw: drawCar }\n    return car;\n}\n\n\/\/draw car object\nfunction drawCar() {\n    fill(this.r, this.g, this.b);\n    rect(this.x, this.y, 20, 10);\n\n    fill(0);\n    ellipse(3+this.x, 10+this.y, 4, 4);\n    ellipse(this.x + 17, this.y +10, 4, 4);\n\n}\n\n\/\/update car position and draw car\nfunction updateandDrawCar() {\n    for(var i = 0; i &lt; carShowing.length; i++) {\n        carShowing[i].move();\n        carShowing[i].draw();\n    }\n}\n\n\/\/move car\nfunction carMove() {\n    this.x += this.speed;\n}\n\n\/\/remove cars that are off screen\nfunction removeCarsOffScreen() {\n    var carsToKeep = [];\n    for (var i = 0; i &lt; carShowing.length; i++){\n        if (carShowing[i].x &lt; width) {\n            carsToKeep.push(carShowing[i]);\n        }\n    }\n    carShowing = carsToKeep; \/\/ remember the showing cars\n\n}\n\n\/\/make new car every 100 frames\nfunction addNewCar() {\n    counter +=1;\n    if (counter % 100== 0){\n        carShowing.push(makeCar(0, round(random(270, 290)), random(2,4)));\n    }\n\n}\n\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/MAKE ROAD2 Functions\n\n\/\/constructor for road2\nfunction makeRoad2(rx, ry) {\n    var road2 = {x:rx, y:ry,\n        speed: -0.7,\n        move: road2Move,\n        draw: drawRoad2 }\n\n    return road2;\n}\n\n\/\/draw road2 \nfunction drawRoad2() {\n    fill(120);\n    rect(this.x, this.y, width, 40);\n\n    for(var i = 0; i &lt; 50; i++) {\n        var dx = i * 10;\n        fill(\"yellow\");\n        rect(this.x + dx, this.y + 10, 6, 2);\n    }\n}\n\n\/\/update road2 position and draw\nfunction updateandDrawRoad2() {\n    for(var i = 0; i &lt; road2showing.length; i++) {\n        road2showing[i].move();\n        road2showing[i].draw();\n    }\n}\n\nfunction road2Move() {\n    this.x += this.speed;\n}\n\n\/\/remove roads off the screen\nfunction removeRoad2offScreen() {\n    var road2ToKeep = [];\n    for (var i = 0; i &lt; road2showing.length; i++){\n        if (road2showing[i].x + width &gt; 0) {\n            road2ToKeep.push(road2showing[i]);\n        }\n    }\n    road2showing = road2ToKeep; \/\/ remember the showing roads\n}\n\nfunction addNewRoad2() {\n    counter +=1;\n    if (counter % 17 == 0){\n        road2showing.push(makeRoad2(width,250));\n    }\n\n}\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/MAKE ROAD1 FUNCTIONS\n\n\/\/constructor for road1\nfunction makeRoad1(rx, ry) {\n    var road1 = {x:rx, y:ry,\n        speed: -0.5,\n        move: road1Move,\n        draw: drawRoad1 }\n\n    return road1;\n}\n\n\n\/\/draw road\nfunction drawRoad1() {\n    fill(120);\n    rect(this.x, this.y, width, 40);\n\n    for(var i = 0; i &lt; 50; i++) {\n        var dx = i * 10;\n        fill(\"yellow\");\n        rect(this.x + dx, this.y + 10, 6, 2);\n    }\n}\n\n\/\/update road1 position and draw\nfunction updateandDrawRoad1() {\n    for(var i = 0; i &lt; road1showing.length; i++) {\n        road1showing[i].move();\n        road1showing[i].draw();\n    }\n}\n\nfunction road1Move() {\n    this.x += this.speed;\n}\n\n\/\/remove roads off the screen\nfunction removeRoad1offScreen() {\n    var road1ToKeep = [];\n    for (var i = 0; i &lt; road1showing.length; i++){\n        if (road1showing[i].x + width &gt; 0) {\n            road1ToKeep.push(road1showing[i]);\n        }\n    }\n    road1showing = road1ToKeep; \/\/ remember the showing roads\n}\n\nfunction addNewRoad1() {\n    counter +=1;\n    if (counter % 25 == 0){\n        road1showing.push(makeRoad1(width,280));\n    }\n\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/MAKE HILLS FUNCTIONS\n\n\/\/update hill position and draw hill\nfunction updateandDrawhills() {\n    for(var i =0; i &lt; hillshowing.length; i++){\n        hillshowing[i].move();\n        hillshowing[i].draw();\n    }\n\n}\n\n\n\/\/remove hills that have left the screen \nfunction removeHillsOffScreen(){\n    var hillsToKeep = [];\n    for (var i = 0; i &lt; hillshowing.length; i++){\n        if (hillshowing[i].x +20 &gt; 0) {\n            hillsToKeep.push(hillshowing[i]);\n        }\n    }\n    hillshowing = hillsToKeep; \/\/ remember the showing hills\n}\n\n\n\/\/make new hill from right side of canvas\nfunction addNewHill() {\n    counter +=1;\n    if (counter % 25 == 0){\n        hillshowing.push(makeHills(width+20,245));\n    }\n}\n\n\/\/hill constructor\nfunction makeHills(hx, hy) {\n    var hills = {x:hx, y:hy, \n        width:random(40, 70), \n        height:random(100, 300), \n        r:0, g:random(115,200), b: random(15, 35),\n        speed: -1.0,\n        move: hillsMove,\n        draw: drawHills }\n    return hills;\n\n}\n\n\/\/draw hills\nfunction drawHills() {\n    fill(this.r, this.g, this.b);\n    ellipse(this.x, this.y, this.width, this.height);\n}\n\n\n\/\/move hill to left\nfunction hillsMove() {\n    this.x += this.speed;\n}\n\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is the concept sketch of my generative landscape. I wanted to create a road with hills in the background and cars driving across the road. If I had more time with the project, I would&rsquo;ve added more randomized details to the hills like stripes or grass texture patterns. My process was pretty simple. I &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-11-generative-landscape-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"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\/69054"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69054"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69054\/revisions"}],"predecessor-version":[{"id":69060,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69054\/revisions\/69060"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}