{"id":69346,"date":"2021-12-04T11:39:29","date_gmt":"2021-12-04T16:39:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69346"},"modified":"2021-12-04T11:46:49","modified_gmt":"2021-12-04T16:46:49","slug":"final-project-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-7\/","title":{"rendered":"Final Project"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/jlococo\n\/\/Jacky Lococo\n\nvar xp = 0;\nvar yp = 40;\nvar dxp = 5;\nvar bird = [ ];\nvar xcir = 350;\nvar ycir = 200;\nvar angle = 0;\nvar smoke = [ ];\nvar cloud = [ ];\nvar tree = [ ];\nfunction setup() {\n createCanvas(700, 400);\n\n for (var i = 0; i <5; i++){ \/\/for loop for the bird array\n bird[i] = new Object();\n bird[i].x = width;\n bird[i].y = random(100, 200);\n bird[i].dx = random(-2, -4.5);\n bird[i].c = color(21, 76, 114);\n }\n\n for (var i = 0; i < 11; i++){ \/\/for loop for the smoke array\n smoke[i] = new Object();\n smoke[i].x = random(40, 140);\n smoke[i].y = random(0, 100);\n smoke[i].dx = 4;\n smoke[i].s = random(20, 35);\n smoke[i].c = 150;\n }\n\n for (var i = 0; i < 9; i++){ \/\/for loop for the clouds\n cloud[i] = new Object();\n cloud[i].x = random(width\/2 + 60, width);\n cloud[i].y = random(0, height\/2 - 30);\n cloud[i].dx = 4;\n cloud[i].s = random(70, 120);\n cloud[i].c = 230;\n }\n\n for (var i = 0; i < 20; i++){ \/\/for loop for the trees\n tree[i] = new Object();\n tree[i].x = random(width\/2 + 60, width);\n tree[i].y = random(height\/2 + 135, height);\n tree[i].s = random(70, 120);\n }\n\n frameRate(15);\n}\n\n\n\nfunction draw() {\n background(230);\n \n \/\/------------------ CITY ------------------\n \/\/background of city\n noStroke();\n fill(230);\n beginShape();\n vertex(0,0);\n vertex(0, height);\n vertex(width\/2-20, height);\n vertex(width\/2+20, 0);\n endShape();\n\n \/\/smokestacks\n fill(200);\n rect(50, 100, 25, 300);\n rect(100, 100, 25, 300);\n\n \/\/drawing the smoke\n for (var i = 0; i < 11; i++){\n draw_smoke(smoke[i]);\n }\n\n \/\/2nd row of buildings\n fill(170);\n rect(50, 220, 100, 300);\n rect(140, 200, 100, 300);\n rect()\n\n \/\/buildings front row\n noStroke()\n fill(90);\n rect(0, 200, 100, 420);\n rect(100, 240, 75, 420);\n rect(175, 180, 45, 300);\n rect(220, 200, 50, 300);\n rect(260, 300, 80, 200);\n\n \/\/windows\n if(mouseX < width\/2){ \/\/makes the lights turn on and off\n fill(241, 216, 3, 150);\n } else {\n fill(230); \/\/fills them with the background when mouse is on right\n }\n rect(220, 220, 10, 20);\n rect(247, 270, 10, 20);\n rect(220, 340, 10, 20);\n rect(150, 300, 10, 20);\n rect(110, 275, 10, 20);\n rect(45, 370, 10, 20);\n rect(33, 230, 10, 20);\n\n\n \/\/moving plane in the background\n airPlane(xp, yp, dxp);\n xp +=dxp;\n\n\n\/\/--------------- FOREST -------------------\n \/\/background of forest\n noStroke();\n fill(185, 220, 236);\n beginShape();\n vertex(width\/2-20, height);\n vertex(width\/2+20, 0);\n vertex(width, 0);\n vertex(width, height);\n endShape();\n\n \/\/clouds\n for (var i = 0; i < 9; i++){\n draw_cloud(cloud[i]);\n }\n\n \/\/MOUNTAINS\n fill(137, 184, 206);\n \/\/first larger shape\n beginShape();\n vertex(width\/2+30, height);\n vertex(550, 150);\n vertex(600, 150);\n vertex(700, 300);\n vertex(700, height);\n endShape();\n \/\/second shape shorter mountain\n beginShape();\n vertex(width\/2-20, height);\n vertex(430, 240);\n vertex(480, 240);\n vertex(550, height);\n endShape();\n \/\/circles rounding mountains\n ellipse(575, 161, 54, 54);\n ellipse(455, 250, 53, 52);\n\n \/\/HILL behind - darker shade\n beginShape()\n fill(88, 106, 36);\n vertex(width\/2-20, height);\n vertex(width\/2-10, 280);\n vertex(600, 400)\n endShape()\n\n \/\/HILL - quarter of circle\n fill(127, 148, 68);\n ellipse(670, height+70, 730, 350);\n\n \/\/trees\n for (var i = 0; i < 20; i++){ \/\/for loop for the trees\n draw_tree(tree[i]);\n }\n\n \/\/birds\n for (var i = 0; i < 5; i++) {\n draw_bird(bird[i]);\n if (bird[i].x < width\/2){ \/\/changing bird location after they reach midpoint\n bird[i].x = width +100;\n }\n bird[i].x += bird[i].dx; \/\/making birds move\n\n if (mouseX < width\/2){ \/\/making the birds stop when mouse is on city half\n bird[i].dx = 0\n }else{\n bird[i].dx = random(-1, -4.5);\n }\n if(mouseIsPressed & dist(mouseX, mouseY, xcir, ycir) < 30){ \/\/making birds stop with circle pressed\n bird[i].dx = 0;\n }\n }\n\n\/\/------------------\n\n \/\/FOREST OPACITY FILLS\n if(mouseX < width\/2){\n noStroke();\n fill(0, 100);\n beginShape();\n vertex(width\/2-20, height);\n vertex(width\/2+20, 0);\n vertex(width, 0);\n vertex(width, height);\n endShape();\n }\n\n \/\/masking shape\n fill(230);\n beginShape();\n vertex(width\/2+10, 80);\n vertex(width\/2-5, 230);\n vertex(300, 230);\n vertex(300, 80);\n endShape();\n\n \/\/OPACITY FILLS CITY AND VELOCITY STOPS\n if(mouseX > width\/2){\n noStroke();\n fill(0, 100);\n beginShape();\n vertex(0,0);\n vertex(0, height);\n vertex(width\/2-20, height);\n vertex(width\/2+20, 0);\n endShape();\n dxp = 0;\n } else {\n dxp = 5;\n }\n if(xp > width\/2 +30){\n xp = 0 - 50;\n }\n\n\n \/\/Lines and circle\n fill(100, 150);\n stroke(255);\n strokeWeight(4);\n line(width\/2+20, 0, width\/2-20, 400);\n ellipse(xcir, ycir, 60, 60);\n noStroke();\n fill(255);\n textSize(10);\n text('P R E S S', xcir-23, ycir+4);\n\n\n \/\/CURSOR - icons following the mouse\n if(mouseX > width\/2){ \/\/mouse is flower on forest section\n noStroke();\n flower();\n } else { \/\/mouse is three little grey smoke dots\n noStroke();\n fill(50, 100);\n ellipse(mouseX + 9, mouseY +5, 11, 11);\n ellipse(mouseX - 9, mouseY+5, 11, 11);\n ellipse(mouseX, mouseY - 8, 11, 11);\n }\n\n \/\/CIRCLE MOUSE PRESSED - if mouse is pressed on cirlce fact shows up\n if(mouseIsPressed & dist(mouseX, mouseY, xcir, ycir) < 30){\n fill(0, 150);\n rect(0, 0, 700, 400);\n dxp = 0;\n fill(255)\n textSize(15)\n text('Urban areas and urbanization is a major contributor of climate change,', 140, 100)\n text('making up baout 75% of CO2 emissions from global energy use.', 150, 130)\n }\n}\n\n\n\n\/\/------------ FUNCTIONS -----------\nfunction flower(){ \/\/creates cursor flower\n fill(233, 199, 10, 200);\n ellipse(mouseX, mouseY, 15, 15);\n fill(255, 154, 154, 200);\n ellipse(mouseX+10, mouseY, 8, 8);\n ellipse(mouseX-10, mouseY, 8, 8);\n ellipse(mouseX, mouseY-10, 8, 8);\n ellipse(mouseX, mouseY+10, 8, 8);\n ellipse(mouseX+7, mouseY+7, 8, 8);\n ellipse(mouseX-7, mouseY-7, 8, 8);\n ellipse(mouseX-7, mouseY+7, 8, 8);\n ellipse(mouseX+7, mouseY-7, 8, 8);\n}\n\nfunction airPlane(xp, yp, dxp){ \/\/creates airplane moving in the background\n fill(200);\n rect(xp, yp, 40, 10);\n ellipse(xp+40, yp+5, 15,10);\n ellipse(xp, yp, 5, 20);\n fill(175);\n ellipse(xp+ 15, yp+7, 23, 5);\n strokeWeight(2);\n stroke(220, 180);\n line(xp, yp+10, xp-150, yp+10);\n}\n\nfunction draw_tree(t){\n fill(0);\n rect(t.x, t.y, 5, 10);\n fill(63, 111, 85);\n triangle(t.x +2, t.y-10, t.x - 5, t.y+5, t.x+10, t.y+5);\n}\n\nfunction draw_bird(b){\n fill(b.c);\n ellipse(b.x, b.y, 10, 10);\n fill(214, 216, 3);\n ellipse(b.x -6, b.y, 4, 4);\n fill(13, 39, 56);\n ellipse(b.x + 4, b.y, 7, 5);\n}\n\nfunction draw_smoke(s){\n fill(s.c, 160);\n circle(s.x, s.y, s.s);\n}\n\nfunction draw_cloud(c){\n fill(c.c, 150);\n circle(c.x, c.y, c.s);\n}\n\n\n \n\n\n\n\n\n\n\n``<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/jlococo \/\/Jacky Lococo var xp = 0; var yp = 40; var dxp = 5; var bird = [ ]; var xcir = 350; var ycir = 200; var angle = 0; var smoke = [ ]; var cloud = [ ]; var tree = [ ]; function setup() { createCanvas(700, 400); for (var … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":655,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69346"}],"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\/655"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69346"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69346\/revisions"}],"predecessor-version":[{"id":69355,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69346\/revisions\/69355"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}