{"id":7214,"date":"2017-10-31T10:53:20","date_gmt":"2017-10-31T10:53:20","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=7214"},"modified":"2020-05-06T22:05:46","modified_gmt":"2020-05-06T22:05:46","slug":"gabe-eng-scrolling-wallpaper","status":"publish","type":"post","link":"http:\/\/astoryisnotatree.net\/?p=7214","title":{"rendered":"Art from Code: Scrolling Wallpaper"},"content":{"rendered":"<p>I was uncertain of how I wanted to create a central background to the canvas.\u00a0 I was influenced by the Annie Albers grid at first except I wanted to make it a resemblance of a grid more though, and less colorful.\u00a0 I wanted the lines to be almost indistinguishable from each other.\u00a0 After playing around with the code, I came out with a pattern that made the space between the lines smaller and smaller as you go across the pattern.\u00a0 It changes the color of the canvas as it advances to the right\u00a0and gave it somewhat of a three dimensional feel.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7247 size-large\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM-576x1024.png\" alt=\"Screen Shot 2017-10-30 at 7.45.38 PM\" width=\"576\" height=\"1024\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM-576x1024.png 576w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM-168x300.png 168w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM-624x1108.png 624w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.45.38-PM.png 706w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/a><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.35.22-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7248 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.35.22-PM.png\" alt=\"Screen Shot 2017-10-30 at 10.35.22 PM\" width=\"586\" height=\"388\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.35.22-PM.png 586w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.35.22-PM-300x198.png 300w\" sizes=\"auto, (max-width: 586px) 100vw, 586px\" \/><\/a><\/p>\n<p>I experimented a lot with the random functions with my color and in size of the shapes as well.\u00a0 When I was visualizing it in my head, I first thought of placing random sizes of rectangles along the y axis, but I was unsure of exactly how to place it.\u00a0 When coded, it looked chaotic like and I liked that concept to further influence my code. So I decided to place the same type of code just along the x axis.<a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7249 size-large\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM-570x1024.png\" alt=\"Screen Shot 2017-10-30 at 7.39.14 PM\" width=\"570\" height=\"1024\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM-570x1024.png 570w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM-167x300.png 167w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM-624x1120.png 624w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-7.39.14-PM.png 704w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/a><\/p>\n<p>I thought the dark pink background would allow me to use random fill colors as well, so I decided to randomize the fill of the rectangles along the middle of the screen. Then I added rotating shapes that wrap and bounce. With the small canvas size it allowed the image to look more crowded, which I thought went well with the other code. The random fill also allowed those objects to match the continuous random colors of the rectangles in the center.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.46.04-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7250 size-large\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.46.04-PM-581x1024.png\" alt=\"Screen Shot 2017-10-30 at 10.46.04 PM\" width=\"581\" height=\"1024\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.46.04-PM-581x1024.png 581w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.46.04-PM-170x300.png 170w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-30-at-10.46.04-PM.png 718w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/a><\/p>\n<p>The final addition to the code was a rectangle rotating around a fixed point continuously. I was first thinking of placing that at the center of the canvas but then realized having multiples of the code would play well with the canvas and space. I also thought multiple rotating images would add to the chaotic vibe of the piece mentioned before. A high frame rate would enhance that even further. With that being said, it is hard to see the actual final product through a screen shot because\u00a0of the framerate.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was uncertain of how I wanted to create a central background to the canvas.\u00a0 I was influenced by the Annie Albers grid at first except I wanted to make it a resemblance of a grid more though, and less&#8230;<\/p>\n","protected":false},"author":163,"featured_media":7247,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[],"class_list":["post-7214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-from-code","wpcat-225-id"],"_links":{"self":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/7214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7214"}],"version-history":[{"count":5,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/7214\/revisions"}],"predecessor-version":[{"id":14139,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/7214\/revisions\/14139"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/7247"}],"wp:attachment":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7214"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}