{"id":75815,"date":"2022-11-18T21:03:37","date_gmt":"2022-11-19T02:03:37","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75815"},"modified":"2022-11-18T21:04:07","modified_gmt":"2022-11-19T02:04:07","slug":"project-11-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/18\/project-11-landscape\/","title":{"rendered":"Project 11 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-58.js\" data-width=\"480\" data-height=\"480\">project11<\/a>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"727\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-1024x727.jpeg\" alt=\"\" class=\"wp-image-75816\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-1024x727.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-300x213.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-768x545.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-1536x1090.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-2048x1453.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/IMG_0005-1200x851.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p>It was fun to figure out how to create a whole landscape without having to define absolutely everything and making it more interesting with randomness. I added a shooting star with a very small creation probability to create a little surprise within the landscape every once in a while. <\/p><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\">\/\/ Rachel Legg \/ rlegg \/ Section C\n\n\/\/have trees and stars move by\n\/\/every once in a while, a surprising shooting star\n\/\/car in the middle (moving past trees)\n\nvar stars = [];\nvar trees = [];\nvar shootingStars = [];\n\nvar car;\n\nfunction preload(){\n    car = loadImage(\"https:\/\/i.imgur.com\/C7SXV3W.png\");\n}\n\nfunction setup() {\n    createCanvas(450, 300);\n    frameRate(10);\n\n    \/\/initial stars and trees\n    for(var i = 0; i &lt; 6; i++){\n        var sx = random(width);\n        stars[i] = makeStar(sx);\n    }\n    for(var i = 0; i &lt; 10; i++){\n        var sx = random(width);\n        trees[i] = makeTree(sx);\n    }\n    \/\/random shooting star\n    for(var i = 0; i &lt; 1; i++){\n        var sx = random(width);\n        shootingStars[i] = makeShootingStar(sx);\n    }\n\n}\n\nfunction draw() {\n    \/\/sky - dark blue\n    background(10, 52, 99);\n    \/\/ground\n    fill(\"darkgreen\");\n    noStroke();\n    rect(0, 240, 500, 75);\n    \/\/road\n    fill(\"gray\");\n    rect(0, 260, 495, 10)\n\n    updateAndDisplayStar();\n    removeStarOutOfView();\n    addNewStar();\n\n    updateAndDisplayShootingStars();\n    removeShootingStarOutOfView();\n    addNewShootingStars();\n\n    updateAndDisplayTree();\n    removeTreeOutOfView();\n    addNewTree();\n\n    \/\/car stays stationary as scenery moves by\n    \/\/drew out car in illustrator & uploaded to imgur\n    image(car, width\/2 - 60, 207, 165, 65);\n\n}\n\n\/\/stars object\nfunction makeStar(starLocationX){\n    var star = {x : starLocationX,\n                y : random(0, 170),\n                starScale : random(0.1, 0.5),\n                speed : -1,\n                move : moveStar,\n                display : displayStar}\n        return star;\n}\n\nfunction displayStar(){\n    push();\n    translate(this.x, this.y);\n    fill(255);\n    noStroke();\n    scale(this.starScale);\n    beginShape();\n    vertex(50, 18);\n    vertex(61, 37);\n    vertex(83, 43);\n    vertex(69, 60);\n    vertex(71, 82);\n    vertex(50, 73);\n    vertex(29, 82);\n    vertex(31, 60);\n    vertex(17, 43);\n    vertex(39, 37);\n    endShape();\n    pop();\n}\n\n\/\/update star positions and display\nfunction updateAndDisplayStar(){\n    for(var i = 0; i &lt; stars.length; i++){\n        stars[i].move();\n        stars[i].display();\n    }\n}\n\nfunction addNewStar(){\n    var newStarProbability = 0.01;\n    if (random(0, 1) &lt; newStarProbability){\n        stars.push(makeStar(width));\n    }\n}\n\nfunction removeStarOutOfView (){\n    \/\/if star goes off left edge, remove from array\n    var starsToKeep = [];\n    for (var i = 0; i &lt; stars.length; i++){\n        if (stars[i].x + 50 &gt; 0) {\n            starsToKeep.push(stars[i]);\n        }\n    }\n    \/\/stars left\n    stars = starsToKeep;\n}\n\nfunction moveStar(){\n    this.x += this.speed;\n}\n\n\n\/\/trees object\nfunction makeTree(treeLocationX){\n    var tree = {xt : treeLocationX,\n                yt : 240,\n                treeScale : random(0.1, 0.5),\n                treeColor : color(0, random(75, 255), 0),\n                speedT : -3,\n                moveT : moveTree,\n                displayT : displayTree}\n    return tree;\n}\n\nfunction displayTree(){\n    push();\n    translate(this.xt + 60, this.yt); \/\/add 60 so transitions onto screen\n    fill(255);\n    noStroke();\n    scale(this.treeScale);\n    \n    \/\/tree!\n    noStroke();\n    fill(\"brown\");\n    rect(0, 0, 10, -50);\n    rect(1, 0, -10, -50);\n    fill(this.treeColor);\n    triangle(-60, -50, 60, -50, 0, -400);\n\n    pop();\n}\n\n\/\/update tree positions and display\nfunction updateAndDisplayTree(){\n    for(var i = 0; i &lt; trees.length; i++){\n        trees[i].moveT();\n        trees[i].displayT();\n    }\n}\n\nfunction addNewTree(){\n    var newTreeProbability = 0.04;\n    if (random(0, 1) &lt; newTreeProbability){\n        trees.push(makeTree(width));\n    }\n}\n\nfunction removeTreeOutOfView (){\n    \/\/if star goes off left edge, remove from array\n    var treesToKeep = [];\n    for (var i = 0; i &lt; trees.length; i++){\n        if (trees[i].xt + 100 &gt; 0) {\n            treesToKeep.push(trees[i]);\n        }\n    }\n    \/\/trees left\n    trees = treesToKeep;\n}\n\nfunction moveTree(){\n    this.xt += this.speedT;\n}\n\n\n\n\/\/shooting star object\nfunction makeShootingStar(locationX){\n    var shootingStar = {xs : locationX,\n                ys : random(75, 125),\n                shootingStarScale : random(0.1, 0.3),\n                speedS : -8,\n                moveS : moveShootingStar,\n                displayS : displayShootingStar}\n    return shootingStar;\n}\n\nfunction displayShootingStar(){\n    push();\n    translate(this.xs + 60, this.ys); \/\/add 60 so transitions onto screen\n    fill(\"yellow\");\n    noStroke();\n    scale(this.shootingStarScale);\n    \n    \/\/shooting star\n    beginShape();\n    vertex(50, 18);\n    vertex(61, 37);\n    vertex(83, 43);\n    vertex(69, 60);\n    vertex(71, 82);\n    vertex(50, 73);\n    vertex(29, 82);\n    vertex(31, 60);\n    vertex(17, 43);\n    vertex(39, 37);\n    endShape();\n\n    stroke(\"yellow\");\n    strokeWeight(2);\n    line(60, 37, 100, 37);\n    line(60, 47, 110, 47);\n    line(60, 57, 120, 57);\n\n    pop();\n}\n\n\/\/update tree positions and display\nfunction updateAndDisplayShootingStars(){\n    for(var i = 0; i &lt; shootingStars.length; i++){\n        shootingStars[i].moveS();\n        shootingStars[i].displayS();\n    }\n}\n\nfunction addNewShootingStars(){\n    var newShootingStarsProbability = 0.008;\n    if (random(0, 1) &lt; newShootingStarsProbability){\n        shootingStars.push(makeShootingStar(width));\n    }\n}\n\nfunction removeShootingStarOutOfView (){\n    \/\/if star goes off left edge, remove from array\n    var shootingStarsToKeep = [];\n    for (var i = 0; i &lt; shootingStars.length; i++){\n        if (shootingStars[i].xs + 100 &gt; 0) {\n            shootingStarsToKeep.push(shootingStars[i]);\n        }\n    }\n    \/\/trees left\n    shootingStars = shootingStarsToKeep;\n}\n\nfunction moveShootingStar(){\n    this.xs += this.speedS;\n}\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>project11 It was fun to figure out how to create a whole landscape without having to define absolutely everything and making it more interesting with randomness. I added a shooting star with a very small creation probability to create a little surprise within the landscape every once in a while. \/\/ Rachel Legg \/ rlegg &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/18\/project-11-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11 Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":737,"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\/f2022\/wp-json\/wp\/v2\/posts\/75815"}],"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\/737"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75815"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75815\/revisions"}],"predecessor-version":[{"id":75819,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75815\/revisions\/75819"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}