{"id":4095,"date":"2015-12-15T01:28:47","date_gmt":"2015-12-15T01:28:47","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=4095"},"modified":"2020-01-29T22:15:33","modified_gmt":"2020-01-29T22:15:33","slug":"project-2-post-mortem-ohio-ohio","status":"publish","type":"post","link":"https:\/\/astoryisnotatree.net\/?p=4095","title":{"rendered":"Interactive City: Ohio, Ohio."},"content":{"rendered":"<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-8.23.59-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4096 aligncenter\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-8.23.59-PM-300x208.png\" alt=\"Screen Shot 2015-12-14 at 8.23.59 PM\" width=\"504\" height=\"349\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-8.23.59-PM-300x208.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-8.23.59-PM-1024x712.png 1024w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><\/p>\n<p>For Project #2, I chose to make a solar system of sorts with the cities\/neighborhoods where I live.\u00a0 This project probably had the most evolution from day one until the final product.\u00a0 Originally, I wanted to do something that had to do with where I\u2019m from, but I had little to know idea what I wanted it to be.\u00a0 During a conference, Angela mentioned something about a solar system\u2026so we decided on that.\u00a0 Then, I was brainstorming ways I could work the names into the solar system, and remembered that I had really liked the way Garret was able to draw the fish by hand and put it into his conference project.<\/p>\n<p>I really like playing around with hand lettering, so I thought that it would be fun to do my hand lettering and insert it into my code.<\/p>\n<p>I worked to sketch out all the names, then I edited them in photoshop which ended up being the most tedious task on earth.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0556.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-4103 aligncenter\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0556-225x300.jpg\" alt=\"IMG_0556\" width=\"500\" height=\"667\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0556-225x300.jpg 225w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0556-768x1024.jpg 768w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0556-624x832.jpg 624w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0563-e1450142774406.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-4100 aligncenter\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0563-e1450142774406-300x225.jpg\" alt=\"IMG_0563\" width=\"499\" height=\"374\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0563-e1450142774406-300x225.jpg 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0563-e1450142774406-1024x768.jpg 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/IMG_0563-e1450142774406-624x467.jpg 624w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4102\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM-300x245.png\" alt=\"Screen Shot 2015-12-14 at 7.02.19 PM\" width=\"500\" height=\"408\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM-300x245.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM-1024x836.png 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM-624x509.png 624w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-7.02.19-PM.png 1958w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>I wrote my code in bits.\u00a0 First, I got the background that I wanted (made in photoshop), and then I worked on getting shapes such as ellipses or rectangles to rotate on a circular path around the center of the screen.\u00a0 Then I wanted to add rotation to each of the individual shapes.\u00a0 In order to do so, it was necessary to use the pushMatrix and popMatrix.<\/p>\n<p>Once I had that code down, I went to work in photoshop to perfect my \u2018planets.\u2019\u00a0 Afterwards, I went and added image variables and changed the shapes in my code to the images.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/shortnorth.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4098\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/shortnorth-284x300.png\" alt=\"shortnorth\" width=\"499\" height=\"527\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/shortnorth-284x300.png 284w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/shortnorth-972x1024.png 972w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a> <a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/grandview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4099\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/grandview-300x225.png\" alt=\"grandview\" width=\"501\" height=\"375\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/grandview-300x225.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/grandview-1024x768.png 1024w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/grandview-624x467.png 624w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a> <a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/germanvillage.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-4097 aligncenter\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/germanvillage-300x272.png\" alt=\"germanvillage\" width=\"500\" height=\"453\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/germanvillage-300x272.png 300w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/germanvillage-624x566.png 624w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/germanvillage.png 1012w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Next, I had to work on adding interactivity.\u00a0 This was the hardest part.\u00a0 First the issue was that the only way you could see the object (rocket) moving across the screen was if you pressed and HELD the spacebar.\u00a0 But I wanted it to just be pressed and done.\u00a0 I had a lot of trouble figuring this out and it kept saying \u2018error on \u2018void mouseClicked\u2019\u2019 for some reason.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-6.55.52-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-4101 aligncenter\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-6.55.52-PM-182x300.png\" alt=\"Screen Shot 2015-12-14 at 6.55.52 PM\" width=\"500\" height=\"824\" srcset=\"https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-6.55.52-PM-182x300.png 182w, https:\/\/astoryisnotatree.net\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-14-at-6.55.52-PM.png 476w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>I really enjoyed making the project because I was able to combine my interest of hand lettering with my code.\u00a0 I think that this creates a magic circle because it draws people around to form a community of interactions with the code.<\/p>\n<p>What went right:\u00a0 the way that I created this project was really helpful.\u00a0 To figure the code out first, and then insert the images really worked for me.\u00a0 Also, it turned out how I expected.<\/p>\n<p>What went wrong:\u00a0 It took me a long time to figure out the interactivity aspect of it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For Project #2, I chose to make a solar system of sorts with the cities\/neighborhoods where I live.\u00a0 This project probably had the most evolution from day one until the final product.\u00a0 Originally, I wanted to do something that had&#8230;<\/p>\n","protected":false},"author":76,"featured_media":4096,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[168],"tags":[188,175,179,53],"class_list":["post-4095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-interactive-city","tag-project-2","tag-public-interactive","tag-interactive-city","tag-post-mortem","wpcat-168-id"],"_links":{"self":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/4095","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\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4095"}],"version-history":[{"count":3,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/4095\/revisions"}],"predecessor-version":[{"id":12981,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/4095\/revisions\/12981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/4096"}],"wp:attachment":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}