{"id":5037,"date":"2016-12-05T01:45:05","date_gmt":"2016-12-05T01:45:05","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=5037"},"modified":"2020-02-19T22:23:00","modified_gmt":"2020-02-19T22:23:00","slug":"conference-project-post-mortem-dont-forget-to-blink","status":"publish","type":"post","link":"http:\/\/astoryisnotatree.net\/?p=5037","title":{"rendered":"Art from Code: Don&#8217;t Forget to Blink Post-Mortem"},"content":{"rendered":"<p>My conference project assignment was to use Victor Vasarely\u2019s optical art pieces, and recreate them using Processing. That wasn\u2019t the goal, though; my goal wasn\u2019t to make something that already existed. It has always been, ever since I started pitching conference ideas, to surprise the brain. The human brain is constantly searching for change in the world; it is always looking for the unexpected, which is why I wanted to create something that amazed. Something that has to be stared at, and every time, there is something about it that makes you look again. No matter what I ended up doing, that was the effect I wanted, and I hope anybody looking at the things I make\u00a0feels the effort I put in to amaze the\u00a0brain.<\/p>\n<p>I took five images of work done by Vasarely and recreated them in Processing. At first, I was going to make them circle for circle, color for color, and pixel for pixel. Unsurprisingly, that was very inefficient and Circles pt.1 took me about two hours to code and about 30 minutes alone to do the color. Why did it take that long to code a bunch of circles? Well, I used individual values for the x and y position and the width and height of each circle. When one number was off, I had to find the messed up value and change everything that was affected. For every other sketch, I used variables, so it was faster overall and most importantly, easier to fix when I made a mistake. Throughout the project, I used the Digital Color Meter application on Mac to get the exact values for color. It took a while, but that was the best way to replicate the colors Vasarely used.<\/p>\n<figure id=\"attachment_5043\" aria-describedby=\"caption-attachment-5043\" style=\"width: 500px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference4.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5043\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference4-300x298.jpeg\" alt=\"Circles pt. 1 ; coded in December, 2016, Kelsey Copley\" width=\"500\" height=\"496\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference4-300x298.jpeg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference4-150x150.jpeg 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-5043\" class=\"wp-caption-text\">Circles pt. 1 ; coded in December, 2016, Kelsey Copley<\/figcaption><\/figure>\n<figure id=\"attachment_5044\" aria-describedby=\"caption-attachment-5044\" style=\"width: 499px\" class=\"wp-caption alignright\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5044\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5-300x300.jpeg\" alt=\"Circles pt. 2 ; coded in December, 2016, Kelsey Copley\" width=\"499\" height=\"499\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5-300x300.jpeg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5-150x150.jpeg 150w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5-1024x1022.jpeg 1024w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference5.jpeg 1100w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><figcaption id=\"caption-attachment-5044\" class=\"wp-caption-text\">Circles pt. 2 ; coded in December, 2016, Kelsey Copley<\/figcaption><\/figure>\n<p>Mistakes were bound to happen; in my experience with coding, trial and error is a necessary part of the process, and that is part of what makes the final result so satisfying and amazing. At one point, I ran the sketch and a majority of my circles were nowhere to be found, and it was because I was using a minus instead of a plus, so they were somewhere off-canvas. That is just one of many examples I could give where things didn&#8217;t go my way, but there were also times where I would get the result I wanted and I would barely be able to tell the difference between mine coded on the computer and Vasarely&#8217;s painted works.<\/p>\n<figure id=\"attachment_5041\" aria-describedby=\"caption-attachment-5041\" style=\"width: 501px\" class=\"wp-caption alignright\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5041 \" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2-300x239.jpg\" alt=\"Patterns; coded in November, 2016, Kelsey Copley\" width=\"501\" height=\"399\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2-300x239.jpg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2-1024x818.jpg 1024w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2-624x498.jpg 624w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference2.jpg 1602w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><figcaption id=\"caption-attachment-5041\" class=\"wp-caption-text\">Patterns; coded in November, 2016, Kelsey Copley<\/figcaption><\/figure>\n<p>A common concept among all of the pieces is\u00a0color.\u00a0Color was so important in this project, I\u2019d go as far to say color carries whatever success my project has. Variables became increasingly important as I worked on this project as well. As I mentioned before, only one of the pieces was made without variables, and it was by far the most exhausting one to make. In Patterns, I relied heavily on loops and break and continue. I used the primitive shapes for all of the pieces,\u00a0ellipses for most and arcs in Patterns. I coded using the x and y axes for most of the sketches as well. One of my sketches is animated. Abyss was the first of Vasarely\u2019s work that I finished, and while the color gradation was very successful in adding depth, I really wanted to make it move, so I made two of the series of circles and made them pass over each other. Elements I want to add in the future to these pieces and others like them are more animation, a small amount of noise, and a basic level of interactivity, that would most likely involved color changes.<\/p>\n<figure id=\"attachment_5040\" aria-describedby=\"caption-attachment-5040\" style=\"width: 504px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5040\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.2-300x300.jpg\" alt=\"Abyss pt. 1; coded in November 2016, Kelsey Copley\" width=\"504\" height=\"504\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.2-300x300.jpg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.2-150x150.jpg 150w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.2.jpg 996w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><figcaption id=\"caption-attachment-5040\" class=\"wp-caption-text\">Abyss pt. 1; coded in November 2016, Kelsey Copley<\/figcaption><\/figure>\n<figure id=\"attachment_5039\" aria-describedby=\"caption-attachment-5039\" style=\"width: 501px\" class=\"wp-caption alignright\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5039\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1-300x300.jpg\" alt=\"Abyss pt. 2; coded in November 2016, Kelsey Copley\" width=\"501\" height=\"501\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1-300x300.jpg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1-150x150.jpg 150w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1-624x625.jpg 624w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference1.1.jpg 996w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><figcaption id=\"caption-attachment-5039\" class=\"wp-caption-text\">Abyss pt. 2; coded in November 2016, Kelsey Copley<\/figcaption><\/figure>\n<hr \/>\n<p style=\"text-align: left;\">\n<p style=\"text-align: left;\">\u201cHow was it to make?\u201d My classmates and I were asked this question all semester, and it always stuck out to me as such a startling question. Each time I thought about it, my mind went blank. How <i>was <\/i>it to make? It was just hard and complicated and confusing, and most of all, frustrating. But it was also amazing and beautiful and so dumbfounding. How am I supposed to put hours of staring at a screen, countless dashed hopes, and unexpected results into words?<\/p>\n<figure id=\"attachment_5045\" aria-describedby=\"caption-attachment-5045\" style=\"width: 502px\" class=\"wp-caption alignright\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5045 \" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6-300x300.jpeg\" alt=\"Coded in December, 2016, Kelsey Copley\" width=\"502\" height=\"502\" srcset=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6-300x300.jpeg 300w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6-150x150.jpeg 150w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6-1024x1024.jpeg 1024w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6-624x624.jpeg 624w, http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2016\/12\/conference6.jpeg 1100w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><figcaption id=\"caption-attachment-5045\" class=\"wp-caption-text\">Coded in December, 2016, Kelsey Copley<\/figcaption><\/figure>\n<p>How was it making this conference project? The first word that comes to mind is stressful, probably because I just really wanted to get it right. More than anything, I just wanted to get it right and do everyone and everything justice. This made every second that I worked on and thought about my project miserable, until today, when I finished recreating the five Vasarely pieces, and made a few Vasarely-inspred sketches like the one shown here. Honestly, I don\u2019t know what changed. One theory is the pressure of having to complete this post. The necessity to finish everything made me appreciate Vasarely\u2019s work, the process of coding, and what I\u2019ve learned this semester a lot more. I actually enjoyed working on conference today, which is something I couldn\u2019t say before.<\/p>\n<p>Whenever I complete an assignment, a paper, a project, I always say that I could\u2019ve managed my time better so that I didn\u2019t have to do so much at the very end, but at this point, I think it\u2019s just my style. I actually like the doing the work when I have the high pressure to complete it. I\u2019m happy with my project as it is now, and I\u2019m excited to incorporate more animation, some interactivity, complexity, and the logical next step, make some optical art in the third dimension. This project will never really be complete, as I will always be trying to astound the brain with my art, whether that\u2019s generative or any other type. I have many plans to continue using Processing and inspirational artists like Vasarely and Bridget Riley to make things that amaze.<\/p>\n<p>This project has definitely been helpful in mastering a lot of basic coding concepts like variables and loops, but I have also been forced to use colors beyond grayscale and the occasional purple. What I gained most from this semester was of course learning a new awesome skill. I had known some Java previously, but this level of understanding is not something I expected from myself. I also have so much more appreciation for technology, and I have been introduced to another facet of art that I will be involved in for probably the rest of my life.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>My conference project assignment was to use Victor Vasarely\u2019s optical art pieces, and recreate them using Processing. That wasn\u2019t the goal, though; my goal wasn\u2019t to make something that already existed. It has always been, ever since I started pitching&#8230;<\/p>\n","protected":false},"author":133,"featured_media":5043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225],"tags":[39,241,242,50],"class_list":["post-5037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-from-code","tag-conference-project","tag-generative-art","tag-noise","tag-conference","wpcat-225-id"],"_links":{"self":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/5037","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\/133"}],"replies":[{"embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5037"}],"version-history":[{"count":9,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/5037\/revisions"}],"predecessor-version":[{"id":13177,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/5037\/revisions\/13177"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/5043"}],"wp:attachment":[{"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5037"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}