{"id":76157,"date":"2022-11-21T13:25:29","date_gmt":"2022-11-21T18:25:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=76157"},"modified":"2022-11-21T13:26:10","modified_gmt":"2022-11-21T18:26:10","slug":"srauch-project-11-scrolling-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/21\/srauch-project-11-scrolling-landscape\/","title":{"rendered":"Srauch &#8211; Project 11 &#8211; Scrolling 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><p>My code shows a scrolling New Mexico landscape, with sagebrush in the foreground, sage-covered land stretching to the mountains in the middleground, and a mountain range in the background.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-84.js\" data-width=\"400\" data-height=\"200\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"200\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Sam Rauch, section B, srauch@andrew.cmu.edu, project\n\/\/this code creates a randomly generated scrolling new mexico landscape with sagebrush\n\/\/in the foreground, distant bushes in the middleground, and mountains in the background.\n\/\/A late afternoon moon hangs low in the sky.\n\n\/\/arrays for objects\nvar sageArray = [];\nvar mountainArray = [];\nvar backbushes = [];\n\nfunction setup() {\n    createCanvas(400, 200);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n    frameRate(30);\n\n    \/\/fill sage array with random sagebrush\n    var initsageY = random(30, 40);\n    for (var i = 0; i&lt;20; i++){\n        sageArray.push(newSage(initsageY, random(160, 190)));\n        initsageY += random(20, 40);\n    }\n\n    \/\/fill mountain array with random starter mountains\n    var initmountX = random(0,40);\n    for (var i = 0; i &lt; 20; i ++){\n        var mont = makeMountain(initmountX, random(70, 90), random(40, 60));\n        mountainArray.push(mont);\n        initmountX += random(30, 40);\n    }\n\n    \/\/fill backbushes array with random starter bushes\n    var initBushX = random(0,10);\n    for (var i = 0; i&lt;100; i++){\n        backbushes.push(newBush(initBushX, random(100, 150)));\n        initBushX += random(0, 10);\n    }\n}\n\nfunction draw() {\n    background(129, 173, 223);\n    noStroke();\n\n    \/\/draw moon\n    var moonfill = color(235, 243, 247, 200);\n    fill(moonfill);\n    ellipse(300, 50, 20, 20);\n\n    \/\/draw middleground\n    fill(111, 158, 148);\n    rect(0, 100, 400, 100);\n\n    \/\/draw mountains, push in new mountains on right as they go off screen to left\n    for (var i = 0; i &lt; mountainArray.length; i++){\n        mountainArray[i].peakX -= 0.25;\n        mountainArray[i].draw();\n\n        if (mountainArray[i].peakX &lt;= -70){\n            mountainArray.shift();\n            mountainArray.push(makeMountain(random(440, 460), random(60, 90), random(40, 60)));\n        }\n    }\n\n    \/\/draw backbushes, push in new ones as go off screen\n    for (var i = 0; i &lt; backbushes.length; i++){\n        backbushes[i].x -= 0.5;\n        backbushes[i].draw();\n\n        if (backbushes[i].x &lt;= -10){\n            backbushes.shift();\n            backbushes.push(newBush(random(402, 420), random(100, 150)));\n        }\n    }\n\n    \/\/draw foreground\n    fill(156, 127, 70);\n    rect(0, 150, 400, 50);\n\n    \/\/draw sagebrush in front\n\n    for (var i = 0; i &lt; sageArray.length; i++){\n    \/\/draw each sagebrush shadow; in seperate loop so it will always draw before\n    \/\/(thus underneath) the sagebrush\n        fill(117, 98, 56);\n        ellipse(sageArray[i].x, sageArray[i].y, 20, 8);\n    }\n\n    for (var i = 0; i &lt; sageArray.length; i++){\n        sageArray[i].x -= 2; \/\/move each sagebrush along to left\n        sageArray[i].draw(); \/\/draw each sagebush\n    }\n\n    if (sageArray[0].x &lt; -10){ \/\/if sagebrush is off the canvas, shift and push in a new one\n        sageArray.shift();\n        sageArray.push(newSage(random(410, 430), random(160, 190)));\n    }\n\n}\n\n\/\/objects for sagebrush, mountain, and backbush\n\nfunction newSage(xpos,ypos){\n    var sage = {x: xpos, y:ypos, draw:drawSagebrush};\n    return sage;\n}\n\nfunction drawSagebrush(){\n    stroke(66, 46, 23);\n    var bushstart = this.x-10;\n    for (var i = 0; i&lt;8; i++){\n        line(this.x,this.y,bushstart,this.y-15);\n        bushstart += 3;\n    }\n    stroke(66, 110, 90);\n    fill(93, 135, 111);\n    ellipse(this.x-8, this.y-15, 7, 7);\n    ellipse(this.x+8, this.y-15, 7, 7);\n    ellipse(this.x-5, this.y-17, 8, 8);\n    ellipse(this.x+5, this.y-17, 8, 8);\n    ellipse(this.x,this.y-18, 10, 10);\n    noStroke();\n}\n\nfunction makeMountain(x, y, wide){\n    var mountain = {peakX: x, peakY: y, base:wide, draw: drawMountain};\n    return mountain;\n}\n\nfunction drawMountain(){\n    fill(96, 129, 181);\n    beginShape();\n    vertex(this.peakX, this.peakY);\n    vertex(this.peakX-this.base, 100);\n    vertex(this.peakX+this.base, 100);\n    endShape();\n}\n\nfunction newBush(xpos,ypos){\n    var bush = {x: xpos, y:ypos, draw: drawBush};\n    return bush;\n}\n\nfunction drawBush(){\n    strokeWeight(5);\n    stroke(106, 135, 124);\n    point(this.x, this.y);\n    strokeWeight(1);\n    noStroke();\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My code shows a scrolling New Mexico landscape, with sagebrush in the foreground, sage-covered land stretching to the mountains in the middleground, and a mountain range in the background. sketch \/\/Sam Rauch, section B, srauch@andrew.cmu.edu, project \/\/this code creates a randomly generated scrolling new mexico landscape with sagebrush \/\/in the foreground, distant bushes in the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/21\/srauch-project-11-scrolling-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Srauch &#8211; Project 11 &#8211; Scrolling Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":754,"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\/76157"}],"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\/754"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=76157"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76157\/revisions"}],"predecessor-version":[{"id":76159,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76157\/revisions\/76159"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=76157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=76157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=76157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}