{"id":75829,"date":"2022-11-19T13:45:19","date_gmt":"2022-11-19T18:45:19","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75829"},"modified":"2022-11-19T13:45:19","modified_gmt":"2022-11-19T18:45:19","slug":"a-day-in-the-future-city","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/a-day-in-the-future-city\/","title":{"rendered":"A day in the future city"},"content":{"rendered":"\n

I took inspiration from a scene in cyberpunk edgerunner and made a city landscape based on that. I am surprised by the flexibility of object, the properties can be manipulated in different ways to create completely different stuff. For example, the pillars, foreground, and background buildings are created with one single object.<\/p>\n\n\n\n

\"\" — Inspired scene<\/figcaption><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jason Jiang\n\/\/Section E\n\n\/\/setting up arrays of objects\nvar bldg = [];\nvar bldgBack = []\nvar pillar = []\nvar vhc = []\n\n\/\/number of objects in each array\nvar bldgN = 6;\nvar bldgBackN = 11;\nvar vhcN = 2;\n\n\/\/color palatte for buildings\nvar palatte = ['#7670b2', '#5ab6b0', '#5ab6b0', '#3f5c60', '#1c4167', '#3f5c60', '#7e9868'];\n\n\/\/image links of assets\nvar facadeLink = [\n \"https:\/\/i.imgur.com\/oPA4x4y.png\",\n \"https:\/\/i.imgur.com\/xeOW3sz.png\", \n \"https:\/\/i.imgur.com\/gbr6ySL.png\",\n \"https:\/\/i.imgur.com\/WqUehK3.png\"];\nvar facadeImg = [];\nvar vehicleLink = [\n \"https:\/\/i.imgur.com\/gFtwhqV.png\",\n \"https:\/\/i.imgur.com\/KX1dLCi.png\",\n \"https:\/\/i.imgur.com\/Fo43Kep.png\"];\nvar vehicleImg = [];\n\n\/\/load assets\nfunction preload(){\n train = loadImage(\"https:\/\/i.imgur.com\/BFxe31d.png\");\n for (var i = 0; i < facadeLink.length; i++){\n facadeImg[i] = loadImage(facadeLink[i]);\n }\n for (var i = 0; i < vehicleLink.length; i++){\n vehicleImg[i] = loadImage(vehicleLink[i]);\n }\n\n}\n\nfunction setup() {\n\n createCanvas(400, 200);\n imageMode(CENTER);\n colorMode(HSB);\n \n \n \/\/create front building arrays\n for(var i = 0; i < bldgN; i++){\n \/\/randomly pick color from array\n var palatteIndex = floor(random(palatte.length));\n \/\/randomly pick an image from array\n var facadeIndex = floor(random(facadeImg.length));\n var b = building(80*i, random(-height\/3, height\/3), random(80, 100), color(palatte[palatteIndex]), facadeImg[facadeIndex]);\n bldg.push(b);\n }\n\n \/\/create back building arrays\n for(var i = 0; i < bldgBackN; i++){\n var b = building(40*i, random(150), 40, color(20, 10, 30, 0.5), -1);\n bldgBack.push(b);\n }\n\n \/\/create pillars\n for (var i = 0; i < 2; i++) {\n var p = building(200*i, 70, 20, color(80), -1);\n pillar.push(p);\n }\n\n \/\/creating vehicles\n for (var i = 0; i < 2; i++) {\n \/\/randomly pick an image from array\n var vehicleIndex = floor(random(vehicleImg.length));\n \/\/randomize vehicle moving direction\n if (random(1) <= 0.5){\n \/\/vehicles from left to right\n var v = vehicle(random(-width\/2, 0), random(50, 150), random(5, 10), vehicleImg[vehicleIndex]);\n }\n else{\n \/\/vehicles from right to left\n var v = vehicle(random(width, 1.5*width), random(50, 150), random(-5, -10), vehicleImg[vehicleIndex]);\n }\n vhc.push(v);\n }\n\n }\n\n\nfunction draw() {\n background(200, 20, 100);\n \/\/update information in each frame\n updateObjs();\n updateArray();\n \/\/add train image\n image(train, 200, 90); \n }\n\n\nfunction updateObjs(){\n \n \/\/updating building background\n for(var i = 0; i < bldgBack.length; i++){\n bldgBack[i].move(2);\n bldgBack[i].display();\n }\n\n \/\/updating building foreground\n for(var i = 0; i < bldg.length; i++){\n bldg[i].move(5);\n bldg[i].display();\n }\n \/\/updating pillars\n for(var i = 0; i < pillar.length; i++){\n pillar[i].move(5);\n pillar[i].display();\n }\n\n \/\/updating vehicles\n for (var i = 0; i < vhc.length; i++) {\n vhc[i].move();\n vhc[i].display();\n }\n \n}\n\n\n\/\/displaying buildings\nfunction buildingDisplay(){\n \n \/\/draw rectangles\n noStroke();\n fill(this.color);\n rect(this.x, this.y, this.w, height-this.y);\n var centerX = this.x + 0.5*this.w ;\n var centerY = this.y + 0.5*(height - this.y);\n \n \/\/see if the detail property of object is an image, since not pillars and background buildings dont need facade details on them\n if (this.detail != -1){\n \/\/add details on building facade\n push();\n translate(centerX, centerY);\n image(this.detail, 0, 0, 0.8*this.w, 0.95*(height-this.y));\n pop();\n }\n \n}\n\n\/\/update building position\nfunction buildingMove(s){\n this.x -= s;\n}\n\n\/\/displaying vehicles\nfunction vehicleDisplay(){\n push();\n \/\/flip the image if going from right to left\n if(this.s < 0){\n scale(-1, 1);\n image(this.detail, -this.x, this.y);\n }\n else{\n image(this.detail, this.x, this.y);\n } \n pop();\n}\n\n\/\/update vehicles position and age\nfunction vehicleMove(){\n this.x += this.s;\n this.age += 1;\n}\n\n\n\n\nfunction updateArray(){\n \/\/replacing foreground buildings outside canvas\n for(var i = 0; i < bldg.length; i++){\n if (bldg[i].x <= -bldg[i].w){\n var palatteIndex = floor(random(palatte.length));\n var facadeIndex = floor(random(facadeImg.length));\n var b = building(400, random(-height\/3, height\/3), random(80, 100), color(palatte[palatteIndex]), facadeImg[facadeIndex]);\n bldg[i] = b;\n \n }\n }\n\n \/\/replacing background buildings outside canvas\n for(var i = 0; i < bldgBack.length; i++){\n if (bldgBack[i].x <= -bldgBack[i].w){\n var b = building(400, random(150), 40, color(20, 10, 30, 0.5), -1);\n bldgBack[i] = b;\n }\n }\n\n \/\/replacing pillars outside canvas\n for(var i = 0; i < pillar.length; i++){\n if (pillar[i].x <= -pillar[i].w){\n var p = building(400, 70, 20, color(80), -1);\n pillar[i] = p;\n }\n }\n\n \/\/replacing vehicles after a certain time\n for(var i = 0; i < vhc.length; i++){\n \n if (vhc[i].age > 200){\n var vehicleIndex = floor(random(vehicleImg.length));\n if (random(1) <= 0.5){\n var v = vehicle(random(-width\/2, 0), random(50, 150), random(5, 10), vehicleImg[vehicleIndex]);\n }\n else{\n var v = vehicle(random(width, 1.5*width), random(50, 150), random(-5, -10), vehicleImg[vehicleIndex]);\n }\n vhc[i] = v;\n }\n }\n\n}\n\n\n\/\/create building objects\nfunction building(buildingX, buildingY, buildingWidth, buildingColor, buildingDetail) {\n var b = { x: buildingX,\n y: buildingY,\n w: buildingWidth,\n color: buildingColor,\n detail: buildingDetail,\n display: buildingDisplay,\n move: buildingMove\n }\n return b;\n}\n\n\/\/create vehicle objects\nfunction vehicle(vehicleX, vehicleY, vehicleSpeed, vehicleDetail) {\n var v = { x: vehicleX,\n y: vehicleY,\n s: vehicleSpeed,\n age: 0,\n detail: vehicleDetail,\n display: vehicleDisplay,\n move: vehicleMove\n }\n return v;\n\n}\n\n\n\n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I took inspiration from a scene in cyberpunk edgerunner and made a city landscape based on that. I am surprised by the flexibility of object, the properties can be manipulated in different ways to create completely different stuff. For example, the pillars, foreground, and background buildings are created with one single object. sketch \/\/Jason Jiang … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/a-day-in-the-future-city\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “A day in the future city”<\/span><\/a><\/p>\n","protected":false},"author":723,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75829"}],"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\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75829"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75829\/revisions"}],"predecessor-version":[{"id":75833,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75829\/revisions\/75833"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}