{"id":75808,"date":"2022-11-18T20:18:29","date_gmt":"2022-11-19T01:18:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75808"},"modified":"2022-11-18T20:18:29","modified_gmt":"2022-11-19T01:18:29","slug":"project-11-generative-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/18\/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><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-57.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/* Evan Stuhlfire \n * estuhlfi@andrew.cmu.edu section B\n * project-11-generative landscape *\/\n\nvar hills = [];\nvar trees = [];\nvar chickArray = [];\nvar imgArray = [];\nvar farm = [];\nvar barnImg;\nvar cowImg;\nvar planeObj;\nvar flyingPlane = false;\n\nvar scrollSpeed = 5;\n\nfunction preload(){\n    \/\/ preload images\n\n    \/\/ URLs to imgur walking chick\n    \/\/ Chick image licensed from Adobe stock images\n    var filenames = [];\n    filenames[0] = \"https:\/\/i.imgur.com\/kjBGzBF.png\";\n    filenames[1] = \"https:\/\/i.imgur.com\/hxvbkWZ.png\";\n    filenames[2] = \"https:\/\/i.imgur.com\/53MK7g1.png\";\n    filenames[3] = \"https:\/\/i.imgur.com\/6nrYJCw.png\";\n    filenames[4] = \"https:\/\/i.imgur.com\/XmPcBDa.png\";\n    filenames[5] = \"https:\/\/i.imgur.com\/3OusOsv.png\";\n\n    for (var i = 0; i &lt; filenames.length; i++) {\n        imgArray[i] = loadImage(filenames[i]);\n\n    barnImg = loadImage(\"https:\/\/i.imgur.com\/inS5Xdt.png\");\n    cowImg = loadImage(\"https:\/\/i.imgur.com\/8XjQyMt.png\");\n\n    }\n}\n\n\/\/ methods\nfunction stepChick() {\n    \/\/ update the chick image to animate\n    if(this.imgNum &lt; chickArray.length - 2) {\n        \/\/ increment to next image\n        this.imgNum++;\n    } else {\n        \/\/ if at end of array reset to beginning\n        this.imgNum = 0; \n    }\n}\n\nfunction drawChick() {\n    \/\/ draw image\n    image(imgArray[this.imgNum], this.x, this.y, 50, 50);\n}\n\nfunction drawOneHill() {\n    \/\/ draw hill\n    fill(this.c);\n    stroke(0, 150, 0);\n    strokeWeight(1);\n    ellipse(this.x, this.y, this.w, this.hi);\n\n    this.x -= this.s; \/\/ decrement by speed\n}\n\nfunction drawTree() {\n    \/\/ draw trunk\n    stroke(77, 38, 0);\n    strokeWeight(3);\n    line(this.x, this.y, this.x, this.y + (this.h * .8));\n    line(this.x, this.y + this.h * .5, this.x + this.w * .2, \n        this.y + this.h * .2);\n    line(this.x, this.y + this.h * .7, this.x - this.w * .1, \n        this.y + this.h * .1);\n\n    \/\/ draw leaves\n    fill(this.c);\n    stroke(0, 100, 0);\n    strokeWeight(1);\n    ellipse(this.x, this.y, this.w, this.h);\n\n    this.x -= this.speed; \/\/ decrement by speed\n}\n\n\/\/ object constructor functions\nfunction newChick(cx, cy) {\n    \/\/ constructor to make a chick\n    var c = {x: cx, y: cy,\n            imgNum: 0,\n            stepFunction: stepChick,\n            drawFunction: drawChick\n        }\n    return c;\n}\n\nfunction newHill(hx, hy, hw, hhi, hc, hs) {\n    \/\/ create new hill at x, y with diameter d\n    var h = {x: hx, y: hy, w: hw, hi: hhi, \n            c: hc, s: hs,\n            drawFunction: drawOneHill\n        };\n    return h;\n}\n\nfunction newTree(tx, ty, tw, th, tc, ts) {\n    \/\/ create new tree at x, y of height th, color tc\n    \/\/ tree width = tw, tree speed = ts\n    var t = {x: tx, y: ty, w: tw, h: th, c: tc, \n            speed: ts,\n            drawFunction: drawTree\n        };\n    return t;\n}\n\nfunction newFarm(fx, fy, fi, fw, fh, fb) {\n    \/\/ create new farm img at x, y\n    \/\/ use farm image fi\n    var f = {x: fx, y: fy, img: fi,\n            w: fw, h: fh,\n            speed: scrollSpeed,\n            barn: fb\n        };\n    return f;\n}\n\nfunction newPlane(px, py, pdx, pdy) {\n    \/\/ create plane object\n    var p = {x: px, y: py, dx: pdx, dy: pdy};\n    return p;\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    frameRate(10);\n    imageMode(CENTER);\n\n    \/\/ loop to create chick images\n    for(var i = 0; i &lt; imgArray.length; i++) {\n        chickArray[i] = newChick(width\/2, height * .7);\n    }\n\n    var onCanvas = true;\n    \/\/ generate initial hills\n    var numHills = floor(random(15, 20));\n    \/\/ onCanvas = true for first set of hills to draw on canvas\n    generateHills(onCanvas, numHills); \n\n    \/\/ create a farm\n    generateFarm();\n\n    \/\/ generate initial trees\n    var numTrees = floor(random(1, 10));\n    \/\/ onCanvas = true trees drawn on canvas\n    generateTrees(onCanvas, numTrees, 1);\n    generateTrees(onCanvas, numTrees, 2);\n    generateTrees(onCanvas, numTrees, 3);\n}\n\nfunction draw() {\n    \/\/ call all the parts of the scrolling background\n    background(153, 179, 255);\n    drawSun();\n    \/\/ draw hills\n    drawHills();\n    removeHills();\n    createNewHills();\n\n    foreground();\n    \n    \/\/ draw farm elements, barns and cows\n    drawFarm();\n    removeFarm();\n    createNewFarm();\n\n    \/\/ draw trees\n    drawTrees();\n    removeTrees();\n    createNewTrees(1);\n    createNewTrees(2);\n    createNewTrees(3);\n\n    \/\/ animate the little chick\n    drawLittleChick();\n\n    \/\/ draw plane\n    createPlane();\n    drawPlane();\n}\n\nfunction drawSun() {\n    \/\/ draw stationary sun\n    fill(255, 255, 77, 200);\n    stroke(255, 255, 26);\n    strokeWeight(1);\n    ellipse(width * .85, height * .1, 50, 50);\n}\n\nfunction foreground(){\n    \/\/ draw grass\n    fill(0, 153, 51);\n    noStroke();\n    rect(0, height\/3, width, height);\n    \/\/ draw path\n    stroke(153, 102, 51);\n    strokeWeight(20);\n    line(0, height * .75, width, height * .75);\n    \/\/ draw pebbles\n    \/\/ generate differnt shades of tan\n    stroke(random(210, 250), random(125, 220), random(85, 220));\n    strokeWeight(3);\n    var y = floor(random(height * .75 - 10, height * .75 + 10));\n    var x = floor(random(0, width));\n    point(x, y);\n}\n\nfunction drawLittleChick() {\n    \/\/ loop through chick array call step and draw methods\n    for(var i = 0; i &lt; chickArray.length; i++) {\n        var currentChick = chickArray[i];\n        currentChick.stepFunction();\n        currentChick.drawFunction();\n    }\n}\n\nfunction createPlane() {\n    \/\/ probability of a plane\n    var newPlaneLikely = .0008;\n    if(random(0, 1) &lt; newPlaneLikely & !flyingPlane) {\n        var y = floor(random(40, 100));\n        var x = 0;\n        var dx = random(2, 5);\n        var dy = random(.1, .8);\n        planeObj = newPlane(x, y, dx, dy);\n        flyingPlane = true;\n    }\n}\n\nfunction drawPlane() {\n    if(flyingPlane) {\n        stroke(230, 255, 255);\n        strokeWeight(3);\n        line(planeObj.x, planeObj.y, planeObj.x + 30, planeObj.y - 2);\n        \/\/ draw wings\n        strokeWeight(1);\n        line(planeObj.x + 18, planeObj.y - 2, planeObj.x + 3, \n            planeObj.y + 5);\n        line(planeObj.x + 18, planeObj.y - 1, planeObj.x + 20, \n            planeObj.y - 10);\n        \/\/ draw tail\n        line(planeObj.x, planeObj.y, planeObj.x - 3, planeObj.y -8);\n\n        planeObj.x += planeObj.dx;\n        planeObj.y -= planeObj.dy; \n\n        if(planeObj.x &gt; width || planeObj.y &lt; 0) {\n            flyingPlane = false;\n        }\n    }\n\n}\n\nfunction createNewHills() {\n    \/\/ probability of a hill\n    var newHillLikely = .07;\n    if(random(0, 1) &lt; newHillLikely) {\n        var numHills = floor(random(5, 12));\n        var onCanvas = false;\n        generateHills(onCanvas, numHills);\n    }\n}\n\nfunction removeHills() {\n    \/\/ if array has more items and hills have scrolled off screen\n    var keep = [];\n\n    if(hills.length &gt;= 0) {\n        for(var i = 0; i &lt; hills.length; i++) {\n            if(hills[i].x + hills[i].w\/2 &gt; 0) {\n                keep.push(hills[i]);\n            }\n        }\n        hills = keep;\n    }\n}\n\nfunction drawHills() {\n    \/\/ draw hills on canvas\n    for(var i = 0; i &lt; hills.length; i++) {\n        var h = hills[i];\n        h.drawFunction();\n    }\n}\n\nfunction generateHills(onCanvas, num) {\n    \/\/ if onCanvas = true then generate first set of hills\n    \/\/ on canvas, otherwise generate off canvas\n\n    \/\/ generate num number of new hills\n    for(var i = 0; i &lt; num; i++) {\n        \/\/ generate hill color\n        var g = floor(random(50, 230));\n        var c = color(80, g, 0);\n\n        \/\/ generate x, y, width, and height of hill\n        var y = random(height\/2.6, height\/2);\n        var w = random(100, width);\n        var h = random(150, 250);\n\n        if(onCanvas) {\n            \/\/ generate hills on canvas\n            var x = random(-w, width + w * 3);\n            var w = random(width\/2, width);\n        } else {\n            \/\/ generate hills off canvas\n            var x = random(width + (w * 1.5), width * 3); \n        }\n\n        var hill = newHill(x, y, w, h, c, 5);\n        hills.push(hill);\n    }\n}\n\nfunction createNewFarm(){\n    \/\/ probability of a farm\n    var newFarmLikely = .01;\n    if(random(0, 1) &lt; newFarmLikely) {\n        generateFarm();\n    }\n}\n\nfunction removeFarm() {\n    \/\/ if array has more items and farms have scrolled off screen\n    var keep = [];\n\n    if(farm.length &gt;= 0) {\n        for(var i = 0; i &lt; farm.length; i++) {\n            if(farm[i].x + farm[i].w &gt; 0) {\n                keep.push(farm[i]);\n            }\n        }\n        farm = keep;\n    }\n}\n\nfunction generateFarm() {\n    \/\/ create cows on farm\n    var isBarn = false\n    var numCows = floor(random(10, 30));\n    for(var i = 0; i &lt; numCows; i++) {\n        \/\/ create a cow object and add it to the farm\n        \/\/ array for each cow\n        var x = random(width, width * 4);\n        var y = random(height\/2.2, height\/3.5);\n\n        if(y &lt; height\/2.7) {\n            \/\/ make cows smaaller, they are further away\n            var w = random(10, 15);\n            var h = random(10, 15);\n        } else {\n            \/\/ make cows bigger, they are closer\n            var w = random(25, 30);\n            var h = random(25, 30);\n        }\n\n        var c = newFarm(x, y, cowImg, w, h, isBarn);\n        farm.push(c);\n    }\n\n    \/\/ randomly generate barn variables\n    var x = random(width + w, width * 2);\n    var y = random(height\/2.6, height\/3.7);\n\n    \/\/ if barn is further away, draw it smaller\n    if(y &lt; height\/3.2) {\n        var w = random(20, 40);\n        var h = random(20, 40);\n    } else {\n        \/\/ close and bigger\n        var w = random(60, 90);\n        var h = random(50, 70);\n    }\n\n    isBarn = true;\n    var f = newFarm(x, y, barnImg, w, h, isBarn);\n    farm.push(f);\n}\n\nfunction drawFarm() {\n    \/\/ draw farm on canvas\n    var barnArray = [];\n    if(farm.length &gt; 0) {\n        for(var i = 0; i &lt; farm.length; i++) {\n            var f = farm[i];\n            if(f.barn) {\n                barnArray.push(f);\n            } else {\n                \/\/ draw cows behind barns\n                image(f.img, f.x, f.y, \n                    f.w, f.h);\n                f.x -= f.speed; \n            }\n        }\n        \/\/ draw barns in their own layer on top of cows\n        for(var i = 0; i &lt; barnArray.length; i++) {\n            var b = barnArray[i];\n            image(b.img, b.x, b.y, b.w, b.h);\n            b.x -= b.speed;\n        }\n        barnArray = [];\n    }\n}\n\nfunction createNewTrees(layer) {\n    var newTreeLikely = .012;\n    var numTrees = floor(random(2, 4));\n    \/\/ send false to generate off canvas\n    var onCanvas = false;\n\n    if(random(0, 1) &lt; newTreeLikely) {\n        generateTrees(onCanvas, numTrees, layer);\n    }\n}\n\nfunction removeTrees() {\n    \/\/ if array has more items and trees have scrolled off screen\n    var keep = [];\n    if(trees.length &gt;= 0) {\n        for(var i = 0; i &lt; trees.length; i++) {\n            if(trees[i].x + trees[i].w &gt; 0) {\n                keep.push(trees[i]);\n            }\n        }\n        trees = keep;\n    }\n}\n\nfunction drawTrees() {\n    \/\/ draw trees on canvas\n    if(trees.length &gt;= 0) {\n        for(var i = 0; i &lt; trees.length; i++) {\n            var t = trees[i];\n            t.drawFunction();\n        }\n    }\n}\n\nfunction generateTrees(start, num, layer) {\n    \/\/ if start = true then generate first set of trees\n    \/\/ on canvas, otherwise generate off canvas\n\n    \/\/ generate num number of new trees\n    for(var i = 0; i &lt; num; i++) {\n        \/\/ generate tree color\n        var r = floor(random(70, 100));\n        var g = floor(random(80, 255));\n        var b = floor(random(80, 120));\n        if(layer == 1) {\n            var c = color(r, g, b, 190); \n            \/\/ create big trees in background\n            bigTrees(start, c);\n        } else if(layer == 2) {\n            r = floor(random(0, 150));\n            g = floor(random(50, 150));\n            b = floor(random(250, 255));\n            var c = color(r, g, b, 190);\n            \/\/ create little trees in midground\n            littleTrees(start, c);\n        } else {\n            r = floor(random(250, 255));\n            g = floor(random(30, 150));\n            b = floor(random(80, 255));\n            var c = color(r, g, b, 200);\n            \/\/ create shrubs in foreground\n            shrubs(start, c);\n        }\n    }\n}\n\nfunction bigTrees(start, c) {\n    \/\/ generate x, y, width, and height of trees\n    var w = random(50, 70);\n    var h = random(40, 70); \n\n    var y = random(height\/2.6, height\/2.8);\n\n    if(start) {\n        \/\/ generate trees on canvas\n        var x = random(5, width); \n    } else {\n        \/\/ generate trees off canvas\n        var x = random(width + w\/2, width * 3); \n    }\n\n    \/\/ create tree and add to array\n    var tree = newTree(x, y, w, h, c, 5);\n    trees.push(tree);\n}\n\nfunction littleTrees(start, c) {\n    \/\/ generate x, y, width, and height of trees\n    var w = random(30, 40);\n    var h = random(15, 40); \n\n    var y = random(height\/1.7, height\/2);\n\n    if(start) {\n        \/\/ generate trees on canvas\n        var x = random(5, width); \n    } else {\n        \/\/ generate trees off canvas\n        var x = random(width + w\/2, width * 2); \n    }\n\n    \/\/ create tree and add to array\n    var tree = newTree(x, y, w, h, c, 5);\n    trees.push(tree);\n}\n\nfunction shrubs(start, c) {\n    \/\/ generate x, y, width, and height of trees\n    var w = random(20, 40);\n    var h = random(15, 20); \n\n    var y = random(height\/1.1, height\/1.3);\n\n    if(start) {\n        \/\/ generate trees on canvas\n        var x = random(5, width); \n    } else {\n        \/\/ generate trees off canvas\n        var x = random(width + w\/2, width * 3); \n    }\n\n    \/\/ create tree and add to array\n    var tree = newTree(x, y, w, h, c, 5);\n    trees.push(tree);\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":760,"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\/f2022\/wp-json\/wp\/v2\/posts\/75808"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75808"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75808\/revisions"}],"predecessor-version":[{"id":75811,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75808\/revisions\/75811"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}