{"id":75878,"date":"2022-11-19T19:04:10","date_gmt":"2022-11-20T00:04:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75878"},"modified":"2022-11-19T19:04:10","modified_gmt":"2022-11-20T00:04:10","slug":"project-11-moving-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-moving-landscape\/","title":{"rendered":"Project 11 &#8211; Moving 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>The project is a relaxing view of sunset in an air balloon &ndash;&nbsp;if you take the time to watch the full animation, you can see the colors of the sky, sun, and clouds change as well through gradual RGB changes and color theory. I wanted a lowpoly style animation, and worked to get effect through the &ldquo;shifting clouds&rdquo;<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-62.js\" data-width=\"480\" 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=\"480\" height=\"200\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Aarnav Patel\n\/\/aarnavp@andrew.cmu.edu\n\/\/Section D\n\nvar r = 140;\nvar g = 200;\nvar b = 230;\nvar cloudR = 255;\nvar cloudG = 255;\nvar cloudB = 255;\nvar sunX;\nvar sunY = 0; \nvar sunR = 255;\nvar sunG = 247;\nvar sunB = 197;\nvar sunSize = 50;\n\n\nvar airBalloons = [];\nvar clouds = [];\nvar sceneCount = 0;\nvar bPics = [\"https:\/\/i.imgur.com\/El159Qi.png\", \"https:\/\/i.imgur.com\/Inz2K7i.png\", \"https:\/\/i.imgur.com\/IjQkLRr.png\"]\nvar balloons = []\n\nfunction preload() {\n\t\/\/load the images\n\tfor (var i = 0; i &lt; bPics.length; i++) {\n\t\tballoons.push(loadImage(bPics[i]));\n\t}\n}\n\nfunction setup() {\n    createCanvas(480, 200);\n    sunX = width;\n  \tframeRate(10);\n\n}\n\nfunction draw() {\n\n\tvar sky = color(r, g, b);\n\tfill(sky);\n\trect(0, 0, width, height);\n\n\n\t\/\/sky color change\n\tif (r &lt; 255) {\n\t\tr += 0.1\n\n\t} \n\tif (g &gt; 150) {\n\t\tg -= 0.1;\n\n\t} \n\tif (b &gt; 87) {\n\t\tb -= 0.1;\n\n\t}\n\n\t\/\/sky grandient\n\tfor (var i = 0; i &lt; 50; i+= 0.5) {\n\t\tstroke(r + i, g + i, b + i);\n\t\tvar amount = map(i * 2, 0, 100, height * 0.75, height);\n\t\tline(0, amount, width, amount);\n\t}\n\n\t\/\/SUN \n\tif (sunR &gt; 242) {\n\t\tsunR -= 0.1;\n\t}\n\tif (sunG &gt; 60) {\n\t\tsunG -= 0.1;\n\t}\n\tif (sunB &gt; 10) {\n\t\tsunB -= 0.1;\n\t}\n\n\tnoStroke();\n\tfill(sunR, sunG, sunB);\n\tellipse(sunX, sunY, sunSize, sunSize)\n\n\tsunX -= 0.25;\n\tsunY += 0.1;\n\tsunSize += 0.01;\n\n\n\t\/\/cloud color change\n\tif (cloudR &gt;= 244) {\n\t\tcloudR -= 0.05;\n\t}\n\tif (cloudG &gt;= 223) {\n\t\tcloudG -= 0.05;\n\t} \n\tif (cloudB &gt; 208) {\n\t\tcloudB -= 0.05;\n\t}\n\tgenerateClouds();\n\tgenerateAirBalloons();\n\n\n\tupdateClouds();\n\tupdateBalloons();\n\tsceneCount++;\n\n}\n\nfunction makeCloud(stormCloud) {\n\tvar cloud = {\n\t\tcX: random(0, 1.5 * width), cY: random(0, height), cDx:0, \n\t\tcW: random(100, 300), \n\t\tisStorm: stormCloud,\n\t\tshow: drawCloud, \n\t\tmove: moveCloud, \n\t}\n\treturn cloud;\n}\n\n\nfunction drawCloud() {\n\tnoStroke();\n\tvar xInterval = this.cW \/ 8; \/\/makes sure the x points never exceed the assigned cloudWidth\n\tvar xPoint = this.cX\n\tvar yPoint = this.cY\n\n\t\/\/foreground clouds are lightest\n\tif (this.cW &gt; 200) {\n\t\tthis.cDx = 5;\n\t\tfill(cloudR, cloudG, cloudB, 255);\n\t} else if (this.cW &gt; 100){\t\/\/midGround are slightly opaque\n\t\tfill(cloudR, cloudG, cloudB, 200)\n\t\tthis.cDx = 3;\n\t} else {\n\t\tfill(cloudR, cloudG, cloudB, 100);\t\/\/background are most opaque\n\t\tthis.cDx = 1;\n\t}\n\t\/\/checks if its storm cloud\n\tif (this.isStorm) {\n\t\tfill(200, 255);\n\t\t\n\t}\n\n\n\t\/\/generating points for the lowPoly Clouds\n\tvar y = [yPoint, yPoint - 15, yPoint - 20, yPoint - 15, yPoint, yPoint + 15, yPoint + 20, yPoint + 15];\n\t\/\/Y points are fixed\n\tvar x = [xPoint];\n\tfor (var i = 0; i &lt; 8; i++) {\n\t\tif (i &lt; 4) {\n\t\t\txPoint += xInterval\n\t\t} else {\n\t\t\txPoint -= xInterval\n\t\t}\n\t\tx.push(xPoint);\n\t\t\n\n\t}\n\n\n\t\t\/\/gives animating effect\n\t\tfor (var i = 0; i &lt; x.length; i++) {\n\t\t\tx[i] += random(-5, 5);\n\t\t\ty[i] += random(-5, 5);\n\t\t}\n\n\n\n\t\/\/draw cloud based on array made\n\tbeginShape();\n\tfor (var i = 0; i &lt; x.length; i++) {\n\t\tvertex(x[i], y[i]);\n\t}\n\tendShape(CLOSE);\n\n}\n\n\nfunction moveCloud() {\n\t\/\/updates cloudX by its speed\n\tthis.cX -= this.cDx;\n\n\t\/\/when cloudX is off left of screen, assigns it new position\n\tif (this.cX + this.cW &lt; 0) {\t\/\/checks right side of cloud\n\t\tthis.cX = random(width, 1.5 * width);\n\t\tthis.cY = random(0, height \/ 1.5);\n\t}\n}\n\n\nfunction updateClouds() {\n\t\/\/moves all the clouds from global cloud array\n\tfor (var i = 0; i &lt; clouds.length; i++) {\n\t\tclouds[i].move();\n\t\t\n\t}\n}\n\nfunction generateClouds() {\n\t\/\/creates clouds with a 1\/8 chance of a cloud being a storm cloud\n\tvar isStorm = false;\n\tfor (var i = 0; i &lt; 15; i++) {\n\t\t\n\t\tif (amount = Math.floor(random(1, 8)) == 2) {\n\t\t\tisStorm = true;\n\t\t}\n    \tvar c = makeCloud(isStorm);\n    \tclouds.push(c);\n    \tclouds[i].show();\n    \tisStorm = false;\n    }\n}\n\nfunction generateAirBalloons() {\n\t\/\/generates air balloons from image I have\n\tfor (var i = 0; i &lt; 10; i++) {\n\t\tvar b = makeBalloon()\n\t\tairBalloons.push(b);\n\t\tairBalloons[i].show();\n\t}\n}\n\nfunction makeBalloon() {\n\tvar b = {\n\t\tbX: random(0, width), bY: random(height * -5, height),\n\t\tbDx: Math.floor(random(-4, 4)), bDy: Math.floor(random(2, 4)),\n\t\tbImage:  Math.floor(random(0, 3)),\t\/\/ranodm number to select the type of balloon image\n\t\tratio: Math.floor(random(0, 2)),\n\t\tshow: drawBalloon, \n\t\tfloat: floatBalloon,\n\t}\n\n\treturn b;\n}\n\nfunction updateBalloons() {\n\tfor (var i = 0; i &lt; airBalloons.length; i++) {\n\t\tairBalloons[i].float();\n\t}\n}\n\nfunction floatBalloon() {\n\tthis.bX += this.bDx;\n\tthis.bY += this.bDy;\n\n\tif (this.bY &gt; height) {\n\t\tthis.bY = random(height * -5, height * -0.25);\n\t\tthis.bX = random(0, width);\n\t}\n\n}\n\nfunction drawBalloon() {\n\timage(balloons[this.bImage], this.bX, this.bY, balloons[this.bImage].width * this.ratio, balloons[this.bImage].height * this.ratio);\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The project is a relaxing view of sunset in an air balloon &ndash;&nbsp;if you take the time to watch the full animation, you can see the colors of the sky, sun, and clouds change as well through gradual RGB changes and color theory. I wanted a lowpoly style animation, and worked to get effect through &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-moving-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11 &#8211; Moving Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":750,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75878"}],"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\/750"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75878"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75878\/revisions"}],"predecessor-version":[{"id":75880,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75878\/revisions\/75880"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}