{"id":66535,"date":"2021-09-26T00:38:01","date_gmt":"2021-09-26T04:38:01","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66535"},"modified":"2021-09-26T00:53:19","modified_gmt":"2021-09-26T04:53:19","slug":"project-04-string-art-10","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/26\/project-04-string-art-10\/","title":{"rendered":"Project 04 – String Art"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Gia Marino\n\/\/gnmarino\n\/\/section D\n\nvar dx1;\nvar dy1;\nvar dx2;\nvar dy2;\nvar numLines = 50; \/\/how many lines drawn between line 1 and line 2\n\nfunction setup() {\n createCanvas(400, 300);\n background(200);\n \n}\n\nfunction draw() {\n\n\n \/\/draw bottom left string art - line 1: (0, 0) (0, 300) line 2: (0, 300) (400, 300)\n\n drawStringArt(0, 0, 0, height, 0, height, width, height);\n\n \/\/draw bottom right string art - line 1: (0, 300) (400, 300) line 2: (400, 300) (400, 0)\n\n drawStringArt(0, height, width, height, width, height, width, 0);\n\n \/\/draw top right string art - line 2: (400, 300, 400, 0, 400, 0, 0, 0)\n\n drawStringArt(width, height, width, 0, width, 0, 0, 0);\n\n \/\/draw top left string art - line 2: (400, 0, 0, 0, 0, 0, 0, 300)\n\n drawStringArt(width, 0, 0, 0, 0, 0, 0, height);\n \n noLoop();\n}\n\n \/\/function that creates string art shape\nfunction drawStringArt(ix1, iy1, ix2, iy2, ix3, iy3, ix4, iy4) {\n\n line(ix1, iy1, ix2, iy2); \/\/line 1 \n line(ix3, iy3, ix4, iy4); \/\/line 2 \n\n dx1 = (ix2-ix1)\/numLines; \/\/change in x variables in line 1\n dy1 = (iy2-iy1)\/numLines; \/\/change in y variables in line 1\n dx2 = (ix4-ix3)\/numLines; \/\/change in x variables in line 2\n dy2 = (iy4-iy3)\/numLines; \/\/change in y variables in line 2 \n\n \/\/repeats drawing lines to make string art\n \/\/starts at the beginning of line 1 and line 2 \n \/\/finishes shape at the end of line 1 and line 2\n\n for (var i = 0; i <= numLines; i += 1) {\n\n line(ix1, iy1, ix3, iy3);\n ix1 += dx1;\n iy1 += dy1;\n ix3 += dx2;\n iy3 += dy2;\n } \n}\n\n\n<\/code><\/pre><\/p>\n\n\n\nI feel like the most difficult part of this project was understanding the math and then understanding how the code works. This was necessary for me to create code that was more readable and now it is very easy to add onto. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-768x1024.jpeg\" alt=\"\" class=\"wp-image-66537\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-768x1024.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-225x300.jpeg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-1152x1536.jpeg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-1536x2048.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2-1200x1600.jpeg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_D48980CBC0CF-1-2.jpeg 1620w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>A picture of my process of figuring out the math and how I wanted the piece to look<\/figcaption><\/figure><\/p>\n\n\n\n<\/p>\n\n\n\n<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"sketch \/\/Gia Marino \/\/gnmarino \/\/section D var dx1; var dy1; var dx2; var dy2; var numLines = 50; \/\/how many lines drawn between line 1 and line 2 function setup() { createCanvas(400, 300); background(200); } function draw() { \/\/draw bottom left string art – line 1: (0, 0) (0, 300) line 2: (0, 300) (400, … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/26\/project-04-string-art-10\/\" class=\"more-link\">Continue reading “Project 04 – String Art”<\/span><\/a><\/p>\n","protected":false},"author":658,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[102,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66535"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66535"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66535\/revisions"}],"predecessor-version":[{"id":66541,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66535\/revisions\/66541"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}