{"id":66554,"date":"2021-09-26T17:05:07","date_gmt":"2021-09-26T21:05:07","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66554"},"modified":"2021-09-26T17:08:10","modified_gmt":"2021-09-26T21:08:10","slug":"project-4-string-art-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/26\/project-4-string-art-6\/","title":{"rendered":"Project 4: String Art"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var dx1;\nvar dy1;\nvar dx2;\nvar dy2;\nvar dx3;\nvar dy3;\nvar dx4;\nvar dy4;\nvar dx5;\nvar dy5;\nvar dx6;\nvar dy6;\nvar dx7;\nvar dy7;\nvar dx8;\nvar dy8;\nvar dx9;\nvar dy9;\nvar dx10;\nvar dy10;\nvar dx11;\nvar dy11;\nvar dx12;\nvar dy12;\nvar dx13;\nvar dy13;\nvar dx14;\nvar dy14;\nvar dx15;\nvar dy15;\nvar dx16;\nvar dy16;\nvar dx17;\nvar dy17;\nvar dx18;\nvar dy18;\nvar numLines = 30;\n\n\nfunction setup() {\n createCanvas(400, 400);\n background(\"yellow\");\n\n \/\/white middle strings\n dx1 = (180-50)\/numLines;\n dy1 = (250-150)\/numLines;\n dx2 = (270-340)\/numLines;\n dy2 = (200-100)\/numLines;\n \n \/\/left white strings\n dx3 = (150-110)\/numLines;\n dy3 = (150-100)\/numLines;\n dx4 = (260-300)\/numLines;\n dy4 = (140-50)\/numLines;\n\n \/\/middle white strings\n dx5 = (150-50)\/numLines;\n dy5 = (260-150)\/numLines;\n dx6 = (140-90)\/numLines;\n dy6 = (30-150)\/numLines;\n\n \/\/upper black strings\n dx7 = (230-100)\/numLines;\n dy7 = (280-350)\/numLines;\n dx8 = (350-150)\/numLines;\n dy8 = (180-280)\/numLines;\n\n \/\/loweer black strings\n dx9 = (320-200)\/numLines;\n dy9 = (250-50)\/numLines;\n dx10 = (200-250)\/numLines;\n dy10 = (300-30)\/numLines;\n\n \/\/left blue strings\n dx11 = (250-150)\/numLines;\n dy11 = (80-200)\/numLines;\n dx12 = (120-100)\/numLines;\n dy12 = (20-250)\/numLines;\n\n \/\/middle blue strings\n dx13 = (240-150)\/numLines;\n dy13 = (80-200)\/numLines;\n dx14 = (220-100)\/numLines;\n dy14 = (120-250)\/numLines;\n\n \/\/right blue strings\n dx15 = (240-150)\/numLines;\n dy15 = (80-200)\/numLines;\n dx16 = (220-100)\/numLines;\n dy16 = (120-250)\/numLines;\n\n}\n\nfunction draw() {\n var x1 = 50;\n var y1 = 150;\n\n var x2 = 270;\n var y2 = 200;\n\n var x3 = 50;\n var y3 = 150;\n\n var x4 = 20;\n var y4 = 150;\n\n var x5 = 100;\n var y5 = 180;\n\n var x6 = 90;\n var y6 = 350;\n\n var x7 = 300\n var y7 = 250;\n\n var x8 = 250;\n var y8 = 180;\n\n var x9 = 320;\n var y9 = 250;\n\n var x10 = 380;\n var y10 = 80;\n\n var x11 = 150;\n var y11 = 200;\n\n var x12 = 100;\n var y12 = 250;\n\n var x13 = 250;\n var y13 = 200;\n\n var x14 = 80;\n var y14 = 250;\n\n var x15 = 220;\n var y15 = 200;\n\n var x16 = 180;\n var y16 = 250;\n\n for (var i = 0; i <= numLines; i += 1) {\n stroke(\"white\")\n line(x1, y1, x2, y2);\n x1 += dx1;\n y1 += dy1;\n x2 -= dx2;\n y2 -= dy2;\n line(x3, y3, x4, y4);\n x3 -= dx3;\n y3 -= dx3;\n x4 += dx4;\n y4 += dy4;\n line(x5, y5, x6, y6);\n x5 -= dx5;\n y5 -= dx5;\n x6 += dx6;\n y6 += dy6;\n\n stroke(\"black\")\n line(x7, y7, x8, y8);\n x7 -= dx7;\n y7 -= dx7;\n x8 += dx8;\n y8 += dy8;\n line(x9, y9, x10, y10);\n x9 -= dx9;\n y9 -= dx9;\n x10 += dx10;\n y10 += dy10;\n\n stroke(\"blue\")\n line(x11, y11, x12, y12);\n x11 += dx11;\n y11 += dx11;\n x12 += dx12;\n y12+= dy12;\n\n line(x13, y13, x14, y14);\n x13 += dx13;\n y13 += dx13;\n x14 += dx14;\n y14+= dy14;\n\n line(x15, y15, x16, y16);\n x15 += dx15;\n y15 += dx15;\n x16 += dx16;\n y16+= dy16;\n\n\n\n }\n noLoop();\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>The difficult part of this project was understanding what numbers to change in order to get the shape that I wanted and why it changed, but when I did, I just kept adding to my canvas and adjusting the numbers to get the design I wanted.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The difficult part of this project was understanding what numbers to change in order to get the shape that I wanted and why it changed, but when I did, I just kept adding to my canvas and adjusting the numbers to get the design I wanted.<\/p>\n","protected":false},"author":653,"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\/66554"}],"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\/653"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66554"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66554\/revisions"}],"predecessor-version":[{"id":66560,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66554\/revisions\/66560"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}