{"id":69102,"date":"2021-11-14T23:27:01","date_gmt":"2021-11-15T04:27:01","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69102"},"modified":"2021-11-14T23:53:15","modified_gmt":"2021-11-15T04:53:15","slug":"project-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-landscape\/","title":{"rendered":"Project 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><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-58.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-58.js\" class=\"wp-block-file__button\" download=\"\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">\/\/Yanina Shavialenka\n\/\/Section B\n\n\/*\nThe following project was written with an intention to represent world\npeace, love, diversity, and care for the planet. I used world map to\nrepresent the world, people in different national outfits to represent \npeople from around the world, love symbold to represent love, rainbow \npeace sign to represent peace in the world and inclusion, recycling \nsymbol to represent the fact that we need to recycle and save our planet. \n*\/\n\n\/\/Initial arrays for images and objects\nvar people = [];\nvar world = [];\nvar symbol = [];\nvar loadPeople = [];\nvar loadSymbol = [];\nvar worldmap;\n\/\/Value of change of movement\nvar dx1 = 1.5;\n\n\/\/Preloads images\nfunction preload() {\n    var file = [];\n    file[0] = \"https:\/\/i.imgur.com\/PAWmbXw.png\";\n    file[1] = \"https:\/\/i.imgur.com\/t0fgBq2.png\";\n    file[2] = \"https:\/\/i.imgur.com\/SkGPugf.png\";\n    file[3] = \"https:\/\/i.imgur.com\/dbMZm7H.png\";\n    file[4] = \"https:\/\/i.imgur.com\/L1ODD20.png\";\n    file[5] = \"https:\/\/i.imgur.com\/b5hpqxP.png\";\n\n    for(var i = 0 ; i &lt; file.length; i++) {\n        people[i] = loadImage(file[i]);\n    }\n\n    var file1 = [];\n    file1[0] = \"https:\/\/i.imgur.com\/IRxGbDw.png\";\n    file1[1] = \"https:\/\/i.imgur.com\/Xkq7Q0x.png\";\n    file1[2] = \"https:\/\/i.imgur.com\/w9crIqx.png\";\n\n    for(var i = 0 ; i &lt; file1.length; i++) {\n        symbol[i] = loadImage(file1[i]);\n    }\n\n    worldmap = loadImage(\"https:\/\/i.imgur.com\/LhjqpdM.png\");\n    world.push(makeBackground(0,0,dx1));\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n}\n\n\/\/Object functions that create object\n\/\/Below function has an object for background\nfunction makeBackground(cx,cy,cdx) {\n    var c = { x: cx, y: cy, dx: cdx,\n            stepFunction: stepBackground,\n            drawFunction: drawBackground\n    }\n    return c;\n}\n\n\/\/Below function has an object for characters\nfunction makeCharacter(cx, cdx, num) {\n    var r = random(320);\n    var c = { x: cx, y: r, dx: cdx,\n            imageNum: num,\n            stepFun: stepCharacter,\n            drawFun: drawCharacter\n    }\n    return c;\n}\n\n\/\/Below function has an object for symbols\nfunction makeSymbol(cx, cdx, num) {\n    var r = random(320);\n    var c = { x: cx, y: r, dx: cdx,\n    \t    imageNum: num,\n            step: stepSymbol,\n            draw: drawSymbol\n    }\n    return c;\n}\n\n\/\/Object functions that move objects\nfunction stepBackground() {\n    this.x -= this.dx; \n}\nfunction stepCharacter() {     \n    this.x -= this.dx; \n}\nfunction stepSymbol() {     \n    this.x -= this.dx; \n}\n\n\/\/Object functions that draw objects\nfunction drawBackground() {\n    image(worldmap,this.x,this.y);\n}\nfunction drawCharacter() {\n    image(people[this.imageNum],this.x,this.y);\n}\nfunction drawSymbol() {\n    image(symbol[this.imageNum],this.x,this.y);\n}\n\n\nfunction draw() {\n    background(220);\n    \n    \/\/random values\n    var num = random(people.length - 2);\n    num = int(num);\n    var num1 = random(symbol.length);\n    num1 = int(num1);\n    var peopleCount = random(100,200);\n    peopleCount = int(peopleCount);\n    var symbolCount = random(300);\n    symbolCount = int(symbolCount);\n\n    \/\/moves and draws map\n    for(var i = 0 ; i &lt; world.length ; i++) {\n        world[i].stepFunction();\n        world[i].drawFunction();\n    }\n\n    \/\/when the latest world x postion is 0, a new map is drawn at x coordinate of the world map width\n    if(world[world.length-1].x &lt;= 0) {\n        world.push(makeBackground(802,0,dx1));\n    }\n\n    \/\/new position for people and symbols\n    if(frameCount % peopleCount == 0) {\n        loadPeople.push(makeCharacter(480,dx1,num));\n    }\n    \n    if(frameCount % symbolCount == 0) {\n        loadSymbol.push(makeSymbol(480,dx1,num1));\n    }\n    \n    \/\/moves and draws people and symbols\n    for(var i = 0 ; i &lt; loadPeople.length ; i++) {\n        loadPeople[i].stepFun();\n        loadPeople[i].drawFun();\n    }\n\n    for(var i = 0 ; i &lt; loadSymbol.length ; i++){ \n        loadSymbol[i].step();\n        loadSymbol[i].draw();\n    }\n}<\/code><\/pre><\/p>\n\n\n\n<p>For this week&rsquo;s project, I decided to portray the idea of utopia where all people around the world live in peace, love, and inclusion. I used the background of a world map to represent the world; people in different national outfits to represent the people around the world; love symbol to represent love; rainbow peace sign to represent peace and inclusion; recycling symbol to represent the idea that we need to recycle to save the earth and have that ideal utopia. <\/p>\n\n\n\n<p>In my project, I encountered a problem with a background since I used an image instead of drawing it out myself: when the image would end, it would not reappear so I came with an idea to use a double image &ldquo;glued&rdquo; together which eventually did the trick. Overall I really enjoyed this assignment and found it really fun to work on!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"384\" height=\"512\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/unnamed-23.jpg\" alt=\"\" class=\"wp-image-69107\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/unnamed-23.jpg 384w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/unnamed-23-225x300.jpg 225w\" sizes=\"(max-width: 384px) 85vw, 384px\"><figcaption>Original sketch of the design and idea<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Yanina Shavialenka \/\/Section B \/* The following project was written with an intention to represent world peace, love, diversity, and care for the planet. I used world map to represent the world, people in different national outfits to represent people from around the world, love symbold to represent love, rainbow peace sign to represent &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69102"}],"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\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69102"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69102\/revisions"}],"predecessor-version":[{"id":69108,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69102\/revisions\/69108"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}