{"id":233,"date":"2015-10-07T04:18:17","date_gmt":"2015-10-07T04:18:17","guid":{"rendered":"http:\/\/www.zoebachman.net\/itp\/?p=233"},"modified":"2015-10-07T04:22:39","modified_gmt":"2015-10-07T04:22:39","slug":"icm-wk-5-multiple-sketches","status":"publish","type":"post","link":"http:\/\/www.zoebachman.net\/itp\/?p=233","title":{"rendered":"ICM, Wk 5: Got My Grid"},"content":{"rendered":"<p>I really wanted to get this Sol LeWitt grid down this week. It was killing me. I knew it involved nested loops and some form of multiplication&#8230;but I couldn&#8217;t figure out when I need nested for loops and exactly where they should go in my code. Would I need them every time I had a for loop in relation to my array?<\/p>\n<p>Played around with the some of the new code we learned in class for creating new objects in arrays &#8211; but then I realized I didn&#8217;t want to create new objects within the sketch in that way&#8230;I just wanted it to repeat them very specifically.<\/p>\n<p>I brought what I had to Shiffman and he let me know that I was on the right track. Mentioned two ways &#8211; <a href=\"https:\/\/processing.org\/tutorials\/2darray\/\">creating a 2D array&lt;\/&gt; (two arrays multiplied together, like a matrix!) or creating a really long array and using math to specify the location of an element (like with <\/a><a href=\"https:\/\/processing.org\/tutorials\/pixels\/\"> pixels!<\/a><a href=\"https:\/\/processing.org\/tutorials\/2darray\/\">. <\/a><\/p>\n<p>Went with the first option and ended up with this code:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/zoebachman\/3f27bab3d473fd5c8928.js\">\/\/ <![CDATA[\nand I got my grid! And each square would randomly have one line or another each time!\n\/\/ ]]><\/script><a href=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.11.18.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-236 aligncenter\" src=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.11.18-300x300.png\" alt=\"Screenshot 2015-10-07 00.11.18\" width=\"300\" height=\"300\" srcset=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.11.18-300x300.png 300w, http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.11.18-150x150.png 150w, http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.11.18.png 402w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Now that I had my grid, I wanted to add those other two possible states: a blank square or two intersecting diagonal lines. I messed around with adding &#8220;if else&#8221; statements and trying to adjustment the number of states&#8230;but kept running into issues. I asked second year Marc for some help and..well, things were not working out as he thought they would. Looked like I had accidentally created some infinite loops or something? Well, in the process of debugging I learned some neat tricks &#8211; like really using the consol print command to find my issues and how to have multiple cursors appear at once for quick multiple edits. After restarting a few times, trying it out on another computer and working at specifying the states for each if else statement and&#8230;then it worked!<\/p>\n<p><script src=\"https:\/\/gist.github.com\/zoebachman\/64981c94d76265716107.js\"><\/script><a href=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.13.08.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-237 aligncenter\" src=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.13.08-300x300.png\" alt=\"Screenshot 2015-10-07 00.13.08\" width=\"300\" height=\"300\" srcset=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.13.08-300x300.png 300w, http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.13.08-150x150.png 150w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a> Next, I wanted the squares to change in relation to my cursor location. I knew I would have to use some kind of mouse location specifier, like we did with the roll overs. But I couldn&#8217;t get anything to happen. I also played around with the mouseOver() function, but wasn&#8217;t getting any results. I saw my friend Renata, who I know to be code savvy, and asked her if she had any idea. Well, whadya know. Renata did <a href=\"http:\/\/www.gauirenata.com\/projects\/renataweek03\/\"> a very similar drawing in Week 3 <\/a>&#8211; honestly, I couldn&#8217;t have asked a better person. Looking at her code I realized that trying to work with hard coded numbers wasn&#8217;t working and that I would need to use my variables. (In retrospect this seems rather obvious, but eh, I&#8217;m learning.) Once I got that specific line of code right, I played around with it&#8217;s placement to a couple of interesting results. My favorite being: <a href=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.16.55.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-238 aligncenter\" src=\"http:\/\/www.zoebachman.net\/itp\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-07-00.16.55-300x300.png\" alt=\"Screenshot 2015-10-07 00.16.55\" width=\"300\" height=\"300\" \/><\/a> But&#8230;I needed my grid. So I found the right spot for it, plus altered some of the code so that each state would give a new result. Except at first I didn&#8217;t switch the else state, so it appeared like the blank squares wouldn&#8217;t change (because&#8230;they didn&#8217;t). So I switched around some of the content code and now if you hover the cursor over a square, it changes!<script src=\"https:\/\/gist.github.com\/zoebachman\/8989e693f24ffb30e6e7.js\"><\/script><\/p>\n<p style=\"text-align: center;\">\n<p><a href=\"http:\/\/zoebachman.net\/itp\/ICM\/bachman_week5_final\/\">final sketch<\/a><\/p>\n<p>Next Steps:<\/p>\n<p>What I&#8217;d like to try and do next is have it so that you can click on a square to alter its state\/contents of a square. I tried playing around with the mousePressed function a bit, but wasn&#8217;t finding much success.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I really wanted to get this Sol LeWitt grid down this week. It was killing me. I knew it involved nested loops and some form of multiplication&#8230;but I couldn&#8217;t figure out when I need nested for loops and exactly where &hellip; <a href=\"http:\/\/www.zoebachman.net\/itp\/?p=233\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[62,63,12],"class_list":["post-233","post","type-post","status-publish","format-standard","hentry","category-icm","tag-arrays","tag-grid","tag-sol-lewitt"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=233"}],"version-history":[{"count":6,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":243,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=\/wp\/v2\/posts\/233\/revisions\/243"}],"wp:attachment":[{"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zoebachman.net\/itp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}