{"id":68949,"date":"2021-11-11T14:09:20","date_gmt":"2021-11-11T19:09:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68949"},"modified":"2021-11-11T14:09:20","modified_gmt":"2021-11-11T19:09:20","slug":"project-11-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/11\/project-11-landscape\/","title":{"rendered":"Project 11: Landscape"},"content":{"rendered":"\n

sketch<\/a>\n\n\n\n<\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 11\n\nvar planets = [];\nvar stars = [];\nvar dots = [];\n\nfunction setup()\n{\n createCanvas(400, 400);\n for (var i = 0; i < 2; i++) \/\/creates initial planets\n {\n var pX = random(width);\n var pC = [random(50, 255), random(50, 255), random(50, 255)];\n var pSize = random (20, 120);\n var faceNum = random (1);\n var o = random (0,1);\n planets[i] = makePlanet(pX, pC, pSize, faceNum, o);\n }\n\n for (var i = 0; i < 5; i++) \/\/creates initial dot clusters\n {\n var aX = random(50, width*2-50);\n var aCol = [random(0, 255), random(0, 255), random(0, 255), 75];\n var aSize = random (10, 150);\n var locationX = [];\n var locationY = [];\n for (var j = 0; j < 200; j++)\n {\n var bX = randomGaussian(0, 30);\n locationX.push(bX);\n var bY = randomGaussian(0, 30);\n locationY.push(bY);\n }\n dots[i] = makeDots (aX, aCol, aSize, locationX, locationY);\n }\n frameRate(10);\n}\n\nfunction draw()\n{\n background (0);\n\n updateAndDisplayDots();\n removeDots();\n addDots();\n\n updateAndDisplayStars();\n removeStars();\n addStars();\n\n updateAndDisplayPlanets();\n removePlanets();\n addPlanets();\n astronaut();\n\n if (keyIsPressed) \/\/massive sun appears when key is pressed\n {\n sun();\n }\n}\n\nfunction updateAndDisplayPlanets () \/\/moves and draws planets\n{\n for (var i = 0; i < planets.length; i++)\n {\n planets[i].move();\n planets[i].display();\n }\n}\n\nfunction updateAndDisplayStars () \/\/moves and draws stars\n{\n for (var i = 0; i < stars.length; i++)\n {\n stars[i].move();\n stars[i].display();\n }\n}\n\nfunction updateAndDisplayDots () \/\/moves and draws dots\n{\n for (var i = 0; i < dots.length; i++)\n {\n dots[i].move();\n dots[i].display();\n }\n}\n\nfunction removePlanets() \/\/removes planets above the canvas from array\n{\n var planetsKeep = [];\n for (var i = 0; i < planets.length; i++)\n {\n if (planets[i].y + planets[i].size\/2 > 0)\n {\n planetsKeep.push(planets[i]);\n }\n }\n planets = planetsKeep; \/\/remember surviving planets\n}\n\nfunction removeStars() \/\/removes stars above the canvas from array\n{\n var starsKeep = [];\n for (var i = 0; i < stars.length; i++)\n {\n starsKeep.push(stars[i]);\n }\n stars = starsKeep;\n}\n\nfunction removeDots() \/\/removes dots above the canvas from array\n{\n var dotsKeep = [];\n for (var i = 0; i < dots.length; i++)\n {\n dotsKeep.push(dots[i]);\n }\n dots = dotsKeep;\n}\n\nfunction addPlanets() \/\/add new planets from bottom\n{\n var chance = .05;\n if (random(1) < chance)\n {\n planets.push(makePlanet(random(width), [random(50, 255),\n random (50, 255), random (50, 255)], random (20, 120), random (1)));\n }\n}\n\nfunction addStars() \/\/adds new stars from bottom\n{\n var chance = .05;\n if (random(1) < chance)\n {\n stars.push(makeStars(random (width)));\n }\n}\n\nfunction addDots() \/\/adds new dots from bottom\n{\n var chance = .5;\n if (random(1) < chance)\n {\n var aX = random(0, width*2-50);\n var aCol = [random(0, 255), random(0, 255), random(0, 255), 75];\n var aSize = random (10, 150);\n var locationX = [];\n var locationY = [];\n for (var j = 0; j < 200; j++)\n {\n var bX = randomGaussian(0, 30);\n locationX.push(bX);\n var bY = randomGaussian(0, 30);\n locationY.push(bY);\n }\n var a = makeDots (aX, aCol, aSize, locationX, locationY);\n dots.push(a);\n }\n}\n\nfunction makePlanet (planX, c, size, f, o) \/\/makes planet object\n{\n var planet = \n { x: planX,\n y: height,\n size: size,\n color: c,\n speed: -3,\n faceNum: f,\n move: planetMove,\n display: planetDisplay,\n orbit: o\n }\n return planet;\n}\n\nfunction makeStars(sX) \/\/makes star object\n{\n var star = \n {x: sX,\n y: height,\n speed: -3,\n move: starMove,\n display: starDisplay\n }\n return star;\n}\n\nfunction makeDots (aX, col, size, locationX, locationY) \/\/makes dots object\n{\n var dot =\n {x: aX,\n y: height*2,\n locX: locationX,\n locY: locationY,\n size: size,\n color: col,\n speed: -3,\n move: dotMove,\n display: dotDisplay\n }\n return dot;\n}\n\nfunction planetMove () \/\/moves planets upwards\n{\n this.y += this.speed;\n}\n\nfunction starMove () \/\/moves stars upwards\n{\n this.y += this.speed;\n}\n\nfunction dotMove () \/\/moves dots upwards\n{\n this.y += this.speed;\n}\n\nfunction planetDisplay () \/\/draws planet\n{\n fill (this.color);\n noStroke();\n circle (this.x, this.y, this.size); \/\/colored circle\n stroke(0);\n strokeWeight(this.size\/20);\n if (this.faceNum < .33) \/\/dead face, surprised when mouse is pressed\n {\n line (this.x - this.size\/6, this.y - this.size\/12, this.x - this.size\/6, this.y - this.size\/6);\n line (this.x + this.size\/6, this.y - this.size\/12, this.x + this.size\/6, this.y - this.size\/6);\n push();\n strokeWeight(this.size\/14);\n stroke(200);\n noFill();\n if (this.orbit > .5) \/\/2 possible orbital rings around planet\n {\n arc (this.x, this.y + this.size\/10, this.size*1.4, this.size\/3, TWO_PI*.973, PI*1.07); \/\/wide orbital ring\n }\n else\n {\n arc (this.x, this.y + this.size\/10, this.size*1.1, this.size\/6, TWO_PI*.995, PI*1.01); \/\/narrow orbital ring\n }\n\n pop();\n if (mouseIsPressed) \/\/surprised mouth when mouse is pressed\n {\n noFill();\n ellipse(this.x, this.y, this.size\/8, this.size\/10);\n }\n else\n {\n line (this.x - this.size\/12, this.y, this.x + this.size\/12, this.y);\n }\n }\n else if (this.faceNum >= .33 & this.faceNum < .66) \/\/eyes on left, smile, frown if mouse is pressed\n {\n fill (0);\n circle (this.x - this.size\/3, this.y - this.size\/12, this.size\/8);\n circle (this.x - this.size\/6, this.y - this.size\/12, this.size\/8);\n strokeWeight (this.size\/20);\n noFill();\n if (mouseIsPressed) \/\/frowns when mouse is pressed\n {\n arc (this.x - this.size\/4, this.y + this.size\/12, this.size\/20, this.size\/30, PI, 0 , OPEN);\n }\n else\n {\n arc (this.x - this.size\/4, this.y + this.size\/12, this.size\/20, this.size\/30, 0, PI, OPEN);\n \n }\n fill (255);\n noStroke();\n circle (this.x - this.size\/3 - this.size\/20, this.y - this.size\/12, this.size\/18);\n circle (this.x - this.size\/6 - this.size\/20, this.y - this.size\/12, this.size\/18);\n }\n else \/\/eyes on right, smile, frowns if mouse is pressed\n {\n fill (0);\n circle (this.x + this.size\/3, this.y - this.size\/12, this.size\/8);\n circle (this.x + this.size\/6, this.y - this.size\/12, this.size\/8);\n noFill();\n if (mouseIsPressed) \/\/frowns when mouse is pressed\n {\n arc (this.x + this.size\/4, this.y + this.size\/12, this.size\/20, this.size\/30, PI, 0, OPEN);\n }\n else\n {\n arc (this.x + this.size\/4, this.y + this.size\/12, this.size\/20, this.size\/30, 0, PI, OPEN);\n }\n fill (255);\n noStroke();\n circle (this.x + this.size\/3 - this.size\/20, this.y - this.size\/12, this.size\/18);\n circle (this.x + this.size\/6 - this.size\/20, this.y - this.size\/12, this.size\/18);\n }\n}\n\nfunction starDisplay() \/\/draws stars\n{\n fill (255, 255, 200);\n noStroke();\n beginShape();\n vertex (this.x + 10, this.y);\n vertex (this.x + 3, this.y - 1);\n vertex (this.x, this.y - 8);\n vertex (this.x - 3, this.y - 1);\n vertex (this.x - 10, this.y);\n vertex (this.x - 4, this.y + 3);\n vertex (this.x - 7, this.y + 10); \/\/bottom left triangle\n vertex (this.x, this.y + 5); \/\/middle inner vertex\n vertex (this.x + 7, this.y + 10);\/\/bottom right triangle\n vertex (this.x + 4, this.y + 3);\n vertex (this.x + 10, this.y);\n endShape();\n}\n\nfunction dotDisplay() \/\/draws colored dots\n\/\/dotDisplay is called EVERY frame, so the randomGaussians change every frame\n\/\/get program to push of randomGaussian locations into an array of locaitons when a set of dots is created\n\/\/then call those same locations for every frame for that set of dots\n{\n push();\n scale(.5);\n stroke(this.color); \n for (var i = 0; i < this.locX.length; i++)\n {\n push();\n translate (this.x, this.y);\n point(this.locX[i], this.locY[i]);\n pop();\n }\n pop();\n}\n\n\n\n\nfunction astronaut () \/\/draws astronaut hanging from moon balloon\n{ \n \/\/moon balloon\n push();\n translate (0, -30);\n fill (255, 200, 50);\n noStroke();\n circle (width\/2, height\/2, 100);\n triangle (width\/2, height\/2 + 30, width\/2 - width\/43, height\/2 + 58, width\/2 + width\/43, height\/2 + 58);\n fill (150, 75, 0, 100);\n stroke(0);\n strokeWeight(3);\n arc (width\/2 - width\/14, height\/2 + height\/20, 10, 10, PI\/6, PI*1.8, OPEN);\n arc (width\/2, height\/2, 20, 20, 0, PI*1.5, OPEN);\n arc (width\/2 + width\/20, height\/2 - height\/17, 25, 25, PI\/2, TWO_PI, OPEN);\n arc (width\/2 - width\/15, height\/2 - height\/18, 15, 15, PI*2.7, PI*1.7, OPEN);\n arc (width\/2 - width\/30, height\/2 + height\/12, 12, 12, TWO_PI, PI*7\/8, OPEN);\n arc (width\/2 + width\/16, height\/2 + height\/18, 22, 22, PI*1.7, PI, OPEN);\n stroke(255);\n line (width\/2, height\/2 + 58, width\/2, height\/2 + 82);\n\n push();\n translate (width*.59, height*.68);\n fill(255);\n push(); \/\/balloon arm\n rotate (radians(-40));\n ellipse (-30, 5, 15, 50);\n rotate(radians(48));\n ellipse (24, 30, 15, 25); \/\/non balloon arm\n pop();\n ellipse(-5, 35, 45, 55); \/\/body\n ellipse (-14, 60, 15, 35); \/\/left leg\n ellipse (6, 60, 15, 35); \/\/right leg\n push(); \/\/helmet\n rotate (radians(25));\n fill (255);\n ellipse (-25, 0, 10, 20);\n ellipse (25, 0, 10, 20);\n ellipse (0, 0, 50, 45);\n fill (0, 0, 100); \/\/navy part\n ellipse (0, 0, 50, 35);\n noStroke();\n fill (255, 255, 255);\n ellipse (14, -2, 8, 12); \/\/large white bubble\n rotate (radians(-10));\n ellipse (-17, 3, 3, 5); \/\/smaller white bubble\n strokeWeight(8); \/\/belt\n stroke(220);\n line (-13, 45, 24, 39);\n strokeWeight(2);\n stroke(0);\n fill(220);\n rotate(radians(-10));\n rect (-11, 37, 20, 10);\n pop();\n pop();\n pop();\n} \n\nfunction sun () \/\/massive sun appears when key is pressed\n{\n noStroke();\n fill (255, 255, 0);\n circle (width\/2, height\/2, 300);\n strokeWeight(10);\n stroke(255, 255, 0);\n push();\n translate (width\/2, height\/2);\n for (var i = 0; i < 36; i ++)\n {\n line (0, -170, 0, -230);\n rotate (radians (30));\n }\n pop();\n}\n\n\n\n\n\n\n\n\n<\/code><\/pre><\/p><div class=\"wp-block-image\"><figure class=\"alignleft size-full\"><img loading=\"lazy\" width=\"804\" height=\"782\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.04.29-PM.png\" alt=\"\" class=\"wp-image-68950\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.04.29-PM.png 804w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.04.29-PM-300x292.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.04.29-PM-768x747.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/div>\n\n\n\n<p>For this project, I decided to depict an astronaut floating through space. The elements I have passing by are various types of planets, individual stars, and faraway colorful clusters of stars. This project prompt let me play around with lots of fun colors and shapes, while also helping me learn how objects work. I started with the planets object, and ended with the colorful clusters of dots. I also added features where the facial expressions of the planets change when you press the mouse and a sun appears if you press a key.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-full\"><img loading=\"lazy\" width=\"806\" height=\"794\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.06.33-PM.png\" alt=\"\" class=\"wp-image-68951\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.06.33-PM.png 806w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.06.33-PM-300x296.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-11-at-2.06.33-PM-768x757.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I decided to depict an astronaut floating through space. The elements I have passing by are various types of planets, individual stars, and faraway colorful clusters of stars. This project prompt let me play around with lots of fun colors and shapes, while also helping me learn how objects work. I started … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/11\/project-11-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 11: Landscape”<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/68949"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68949"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68949\/revisions"}],"predecessor-version":[{"id":68953,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68949\/revisions\/68953"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}