{"id":66404,"date":"2021-09-25T18:04:39","date_gmt":"2021-09-25T22:04:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66404"},"modified":"2021-09-25T18:04:39","modified_gmt":"2021-09-25T22:04:39","slug":"project-04-string-art-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/25\/project-04-string-art-3\/","title":{"rendered":"Project 04: String Art"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Tim Nelson-Pyne\n\/\/tnelsonp\n\/\/Section C\n\n\/\/shape 1\nvar ax1;\nvar ay1;\nvar ax2;\nvar ay2;\n\n\/\/shape 2\nvar by1;\nvar bx1;\nvar by2;\nvar bx2;\n\n\/\/shape 3\nvar cy1;\nvar cx1;\nvar cy2;\nvar cx2;\n\nvar numLines = 2;\nvar angle = 0;\n\n\/\/controls green value\nvar g = 0;\nvar gMod = 0;\n\n\/\/controls blue value\nvar b = 0;\nvar bMod = 0;\n\nfunction setup() {\n createCanvas(400, 300);\n background(0);\n \n \/\/shape 1\n ax1 = (100)\/numLines;\n ay1 = (0)\/numLines;\n ax2 = (100)\/numLines;\n ay2 = (0)\/numLines;\n\n \/\/shape 2\n bx1 = (0)\/numLines;\n by1 = (0)\/numLines;\n bx2 = (0)\/numLines;\n by2 = (0)\/numLines;\n\n \/\/shape 3\n cx1 = (100)\/numLines;\n cy1 = (0)\/numLines;\n cx2 = (0)\/numLines;\n cy2 = (0)\/numLines;\n \n}\n\nfunction draw() {\n\n \/\/if you hold down the mouse it makes the canvas rotate around your mouse position\n if (mouseIsPressed == true){\n translate(mouseX, mouseY);\n rotate(radians(angle));\n angle += 1;\n }\n \n\n \/\/brings green levels up and down based on sin() graph\n \/\/maped between zero and 255\n gMod += 0.01;\n g = sin(gMod);\n g = map(g, -1, 1, 0, 255);\n\n \/\/brings blue levels up and down based on cos() graph\n \/\/maped between zero and 255\n bMod += 0.01;\n b = cos(bMod);\n b = map(b, -1, 1, 0, 255);\n\n\n \/\/set stroke color and weight\n stroke(255, g, b);\n strokeWeight(.25);\n\n var x1 = min(mouseX, width);\n var y1 = min(mouseY, 246);\n var x2 = 0;\n var y2 = 0;\n\n \/\/shape 1\n for (var i = 0; i <= numLines; i += 1) {\n line(x1, y1, x2, y2);\n x1 += ax1;\n y1 += ay1;\n x2 += ax2;\n y2 += ay2;\n }\n\n\n \/\/green to zero for shape 2\n g = 0;\n stroke(255, g, b);\n\n var x1 = width;\n var y1 = map(mouseY, 0, height, 250, height);\n var x2 = 0;\n var y2 = map(mouseY, 0, height, 250, height);\n\n \/\/shape 2\n for (var i = 0; i <= numLines; i += 1) {\n line(x1, y1, x2, y2);\n x1 += bx1;\n y1 += by1;\n x2 += bx2;\n y2 += by2;\n }\n\n \n \/\/set blue to zero for shape 3 and return green to sin() based value\n b = 0;\n g = sin(gMod);\n g = map(g, -1, 1, 0, 255);\n stroke(255, g, b);\n\n var x1 = min(mouseX, width);\n var y1 = constrain(mouseY, 150, 246);\n var x2 = width;\n var y2 = 150;\n\n \/\/shape 3\n for (var i = 0; i <= numLines; i += 1) {\n line(x1, y1, x2, y2);\n x1 += cx1;\n y1 += cy1;\n x2 += cx2;\n y2 += cy2;\n }\n \n\n\n}<\/code><\/pre><\/p>\n\n\n\n<p>I chose to make some interactive string art. Moving the cursor around changes the drawing and clicking and dragging changes it even more. I also decided to incorporate shifting colors to make the drawing change a bit more over time.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Tim Nelson-Pyne \/\/tnelsonp \/\/Section C \/\/shape 1 var ax1; var ay1; var ax2; var ay2; \/\/shape 2 var by1; var bx1; var by2; var bx2; \/\/shape 3 var cy1; var cx1; var cy2; var cx2; var numLines = 2; var angle = 0; \/\/controls green value var g = 0; var gMod = 0; … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/25\/project-04-string-art-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 04: String Art”<\/span><\/a><\/p>\n","protected":false},"author":662,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[102,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66404"}],"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\/662"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66404"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66404\/revisions"}],"predecessor-version":[{"id":66406,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66404\/revisions\/66406"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}