{"id":75786,"date":"2022-11-17T19:57:18","date_gmt":"2022-11-18T00:57:18","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75786"},"modified":"2022-11-17T19:57:18","modified_gmt":"2022-11-18T00:57:18","slug":"project-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/17\/project-11\/","title":{"rendered":"Project 11"},"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>Scrolling environment in space<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-56.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\">\/\/PLANET VARIABLES:\nvar numPlanets = 4;\nvar planet = {x: [], y: [], s: [], r: [], g: [], b: [], dx: []};\nvar d = [];\n\n\/\/STAR VARIABLES:\nvar numStars = 100;\nvar star = {x: [], y: [], s: [], dx: []};\n\n\/\/IMG VARIABLES:\nvar porthole;\nvar astroLinks = [\"https:\/\/i.imgur.com\/FrLKzou.png\",\n\t\t\t\t  \"https:\/\/i.imgur.com\/vdhX4kE.png\",\n\t\t\t\t  \"https:\/\/i.imgur.com\/01Kk3J7.png\"];\nvar astroPics = [];\nvar astro = {x: [], y: [], s: [], dx: [], e: []};\n\nfunction preload(){\n\tfor(k = 0; k &lt; 3; k++){\n\t\tastroPics[k] = loadImage(astroLinks[k]);\n\t}\n\tporthole = loadImage(\"https:\/\/i.imgur.com\/YSSOdgW.png\") \/\/made this porthole graphic myself\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(0);\n    planetInitialize();\n    starInitialize();\n    astroInitialize();\n}\n\nfunction draw() {\n\tbackground(0);\n\tstarUpdate();\n\tplanetUpdate();\n\tastroUpdate();\n\timage(porthole, 0, 0, width, height);\n}\n\nfunction drawPlanetA(x, y, s, i){ \/\/option one for planet type (moon-y)\n\tstrokeWeight(0);\n\tfill(planet.r[i], planet.g[i], planet.b[i]); \/\/randomized color\n\tellipse(x, y, s, s);\n\tfill(planet.r[i] + 20, planet.g[i] + 20, planet.b[i] + 20); \/\/randomized color, but a little bit lighter\n\tellipse(x - s\/10, y + s\/3, s\/4);\n\tellipse(x + s\/5, y - s\/10, s\/3);\n\tellipse(x - s\/4, y - s\/5, s\/7);\n}\n\nfunction drawPlanetB(x, y, s, i){ \/\/option two for planet type (saturn-y)\n\tfill(planet.r[i], planet.g[i], planet.b[i]);\n\tellipse(x, y, s, s);\n\tstrokeWeight(3);\n\tstroke(255-planet.r[i], 255-planet.g[i], 255-planet.b[i]);\n\tline(x - s*(2\/3), y, x + s*(2\/3), y);\n\tstrokeWeight(0);\n}\n\nfunction starUpdate(){\n\tfor(var j = 0; j &lt; numStars; j++){\n\t\tstrokeWeight(0)\n\t\tfill(250, 248, 235); \/\/creamy white\n\t\tellipse(star.x[j], star.y[j], star.s[j], star.s[j]);\n\n\t\tif(star.x[j] &gt;= width + star.s[j]){ \/\/if star has fully moved off screen, I reset the values\n\t\t\tstar.s[j] = random(1, 10);\n\t\t\tstar.x[j] = random(-20, 0-star.s[j]); \/\/HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll\n\t\t\tstar.y[j] = random(0, height);\n    \t    star.dx[j] = star.s[j] \/ 200;\n\t\t}else{\n\t\t\tstar.x[j] += star.dx[j]; \/\/if star is not offscreen, it moves to the right\n\t\t}\n\t}\n}\n\nfunction planetUpdate(){\n\tfor(var i = 0; i &lt; numPlanets; i++){ \n\t\tif(d[i] &lt;= 1){ \/\/selects planet type: if d is less than\/equal to one, planet A is drawn, if d is greater than one, planet B is drawn\n\t\t\tdrawPlanetA(planet.x[i], planet.y[i], planet.s[i], i);\n\t\t}else if(d[i] &gt; 1){\n\t\t\tdrawPlanetB(planet.x[i], planet.y[i], planet.s[i], i);\n\t\t}\n\n\t\tif(planet.x[i] &gt;= width + planet.s[i] + (planet.s[i] * (2\/3))){ \/\/if planet has fully moved off screen, I reset the values\n\t\t\tplanet.s[i] = random(10, 150);\n\t\t\tplanet.x[i] = random(-200, 0-planet.s[i]); \/\/HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll\n\t\t\tplanet.y[i] = random(0, height);\n    \t    planet.r[i] = random(20, 235);\n    \t    planet.g[i] = random(20, 235);\n    \t    planet.b[i] = random(20, 235);\n    \t    planet.dx[i] = planet.s[i] \/ 200;\n\t\t}else{\n\t\t\tplanet.x[i] += planet.dx[i]; \/\/if planet is not offscreen, it moves to the right\n\t\t}\n\t}\n}\n\nfunction astroUpdate(){\n\tfor(var k = 0; k &lt; 3; k++){\n\t\timage(astroPics[k], astro.x[k], astro.y[k], astro.s[k], astro.s[k]);\n\t\tif(astro.x[k] &gt;= astro.e[k]){\n\t\t\tastro.x[k] = random(-2000, -150);\n\t\t\tastro.y[k] = random(0, height);\n\t\t\tastro.s[k] = random(30, 400);\n\t\t\tastro.dx[k] = astro.s[k] \/ 200;\n\t\t\tastro.e[k] = random(height+150, 2000);\n\t\t}else{\n\t\t\tastro.x[k] += astro.dx[k];\n\t\t}\n\t}\n}\n\nfunction planetInitialize(){\n\tfor(var i = 0; i &lt; numPlanets; i++){\n    \tplanet.x[i] = random(0, width); \/\/x position\n    \tplanet.y[i] = random(0, height); \/\/y position\n    \tplanet.s[i] = random(10, 150); \/\/size\n    \tplanet.r[i] = random(20, 235); \/\/r, g, and b are randomized. I seperated these instead of creating a color variable so I could use R, G, and B to edit the details\n    \tplanet.g[i] = random(20, 235);\n    \tplanet.b[i] = random(20, 235);\n    \tplanet.dx[i] = planet.s[i] \/ 200; \/\/dx is related to the size of the planet, if it's bigger it will appear to move quicker\n    \td[i] = (random(0, 2)); \/\/variable d selects whether or not planet type A or B is selected\n    }\n}\n\nfunction starInitialize(){\n\tfor(var j = 0; j &lt; numStars; j++){\n    \tstar.x[j] = random(0, width);\n    \tstar.y[j] = random(0, height);\n    \tstar.s[j] = random(1, 10);\n    \tstar.dx[j] = star.s[j] \/ 200; \/\/dx is related to the size of the star, if it's bigger it will appear to move quicker\n    }\n}\n\nfunction astroInitialize(){\n\tfor(var k = 0; k &lt; 3; k++){\n    \tastro.x[k] = random(-2000, width)\n    \tastro.y[k] = random(0, height);\n    \tastro.s[k] = random(30, 150);\n    \tastro.dx[k] = astro.s[k] \/ 200; \n    \tastro.e[k] = random(height+150, 2000); \/\/astro end: beginning\/end determines where image starts\/ends it's journey before reset. I made the value larger so there would be greater diversity in when astronaunts appeared\n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Scrolling environment in space sketch \/\/PLANET VARIABLES: var numPlanets = 4; var planet = {x: [], y: [], s: [], r: [], g: [], b: [], dx: []}; var d = []; \/\/STAR VARIABLES: var numStars = 100; var star = {x: [], y: [], s: [], dx: []}; \/\/IMG VARIABLES: var porthole; var astroLinks &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/17\/project-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11&#8221;<\/span><\/a><\/p>\n","protected":false},"author":766,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75786"}],"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\/766"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75786"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75786\/revisions"}],"predecessor-version":[{"id":75787,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75786\/revisions\/75787"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}