{"id":3830,"date":"2015-11-11T22:45:20","date_gmt":"2015-11-11T22:45:20","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=3830"},"modified":"2020-02-05T21:36:01","modified_gmt":"2020-02-05T21:36:01","slug":"conference-project-update","status":"publish","type":"post","link":"https:\/\/r6g.ad7.mwp.accessdomain.com\/?p=3830","title":{"rendered":"Interactive City: Black and White Euphoria"},"content":{"rendered":"<p class=\"p1\">For my conference project, I planned on creating a black and white design that would change based on the user\u2019s movement. So far, I have been able to create a sketch with motion detection. At first, I wasn\u2019t sure how to accomplish this, so I created black and white shapes that moved in unison.<\/p>\n<p class=\"p1\"><span class=\"s1\">When moving in front of the camera, the design stayed intact and didn\u2019t appear to be that interesting. After experimenting with this, I decided that I really wanted to create something more complicated and interactive for the user. I wanted the design to be even more distorted from its\u2019 original state and keep on changing, based on the user\u2019s movement. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">After my conference meeting, I learned how to make each individual shape move on its own. Within the code, I have used 16 variables that indicate each shape to move at a different rate than the previous one. For example, one shape may move every second, while another moves every three seconds.\u00a0<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.38.58-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-3831\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.38.58-PM-237x300.png\" alt=\"Screen Shot 2015-11-11 at 5.38.58 PM\" width=\"500\" height=\"633\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.38.58-PM-237x300.png 237w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.38.58-PM.png 576w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">By making each shape independent from each other, it creates more confusion for the user because the design isn\u2019t moving in unison. I think that this poses an interesting effect on the user because it creates the element of surprise. It\u2019s hard to figure out how you can control all of the shapes at once because they keep on moving in different directions, at different rates. This creates new and unexpected patterns that the user can see. This aspect makes my conference project much more individualized because the sketch will appear different every time.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-3832\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.39.42-PM-300x270.png\" alt=\"Screen Shot 2015-11-11 at 5.39.42 PM\" width=\"500\" height=\"450\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.39.42-PM-300x270.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.39.42-PM-624x563.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.39.42-PM.png 799w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">So far for my project, I\u2019ve only used circles. I plan to add different types of shapes that are different sizes. I\u2019m glad that I tried using the same shapes over and over again so far because it has allowed me to understand how to program motion with many separate variables. Now that I have had practice with this, I feel better about adding more complicated shapes to create a unique pattern. I\u2019m hoping that I can figure out how I want to create the initial design, so that it has the best effect on the user.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.40.59-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-3833\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.40.59-PM-300x271.png\" alt=\"Screen Shot 2015-11-11 at 5.40.59 PM\" width=\"500\" height=\"452\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.40.59-PM-300x271.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.40.59-PM-624x563.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.40.59-PM.png 799w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a> <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For my conference project, I planned on creating a black and white design that would change based on the user\u2019s movement. So far, I have been able to create a sketch with motion detection. At first, I wasn\u2019t sure how&#8230;<\/p>\n","protected":false},"author":70,"featured_media":3831,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[168],"tags":[50,179],"class_list":["post-3830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-interactive-city","tag-conference","tag-interactive-city","wpcat-168-id"],"_links":{"self":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/3830","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\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3830"}],"version-history":[{"count":3,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/3830\/revisions"}],"predecessor-version":[{"id":13023,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/3830\/revisions\/13023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/media\/3831"}],"wp:attachment":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}