{"id":6879,"date":"2017-10-04T00:15:33","date_gmt":"2017-10-04T00:15:33","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=6879"},"modified":"2020-05-06T22:23:52","modified_gmt":"2020-05-06T22:23:52","slug":"self-portrait-13","status":"publish","type":"post","link":"https:\/\/astoryisnotatree.net\/?p=6879","title":{"rendered":"Art from Code: Self-Portrait"},"content":{"rendered":"<p style=\"text-align: left;\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6886 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-17.png\" alt=\"annie_self_portrait0-17\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-17.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-17-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-17-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6883 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-13.png\" alt=\"annie_self_portrait0-13\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-13.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-13-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-13-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p style=\"text-align: left;\">When I began working on this assignment, I wanted to create a dynamic and interactive image that reflected a part of my personality while taking inspiration from Paul Klee. I noticed that in Klee\u2019s self-portrait, his face is divided into geometric pieces of different shapes and colors. In my self portrait, I tried to echo that fragmentation using the arc() function. I created a face of different colors out of quarter circles. The division of a face into four sections seems to allude to facets of one\u2019s personality by depicting them abstractly. I made the eyes with ellipses and then used a rectangles to form the neck and the mouth. The mouth is divided horizontally into two separate rectangles, which is an allusion to the way that Klee divided his own mouth into two tiny rectangles.<\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6881 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-7.png\" alt=\"annie_self_portrait0-7\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-7.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-7-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-7-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6880 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-2.png\" alt=\"annie_self_portrait0-2\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-2.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-2-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-2-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Initially, I considered creating a few sets of palettes out of chosen colors to depict different moods and emotions, but decided to experiment with randomness instead after considering the tedium of compiling upwards of twenty variables for different colors in the different palettes. Instead, I declared six random color variables and assigned them to different shapes. All the shapes are different colors except for the facial features. I wanted to keep the facial features one color to keep them somewhat stable throughout the iterations of the image. I used the mousePressed() function to reassign those variables to different random colors.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6888 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-21.png\" alt=\"annie_self_portrait0-21\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-21.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-21-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-21-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6889 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-14.png\" alt=\"annie_self_portrait0-14\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-14.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-14-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-14-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">I was pleasantly surprised by the interesting palettes the random color variables created. I wasn\u2019t expecting the image\u2019s colors to look as cohesive as frequently as they do. For this post, I took about thirty screenshots and included my favorite ones. The colors definitely work to affect the mood and personality of the face. To me, the quarter circles represent different areas of my psyche circling through different processes and emotions as the colors change. I\u2019m glad that I chose not to use preset palettes for different moods, because I think that ultimately would have led to simpler expressions of emotions (a blue palette for sadness, a red palette for anger, etc.) In reality, human beings don\u2019t usually experience one emotion at a time &#8211; we experience multiple emotions across an array of actions and reactions.<\/span><\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6885 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-11.png\" alt=\"annie_self_portrait0-11\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-11.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-11-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-11-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6884 size-full\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-5.png\" alt=\"annie_self_portrait0-5\" width=\"600\" height=\"600\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-5.png 600w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-5-150x150.png 150w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2017\/10\/annie_self_portrait0-5-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">After conference, I decided to further diversify the expressions of the iterations by adding randomness to the dimensions of the mouth and eyes. I made a few more variables for width and height of the eye ellipses so that the eyes could change expressions. The mouth was a little more tricky, because the usual rectMode controls the upper left corner of the rectangle along with the width and the height, which meant that the left hand mouth rectangle didn\u2019t stay aligned with the center of the image and connected to the other mouth rectangle. I changed to the rectMode(CORNERS), which controls the upper left hand corner and the opposite lower right hand corner. This allowed me to keep the inner side of both rectangles at the same x value throughout the iterations. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I began working on this assignment, I wanted to create a dynamic and interactive image that reflected a part of my personality while taking inspiration from Paul Klee. I noticed that in Klee\u2019s self-portrait, his face is divided into&#8230;<\/p>\n","protected":false},"author":29,"featured_media":6886,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[257,129],"class_list":["post-6879","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-from-code","tag-art-from-code-2","tag-self-portrait","wpcat-225-id"],"_links":{"self":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/6879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6879"}],"version-history":[{"count":9,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/6879\/revisions"}],"predecessor-version":[{"id":14159,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/6879\/revisions\/14159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/6886"}],"wp:attachment":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}