{"id":4544,"date":"2020-09-02T14:23:20","date_gmt":"2020-09-02T18:23:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=4544"},"modified":"2020-09-02T14:23:20","modified_gmt":"2020-09-02T18:23:20","slug":"yanwen-map","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/","title":{"rendered":"yanwen-map"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-4551\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/map-2.gif\" alt=\"\" width=\"600\" height=\"564\" \/><\/p>\n<h3>Description<\/h3>\n<p>This is a <a href=\"https:\/\/yvonne-dong.github.io\/yvonne-dong.github.io\/60-212\/Map\/index.html\">terrain generator<\/a> which generates random terrains with different levels of heights. It also generates two types of trees of various sizes with random positions on the terrain.<\/p>\n<div id='gallery-1' class='gallery galleryid-4544 gallery-columns-2 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/screen-shot-2020-09-02-at-2-04-11-pm\/'><img width=\"565\" height=\"480\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM-565x480.png\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM-565x480.png 565w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM-1024x870.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM-768x652.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM-1200x1019.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.04.11-PM.png 1276w\" sizes=\"(max-width: 565px) 85vw, 565px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/screen-shot-2020-09-02-at-2-03-57-pm\/'><img width=\"566\" height=\"480\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM-566x480.png\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM-566x480.png 566w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM-1024x868.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM-768x651.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM-1200x1018.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.57-PM.png 1276w\" sizes=\"(max-width: 566px) 85vw, 566px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/screen-shot-2020-09-02-at-2-03-45-pm\/'><img width=\"567\" height=\"480\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM-567x480.png\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM-567x480.png 567w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM-1024x867.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM-768x650.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM-1200x1016.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.45-PM.png 1278w\" sizes=\"(max-width: 567px) 85vw, 567px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/screen-shot-2020-09-02-at-2-03-35-pm\/'><img width=\"567\" height=\"480\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM-567x480.png\" class=\"attachment-medium size-medium\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM-567x480.png 567w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM-1024x867.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM-768x650.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM-1200x1016.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-02-at-2.03.35-PM.png 1278w\" sizes=\"(max-width: 567px) 85vw, 567px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<h3>Process<\/h3>\n<p>I was inspired by this <a href=\"https:\/\/threejs.org\/examples\/?q=dynam#webgl_geometry_dynamic\">dynamic webgl example<\/a> and decided to create a static version. I first created the terrain using PlaneBufferGeometry and displace the vertices of the plane randomly when generating different results.<\/p>\n<p>Then I used the positions of the vertices of the plane to place the trees onto the terrain. I decided to use a set number of trees but tweak the sizes and dimensions of the results. Each type of trees has its own set of positions and is regenerated when space bar is pressed.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Description This is a terrain generator which generates random terrains with different levels of heights. It also generates two types of trees of various sizes with random positions on the terrain. Process I was inspired by this dynamic webgl example and decided to create a static version. I first created the terrain using PlaneBufferGeometry and &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/yanwendandrew-cmu-edu\/09\/02\/yanwen-map\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;yanwen-map&#8221;<\/span><\/a><\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[38,41],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4544"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4544"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4544\/revisions"}],"predecessor-version":[{"id":4571,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/4544\/revisions\/4571"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=4544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=4544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}