{"id":287,"date":"2022-01-30T20:04:49","date_gmt":"2022-01-31T01:04:49","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?p=287"},"modified":"2022-01-30T22:04:57","modified_gmt":"2022-01-31T03:04:57","slug":"procedurally-generated-maps-and-such","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/jdboucher\/procedurally-generated-maps-and-such\/","title":{"rendered":"Procedurally Generated Maps (and Such)"},"content":{"rendered":"\n<p>These images are created using procedurally generated 3D meshes in the Unity game engine. The procedural algorithm makes use of Perlin Noise, a form of &#8220;gradient&#8221; noise that ensures adjacent values are near one another unlike the completely random noise found in something like television static. This noise is then used to create a heightmap, adjusting the height of incremental coordinates on a rectangular plane.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_29_08-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"469\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_29_08-PM.png\" alt=\"\" data-id=\"289\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_29_08-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=289\" class=\"wp-image-289\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_29_08-PM.png 547w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_29_08-PM-350x300.png 350w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"468\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM.png\" alt=\"\" data-id=\"290\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=290\" class=\"wp-image-290\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM.png 545w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM-349x300.png 349w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_39-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"467\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_39-PM.png\" alt=\"\" data-id=\"291\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_39-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=291\" class=\"wp-image-291\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_39-PM.png 548w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_39-PM-352x300.png 352w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Perlin Noise is often used to create complex procedurally generated terrains, using multiple layers of noise to create more realistic results. This method can generate mountains, meadows, oceans, or even entire worlds with great detail. Adding that complexity gives more freedom to the user to adjust several values, but an untrained user may be overwhelmed by the options in front of them. Terms like &#8220;lacunarity&#8221;, &#8220;octaves&#8221;, and &#8220;persistence&#8221; don&#8217;t immediately make sense in the context of maps, landscapes, or other things this method can generate.<br><br>For this reason, I chose to allow the user to adjust only one thing: the coloration of the final product. The algorithm takes care of producing a randomized 3D mesh, but the user determines the coloring of that mesh. Using a user-defined gradient (using the simple gradient editor provided by Unity), the system colors tiles within the mesh based on their height. The lowest points correspond to the far left of the gradient, while the highest points correspond to the far right. <br><br>The coloration of this gradient plays a large role in what the mesh appears to be. Using shades of blue may imply an ocean. Yellow, red, and orange may suggest a pool of lava. A more varied grouping of colors may look like a map, depicting bodies of water, sandy shores, grassy meadows, forested areas, and even mountains.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_44-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"688\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_44-PM.png\" alt=\"\" data-id=\"292\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_44-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=292\" class=\"wp-image-292\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_44-PM.png 450w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_36_44-PM-196x300.png 196w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_29_56-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"688\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_29_56-PM.png\" alt=\"\" data-id=\"293\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_29_56-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=293\" class=\"wp-image-293\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_29_56-PM.png 450w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_29_56-PM-196x300.png 196w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_47-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"688\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_47-PM.png\" alt=\"\" data-id=\"294\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_47-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=294\" class=\"wp-image-294\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_47-PM.png 450w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_47-PM-196x300.png 196w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>The images below show the gradient and resulting mesh produced by someone who had no knowledge of the system, or even what it would produce.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_32-PM-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"472\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_32-PM-1.png\" alt=\"\" data-id=\"295\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_32-PM-1.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=295\" class=\"wp-image-295\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_32-PM-1.png 546w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_32-PM-1-347x300.png 347w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_49-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"688\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_49-PM.png\" alt=\"\" data-id=\"296\" data-full-url=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_49-PM.png\" data-link=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?attachment_id=296\" class=\"wp-image-296\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_49-PM.png 450w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal_-_DX11_-1_30_2022-7_34_49-PM-196x300.png 196w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Procedural generation with Perlin Noise is a powerful tool, and these examples only scratch the surface of what it is capable of. That being said, even constraining the user input to a selection of colors can produce a great variety of results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These images are created using procedurally generated 3D meshes in the Unity game engine. The procedural algorithm makes use of Perlin Noise, a form of &#8220;gradient&#8221; noise that ensures adjacent values are near one another unlike the completely random noise found in something like television static. This noise is then used to create a heightmap,&#8230; <\/p>\n<div class=\"link-more\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/jdboucher\/procedurally-generated-maps-and-such\/\">Read More<\/a><\/div>\n","protected":false},"author":258,"featured_media":290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[15],"tags":[],"class_list":["post-287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rules-for-art"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/01\/ProcGen-Meshes-SampleScene-PC-Mac-Linux-Standalone-Unity-2019.4.8f1-Personal-_DX11_-1_30_2022-7_27_37-PM.png","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":1,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/287\/revisions\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media\/290"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}