{"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\u2026but I couldn\u2019t 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 \u2013 but then I realized I didn\u2019t want to create new objects within the sketch in that way\u2026I 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 \u2013 <a href=\"https:\/\/processing.org\/tutorials\/2darray\/\">creating a 2D array<\/> (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 \u201cif else\u201d statements and trying to adjustment the number of states\u2026but 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 \u2013 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\u2026then 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\u2019t get anything to happen. I also played around with the mouseOver() function, but wasn\u2019t 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>\u2013 honestly, I couldn\u2019t have asked a better person. Looking at her code I realized that trying to work with hard coded numbers wasn\u2019t working and that I would need to use my variables. (In retrospect this seems rather obvious, but eh, I\u2019m learning.) Once I got that specific line of code right, I played around with it\u2019s 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\u2026I 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\u2019t switch the else state, so it appeared like the blank squares wouldn\u2019t change (because\u2026they didn\u2019t). 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\u2019d 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\u2019t 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\u2026but I couldn\u2019t 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}]}}