{"id":7664,"date":"2017-12-16T01:35:36","date_gmt":"2017-12-16T01:35:36","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=7664"},"modified":"2020-02-19T21:45:45","modified_gmt":"2020-02-19T21:45:45","slug":"system-beyond-184","status":"publish","type":"post","link":"https:\/\/r6g.ad7.mwp.accessdomain.com\/?p=7664","title":{"rendered":"Art From Code: Beyond 184"},"content":{"rendered":"<p>It&#8217;s all been leading up to this.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7665\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg.png\" alt=\"Beyond 184\" width=\"500\" height=\"500\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/wOJjslfmtf6OwAAAABJRU5ErkJggg-624x624.png 624w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Let&#8217;s have a little urban fantasy. You&#8217;re on top of a skyscraper. You look down, and you see the neon world below. It&#8217;s beautiful, it&#8217;s alive.<\/p>\n<p>And I wanted to capture that.<\/p>\n<p>To build a living place, just pretty neon buildings alone are not enough. After all, the buildings are nothing without the inhabitants. And so, the streets are full of life. They are filled with traffic, with people going around their lives. An entire system that simulates a small world is behind each pair of these headlights.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7666\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/BrowserPreview_tmp.gif\" alt=\"City in action\" width=\"499\" height=\"499\" \/><\/p>\n<p>When I first found out about\u00a0this class and interviewed for it, one of the examples of what I considered &#8220;Art from Code&#8221; was <a href=\"https:\/\/vimeo.com\/144126206\">a beautiful video by baku89 that utilized cellular automata<\/a>. I found it so fascinating that a mathematical model made out of a grid of cells &#8211; all using pretty simple rules that determine if a cell will be &#8220;filled&#8221; or &#8220;empty&#8221; in the next generation &#8211; could produce something so beautiful.<\/p>\n<p>All the pieces ended up falling together in a way that pushed me to explore cellular automata further: this class&#8217; final prompt being &#8220;systems&#8221;, and the discrete mathematics&#8217; class&#8217; exploration of logic.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7668\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-14.png\" alt=\"Game of Life\" width=\"499\" height=\"499\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-14.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-14-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-14-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-14-624x624.png 624w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p>As this class progressed, I found myself exploring and implementing cellular automata rules, and even creating a few of my own, such as this automata, which generates a city grid, similar to\u00a0Piet Mondrian&#8217;s Broadway Woogie Boogie:<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-15.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7669\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-15.png\" alt=\"Broadway Walkie Talkie\" width=\"500\" height=\"500\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-15.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-15-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-15-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-15-624x624.png 624w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>So, for my conference projects &#8211; both for Art from Code and Discrete Mathematics &#8211; I chose to work with cellular automata.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7670\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n.jpg\" alt=\"Familiar\" width=\"502\" height=\"502\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n.jpg 960w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n-150x150.jpg 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n-300x300.jpg 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/12004748_10203567748512646_3243195205696310642_n-624x624.jpg 624w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/p>\n<p>Having finally returned to New York City after spending a lot time living in suburban hell, Manhattan was all that I had on my mind.<\/p>\n<p>I thought back to other generative projects I&#8217;ve seen &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=-d2-PtK4F6Y\">and one in particular stood out<\/a>. Called Pixel City, this screensaver generated an entire city, full of unique buildings and even street traffic. But the traffic wasn&#8217;t really &#8220;alive&#8221;. And I wanted to fix that.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/pixel-city4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7671\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/pixel-city4.jpg\" alt=\"Pixel City\" width=\"501\" height=\"357\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/pixel-city4.jpg 500w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/pixel-city4-300x213.jpg 300w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p>I decided to base my project on a cellular automata called Rule 184, expanding upon it to create a more interesting traffic simulation in two dimensions (hence, I called it &#8220;Beyond 184&#8221;). The Rule 184 cellular automata simulates vehicles moving on a one-dimensional road with a very simple set of rules:<\/p>\n<ul>\n<li>If a cell is occupied, and the next (right) cell is empty, the cell becomes empty<\/li>\n<li>If a cell is empty, and the previous (left) cell is occupied, the cell becomes occupied<\/li>\n<li>If a cell is occupied, and the next cell is occupied, the cell stays occupied<\/li>\n<li>If a cell is empty, and the previous cell is empty, the cell stays empty<\/li>\n<\/ul>\n<p>I expanded upon these rules, adding a &#8220;cooldown&#8221; &#8211; that is, the ability of cells to stay in place for one or two generations before moving. This gave me the ability to have a city with &#8220;cars&#8221; that can move at different speeds. Along with that, I made it so that cells with a lower cooldown will not be able to come to a full stop immediately &#8211; simulating how actual vehicles in the real world will have different braking distances depending on how fast they are moving.<\/p>\n<p>I brought this rule to two dimensions by creating a &#8220;source-destination&#8221; structure, which allowed for moving 1-D traffic cellular automata to two dimensions with minimal modifications. With this structure, as applied to the Rule 184 above, a &#8220;road&#8221; cell&#8217;s &#8220;source&#8221; and &#8220;destination&#8221; values dictate what a cell considers its &#8220;previous&#8221; and &#8220;next&#8221; cell. By requiring the cells to be connected to one another (that is, a cell&#8217;s destination value should be equal to the next cell&#8217;s source value for the chain to be complete), I gained the ability to control traffic flow.<\/p>\n<p>I added a unique type of road cell that is called an intersection. This cell, instead of using a single &#8220;source&#8221; and &#8220;destination&#8221; value, has two of each, and with every generation, determines which values should be used, with the underlying logic attempting to move traffic from busier roads to less busy roads &#8211; after all, throwing more cars at a traffic jam doesn&#8217;t help anybody.<\/p>\n<p>You can find more detailed information on how this cellular automaton was created in the paper I wrote for my Discrete Mathematics class, which, along with the source code for the simulation, are available at <a href=\"https:\/\/github.com\/SilverEzhik\/beyond184\">the GitHub repository<\/a>.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-16.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7672\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-16.png\" alt=\"Beyond 184\" width=\"502\" height=\"502\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-16.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-16-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-16-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-16-624x624.png 624w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/p>\n<p>Believe it or not, that grid filled with squares is the very same simulation you saw\u00a0at the beginning.<\/p>\n<p>Doesn&#8217;t look that great, huh. That&#8217;s because it needs a home. It needs to live inside of a city.<\/p>\n<p>Time to put the &#8220;art&#8221; into &#8220;Art from Code&#8221;.<\/p>\n<p>The city motif was present in my creations since the very first thing I made for the class:<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/scroll.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7673\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/scroll.png\" alt=\"Scrolling city\" width=\"503\" height=\"283\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/scroll.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/scroll-300x168.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/scroll-624x351.png 624w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/a><\/p>\n<p>I ended up taking a more minimal approach, and before I brought the city and the traffic model together, this is what I ended up with:<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-19.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7676\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-19.png\" alt=\"3D test\" width=\"502\" height=\"502\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-19.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-19-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-19-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-19-624x624.png 624w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/p>\n<p>Once I brought the two together, it wasn&#8217;t just city-inspired creations that helped me with the process. Little bits of everything I&#8217;ve learned this semester all came together to create my neon city.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7674\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-17.png\" alt=\"Self-portrait\" width=\"503\" height=\"503\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-17.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-17-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-17-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-17-624x624.png 624w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/a><\/p>\n<p>The alternating colors that I used were obtained using the same method I used to create the random files and folders that I used for a part of my self-portrait.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/download-12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7204\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/download-12.png\" alt=\"Continuing experiments\" width=\"503\" height=\"895\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/10\/download-12.png 720w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/10\/download-12-168x300.png 168w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/10\/download-12-576x1024.png 576w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/10\/download-12-624x1109.png 624w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/a>The random buildings and the way I ended up having them use different colors was born from an experiment for one of my other projects &#8211; one that didn&#8217;t even make it into the final project.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-18.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7675\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-18.png\" alt=\"Yuki machi\" width=\"502\" height=\"804\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-18.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-18-187x300.png 187w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-18-640x1024.png 640w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-18-624x998.png 624w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/p>\n<p>One of the wallpapers I&#8217;ve made before gave me the idea to reduce my buildings to glowing blocks of neon.<\/p>\n<p>With all that, I eventually ended up with my final result. A living neon city.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-20.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-7677\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/12\/download-20.png\" alt=\"As seen from above\" width=\"504\" height=\"504\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-20.png 800w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-20-150x150.png 150w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-20-300x300.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2017\/12\/download-20-624x624.png 624w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><\/p>\n<p>And I think it&#8217;s pretty nice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s all been leading up to this. Let&#8217;s have a little urban fantasy. You&#8217;re on top of a skyscraper. You look down, and you see the neon world below. It&#8217;s beautiful, it&#8217;s alive. And I wanted to capture that. To&#8230;<\/p>\n","protected":false},"author":166,"featured_media":7666,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[39,257,241,50,351],"class_list":["post-7664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-from-code","tag-conference-project","tag-art-from-code-2","tag-generative-art","tag-conference","tag-city","wpcat-225-id"],"_links":{"self":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/7664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7664"}],"version-history":[{"count":8,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/7664\/revisions"}],"predecessor-version":[{"id":13154,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/7664\/revisions\/13154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/media\/7666"}],"wp:attachment":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}