{"id":581,"date":"2023-02-06T15:12:51","date_gmt":"2023-02-06T15:12:51","guid":{"rendered":"https:\/\/www.fernandojerez.com\/site\/?p=581"},"modified":"2024-11-02T12:55:04","modified_gmt":"2024-11-02T12:55:04","slug":"metropixeland","status":"publish","type":"post","link":"https:\/\/www.fernandojerez.com\/site\/metropixeland\/","title":{"rendered":"Metropixeland"},"content":{"rendered":"\n<div class=\"inherit-container-width wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image aligncenter size-full is-style-rounded\"><img decoding=\"async\" width=\"60\" height=\"60\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/squig.png\" alt=\"\" class=\"wp-image-1005 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 60px; --smush-placeholder-aspect-ratio: 60\/60;\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-subtle-background-background-color has-background has-medium-font-size\">Minted out! <a rel=\"noreferrer noopener\" href=\"https:\/\/www.artblocks.io\/project\/331\" data-type=\"URL\" data-id=\"https:\/\/www.artblocks.io\/project\/331\" target=\"_blank\">See on Artblocks<\/a><\/p>\n\n\n\n<div class=\"wp-block-uagb-buttons uagb-buttons__outer-wrap uagb-btn__default-btn uagb-btn-tablet__default-btn uagb-btn-mobile__default-btn uagb-block-f6ed0deb\"><div class=\"uagb-buttons__wrap uagb-buttons-layout-wrap\">\n<div class=\"wp-block-uagb-buttons-child uagb-buttons__outer-wrap uagb-block-6631ed93 wp-block-button is-style-outline\"><div class=\"uagb-button__wrapper\"><a class=\"uagb-buttons-repeater wp-block-button__link\" href=\"https:\/\/sansa.xyz\/collections\/metropixeland-by-fernando-jerez\" onclick=\"return true;\" rel=\"follow noopener\" target=\"_blank\"><div class=\"uagb-button__link\">Buy on Sansa<\/div><span class=\"uagb-button__icon uagb-button__icon-position-after\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path d=\"M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z\"><\/path><\/svg><\/span><\/a><\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading alignwide has-text-align-center has-accent-color has-text-color\">\u00abA nice place to live if you&#8217;re made of pixels\u00bb<\/h2>\n\n\n\n<div class=\"alignfull\"><div id=\"metaslider-id-417\" style=\"width: 100%;\" class=\"ml-slider-3-106-0 metaslider metaslider-flex metaslider-417 ml-slider has-dots-nav has-carousel-mode ms-theme-default\" role=\"region\" aria-label=\"Metropixeland Dev Screenshots\" data-height=\"600\" data-width=\"600\">\n    <div id=\"metaslider_container_417\">\n        <div id=\"metaslider_417\">\n            <ul class='slides'>\n                <li style=\"display: none; width: 100%;\" class=\"slide-434 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:52\" data-filename=\"mmt_0-1-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_0-1-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-434 msDefaultImage lazyload\" title=\"mmt_0-1\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-435 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:53\" data-filename=\"mmt_1-1-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_1-1-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-435 msDefaultImage lazyload\" title=\"mmt_1-1\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-436 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:55\" data-filename=\"mmt_2-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_2-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-436 msDefaultImage lazyload\" title=\"mmt_2\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-437 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:56\" data-filename=\"mmt_3-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_3-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-437 msDefaultImage lazyload\" title=\"mmt_3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-428 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:44\" data-filename=\"mmt_4-2-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_4-2-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-428 msDefaultImage lazyload\" title=\"mmt_4-2\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-429 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:45\" data-filename=\"mmt_5-1-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_5-1-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-429 msDefaultImage lazyload\" title=\"mmt_5-1\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-430 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:46\" data-filename=\"mmt_6-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_6-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-430 msDefaultImage lazyload\" title=\"mmt_6\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-431 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:48\" data-filename=\"mmt_7-1-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-431 msDefaultImage lazyload\" title=\"mmt_7-1\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-432 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:49\" data-filename=\"mmt_8-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_8-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-432 msDefaultImage lazyload\" title=\"mmt_8\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-433 ms-image \" aria-roledescription=\"slide\" data-date=\"2022-07-02 11:56:51\" data-filename=\"mmt_9-600x600.jpg\" data-slide-type=\"image\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_9-600x600.jpg\" height=\"600\" width=\"600\" alt=\"\" class=\"slider-417 slide-433 msDefaultImage lazyload\" title=\"mmt_9\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/600;\" \/><div class=\"caption-wrap\"><div class=\"caption\">Metropixeland<\/div><\/div><\/li>\n            <\/ul>\n        <\/div>\n        \n    <\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>As digital beings, we have been playing, working, making friends in a virtual world for many years. <strong>Metropixeland<\/strong> is a vibrant metropolis where our pixels can live in peace.<\/p>\n\n\n\n<p><strong>And it&#8217;s animated<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"580\" style=\"aspect-ratio: 726 \/ 580;\" width=\"726\" controls src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/blockyvideo.mp4\"><\/video><figcaption class=\"wp-element-caption\">Not a loop or gif. Animation is calculated in realtime. <\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-center has-ast-global-color-6-color has-ast-global-color-1-background-color has-text-color has-background\">Pictures in this document are screenshots taken on different development stages. Final look may be slightly different.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The idea<\/h2>\n\n\n\n<p>The goal of this project was to make a representation of our digital experiences. Something that reminds the old times playing games or meeting friends online. A city or neighborhood could be a nice metaphor for this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Aesthetics<\/h3>\n\n\n\n<p>Once the idea was roughly defined, I started thinking on aesthetics. I wanted to made some sort of <strong>&#8216;visual toy&#8217; <\/strong>that was <strong>funny, vibrant, classic, <\/strong>and connected with our digital memories. A <strong>retro-ish <\/strong>aesthetics would fit well with those feelings. The <strong>isometric perspective is a must<\/strong> for this kind of stuff.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"589\" height=\"515\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-2.png\" alt=\"\" class=\"wp-image-991 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-2.png 589w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-2-300x262.png 300w\" data-sizes=\"(max-width: 589px) 100vw, 589px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 589px; --smush-placeholder-aspect-ratio: 589\/515;\" \/><figcaption class=\"wp-element-caption\">Sim City 2000, Transport Tycoon, Habbo Hotel<\/figcaption><\/figure>\n\n\n\n<p>Also, I was looking for a modern look. No need to use big pixels. Found lot of inspiration on modern voxel art.<\/p>\n\n\n\n<p>Here\u2019s some pictures (not my designs) that have been a source of inspiration to help define the final aesthetics of this project.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"611\" height=\"565\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-1-1.png\" alt=\"\" class=\"wp-image-990 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-1-1.png 611w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-1-1-300x277.png 300w\" data-sizes=\"(max-width: 611px) 100vw, 611px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 611px; --smush-placeholder-aspect-ratio: 611\/565;\" \/><figcaption class=\"wp-element-caption\">Voxel-art cities (from random Google images search)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Procedural architecture<\/h3>\n\n\n\n<p>For a long time I have been exploring different techniques for creating procedural buildings.<\/p>\n\n\n\n<p>In the past I made some projects for 3D printing like <a rel=\"noreferrer noopener\" href=\"https:\/\/cults3d.com\/en\/3d-model\/architecture\/procedural-buildings\" target=\"_blank\">&#8216;procedural buildings<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/cults3d.com\/en\/3d-model\/architecture\/skyscrapers\" target=\"_blank\">skyscrapers<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/cults3d.com\/en\/3d-model\/art\/space-cities-generator\" target=\"_blank\">space cities<\/a>&#8216; <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"582\" height=\"447\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-3.png\" alt=\"\" class=\"wp-image-992 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-3.png 582w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-3-300x230.png 300w\" data-sizes=\"(max-width: 582px) 100vw, 582px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 582px; --smush-placeholder-aspect-ratio: 582\/447;\" \/><figcaption class=\"wp-element-caption\">3D printed figures of some of my procedural models.<\/figcaption><\/figure>\n\n\n\n<p>That was cool but for this project I wanted to create a small world filled with a <strong>many procedural elements <\/strong>dancing together.<\/p>\n\n\n\n<p>Made with<strong> Javascrip + three.js<\/strong>. All elements are build by code. No external images, fonts or other resources.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Devlog<\/h2>\n\n\n\n<p>Evolution from early stages to current state.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Squares and Buildings<\/h3>\n\n\n\n<p>Everything started with a <strong>recursive subdivision<\/strong> for defining the squares and a <strong>custom algorithm to create random facade<\/strong> patterns.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"906\" height=\"498\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-5.png\" alt=\"\" class=\"wp-image-993 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-5.png 906w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-5-300x165.png 300w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-5-768x422.png 768w\" data-sizes=\"(max-width: 906px) 100vw, 906px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 906px; --smush-placeholder-aspect-ratio: 906\/498;\" \/><figcaption class=\"wp-element-caption\">The core of the scene<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Subways<\/h3>\n\n\n\n<p>Added underground levels with trains.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"767\" height=\"670\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-6.png\" alt=\"\" class=\"wp-image-994 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-6.png 767w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-6-300x262.png 300w\" data-sizes=\"(max-width: 767px) 100vw, 767px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 767px; --smush-placeholder-aspect-ratio: 767\/670;\" \/><figcaption class=\"wp-element-caption\">Also some small details like zebra passes<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Sewers<\/h3>\n\n\n\n<p>Randomly placed groups of sewers on underground levels.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"764\" height=\"451\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-7.png\" alt=\"\" class=\"wp-image-995 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-7.png 764w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-7-300x177.png 300w\" data-sizes=\"(max-width: 764px) 100vw, 764px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 764px; --smush-placeholder-aspect-ratio: 764\/451;\" \/><figcaption class=\"wp-element-caption\">Water falling into the unknown<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Decoration<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Underground rocks and neon panels<\/h4>\n\n\n\n<p>Some extra decoration elements.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"762\" height=\"536\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-8.png\" alt=\"\" class=\"wp-image-996 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-8.png 762w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-8-300x211.png 300w\" data-sizes=\"(max-width: 762px) 100vw, 762px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 762px; --smush-placeholder-aspect-ratio: 762\/536;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Trees<\/h4>\n\n\n\n<p>Yes, some trees.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"763\" height=\"625\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-9.png\" alt=\"\" class=\"wp-image-997 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-9.png 763w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-9-300x246.png 300w\" data-sizes=\"(max-width: 763px) 100vw, 763px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 763px; --smush-placeholder-aspect-ratio: 763\/625;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Trains and Monorail<\/h4>\n\n\n\n<p>Chooo chooo<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"767\" height=\"405\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-10.png\" alt=\"\" class=\"wp-image-998 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-10.png 767w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-10-300x158.png 300w\" data-sizes=\"(max-width: 767px) 100vw, 767px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 767px; --smush-placeholder-aspect-ratio: 767\/405;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Parks<\/h4>\n\n\n\n<p>Fill some squares with some sort of &#8216;mazey&#8217; parks. Using a <strong>recursive bactracker<\/strong> for mazes and\/or a variation of<strong> &#8220;10 print&#8221;<\/strong> algorithm on some squares.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"769\" height=\"481\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-11.png\" alt=\"\" class=\"wp-image-999 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-11.png 769w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-11-300x188.png 300w\" data-sizes=\"(max-width: 769px) 100vw, 769px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 769px; --smush-placeholder-aspect-ratio: 769\/481;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Traffic<\/h4>\n\n\n\n<p>A bunch of <strong>cars and trucks<\/strong> (and sometimes a <strong>red bus<\/strong>) wandering randomly across the city.<\/p>\n\n\n\n<p><strong>Traffic level<\/strong> (number of cars) is random for each generation.<\/p>\n\n\n\n<p>Traffic can be <strong>right-handed<\/strong> or <strong>left-handed<\/strong>.<\/p>\n\n\n\n<p>A <strong>Random-walk <\/strong>algorithm has been implemented here. When a vehicle reach a cross, it chooses between following straight or turn a random direction (or turn back if it\u2019s a dead end).<\/p>\n\n\n\n<p>At this point I considered <strong>breaking the \u2018deterministic\u2019 rule<\/strong> and used the <strong>infamous Math.random()<\/strong> for choosing the direction of cars.<\/p>\n\n\n\n<p>This adds a <strong>very subtle non deterministic element<\/strong> that is hard to notice but even for the same seed cars move slightly differently.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"766\" height=\"442\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-12.png\" alt=\"\" class=\"wp-image-1000 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-12.png 766w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-12-300x173.png 300w\" data-sizes=\"(max-width: 766px) 100vw, 766px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 766px; --smush-placeholder-aspect-ratio: 766\/442;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">More stuff<\/h2>\n\n\n\n<p>You may have notice some of this elements in pictures above (or not) : Helicopter, Diamond symbol, Light columns, Mint number sign.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"769\" height=\"665\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-13.png\" alt=\"\" class=\"wp-image-1001 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-13.png 769w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2023\/09\/imagen-13-300x259.png 300w\" data-sizes=\"(max-width: 769px) 100vw, 769px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 769px; --smush-placeholder-aspect-ratio: 769\/665;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Day Cycle<\/h3>\n\n\n\n<p>Day cycle determines the <strong>background gradient<\/strong> and a <strong>subtle global lightning.<\/strong><\/p>\n\n\n\n<p>The day cycle <strong>will run through the entire collection<\/strong>, Morning-Day-Evening-Night. Depending of the number of mint.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-15-1024x1024.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Clouds &amp; Northern lights<\/h3>\n\n\n\n<p>Using a <strong>GLSL shader<\/strong>, added some <strong>animated clouds (by day)&nbsp;<\/strong> and<strong> northern lights (by night)<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-16.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 765px; --smush-placeholder-aspect-ratio: 765\/588;\" \/><figcaption class=\"wp-element-caption\">Clouds<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-17.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 765px; --smush-placeholder-aspect-ratio: 765\/721;\" \/><figcaption class=\"wp-element-caption\">Northern Lights<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Variations and rarities<\/h3>\n\n\n\n<p>Some elements and details that are uncommon.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Rainbow Train<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-18.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 592px; --smush-placeholder-aspect-ratio: 592\/341;\" \/><figcaption class=\"wp-element-caption\">5% chance of getting this rainbow train<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">London bus \u2018Routemaster\u2019<\/h4>\n\n\n\n<p>Traffic can be left or right handed. <\/p>\n\n\n\n<p>If traffic is left handed, there\u2019s a probability of spawn the classic red London Bus \u2018<strong>Routemaster<\/strong>\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-20.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 318px; --smush-placeholder-aspect-ratio: 318\/196;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Light columns<\/h4>\n\n\n\n<p>Only appears by night on these \u2018pyramid-like\u2019 structures.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-21.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 337px; --smush-placeholder-aspect-ratio: 337\/512;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Pink trees<\/h4>\n\n\n\n<p>Some trees are pink!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-22.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 553px; --smush-placeholder-aspect-ratio: 553\/290;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Sakura Trees<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-23.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 761px; --smush-placeholder-aspect-ratio: 761\/321;\" \/><figcaption class=\"wp-element-caption\">Sakura trees + pink tree<\/figcaption><\/figure>\n\n\n\n<p>Sometimes trees are white\/pink. Inspired by Japanese sakura trees.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-24.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 764px; --smush-placeholder-aspect-ratio: 764\/424;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Elevators<\/h4>\n\n\n\n<p>Elevators may appear in tall buildings. Moving up and down, they add more dynamism to the scene.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"508\" height=\"303\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-36.jpg\" alt=\"\" class=\"wp-image-235 lazyload\" data-srcset=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-36.jpg 508w, https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-36-300x179.jpg 300w\" data-sizes=\"(max-width: 508px) 100vw, 508px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 508px; --smush-placeholder-aspect-ratio: 508\/303;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Rainbow City<\/h4>\n\n\n\n<p>You may get \u2018rainbow\u2019 buildings. Color mix looks weird, not sure if it\u2019s nice but added this feature as a \u2018rarity\u2019 that could make some collectors happy.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-26.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 765px; --smush-placeholder-aspect-ratio: 765\/631;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Others<\/h4>\n\n\n\n<p>Diamond symbols, blinking lights, parks or helicopters do not always happen but they are common. I would not consider rarities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Color Palettes<\/h2>\n\n\n\n<p>Most generations will have a <strong>random coloring<\/strong> but there\u2019s a <strong>chance of getting a predefined palette<\/strong> with colors out of the random generator range.&nbsp;<\/p>\n\n\n\n<p>There\u2019s 7 Predefined palettes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-33.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 746px; --smush-placeholder-aspect-ratio: 746\/746;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-34.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 740px; --smush-placeholder-aspect-ratio: 740\/745;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Camera control <\/h2>\n\n\n\n<p>Dragging the mouse will move the camera. As the whole point of this design is the isometric view, releasing the mouse will go back to Isometric perspective.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-27.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/267;\" \/><\/figure>\n\n\n\n<p>Pressing<strong> keys 1,2,3 <\/strong>changes the camera position to a side view. That shows a 2D-render of the city. <\/p>\n\n\n\n<p>Press <strong>any other key or click<\/strong> the mouse to go back to 3D view.<\/p>\n\n\n\n<p>Pressing<strong> \u20180\u2019 key<\/strong> will swap between sky or <strong>transparent background<\/strong>. Just in case you want to take a picture and mix with another background image.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-28.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 745px; --smush-placeholder-aspect-ratio: 745\/756;\" \/><figcaption class=\"wp-element-caption\">Isometric (default view) and 2D projections.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>First time I made something with this aesthetic. I\u2019ve tried different approaches in the past but never had enough good results.<\/p>\n\n\n\n<p>One of my favorite things about this project is the use of a bunch of different algorithms to build the whole city. <\/p>\n\n\n\n<p>There are maze-generators and \u201810 print\u2019 for the parks. Recursive subdivision for the squares of the city, custom algorithms for the patterns on the buildings facades, and more small custom algorithms. <\/p>\n\n\n\n<p>Compared to other projects where I took an algorithm and worked hard on it, this time I feel like I&#8217;ve been working on a dozen mini-projects dancing together to create the final piece.<\/p>\n\n\n\n<p>I hope you like it \ud83d\ude42<\/p>\n\n\n\n<p>Cheers<\/p>\n\n\n\n<p>Fernando<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Easter eggs<\/h2>\n\n\n\n<p>If you have read this far my sincere congratulations. You deserve some special information about a few hidden elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text City<\/h3>\n\n\n\n<p>There&#8217;s a hidden city in each piece. Open the browser console (F12 or Ctrl-Shift-J in most of browsers) and you will see a procedurally generated <strong>ASCII-art city unique<\/strong> for each mint.<\/p>\n\n\n\n<p>Also there&#8217;s some info about the piece such number of mint and population (calculated depending of the density and size of the buildings)<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-29.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 855px; --smush-placeholder-aspect-ratio: 855\/625;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ground and Sky<\/h3>\n\n\n\n<p>The design adapts to different screen formats or window size. Vertical formats lets you see more things over and under the city.<\/p>\n\n\n\n<p>Changing the window format to a vertical bar, you may see a \u2018ground\u2019 and a sun (by day) or moon (by night)  in the sky.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-30.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 314px; --smush-placeholder-aspect-ratio: 314\/811;\" \/><\/figure>\n\n\n\n<p>Hint: Open the right tab and drag to the left<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/05\/imagen-31.jpg\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 751px; --smush-placeholder-aspect-ratio: 751\/777;\" \/><\/figure>\n\n\n\n<p>Tha&#8217;s all folks. Have a nice day.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p> Metropixeland is a vibrant metropolis where our pixels can live in peace.<\/p>\n","protected":false},"author":1,"featured_media":421,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[10,22,14,9],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artblocks","category-ethereum","category-featured","category-generative-art"],"uagb_featured_image_src":{"full":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1.jpg",900,900,false],"thumbnail":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1-150x150.jpg",150,150,true],"medium":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1-300x300.jpg",300,300,true],"medium_large":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1-768x768.jpg",768,768,true],"large":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1.jpg",900,900,false],"1536x1536":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1.jpg",900,900,false],"2048x2048":["https:\/\/www.fernandojerez.com\/site\/wp-content\/uploads\/2022\/07\/mmt_7-1.jpg",900,900,false]},"uagb_author_info":{"display_name":"Fernando Jerez","author_link":"https:\/\/www.fernandojerez.com\/site\/author\/ferjerez\/"},"uagb_comment_info":0,"uagb_excerpt":"Metropixeland is a vibrant metropolis where our pixels can live in peace.","_links":{"self":[{"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":13,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":1340,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/posts\/581\/revisions\/1340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/media\/421"}],"wp:attachment":[{"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandojerez.com\/site\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}