{"id":66572,"date":"2021-09-26T19:31:20","date_gmt":"2021-09-26T23:31:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66572"},"modified":"2021-09-26T19:31:20","modified_gmt":"2021-09-26T23:31:20","slug":"project-04-string-art-13","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/26\/project-04-string-art-13\/","title":{"rendered":"Project-04: String Art"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-189.js\">kstargio-04-proj<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-189.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ coordinated for basic star shape:\n\/\/lineA:\nvar lineAx1 = 0\nvar lineAy1 = 0\nvar lineAx2 = 0\nvar lineAy2 = -125\n\/\/lineB:\nvar lineBx1 = 119\nvar lineBy1 = -39\nvar lineBx2 = 0\nvar lineBy2 = 0\n\/\/lineC:\nvar lineCx1 = 0\nvar lineCy1 = 0\nvar lineCx2 = 73\nvar lineCy2 = 101\n\/\/lineD:\nvar lineDx1 = -73\nvar lineDy1 = 101\nvar lineDx2 = 0\nvar lineDy2 = 0\n\/\/lineE:\nvar lineEx1 = 0\nvar lineEy1 = 0\nvar lineEx2 = -119\nvar lineEy2 = -39\n\n\/\/distance for string art end points variables initialized:\nvar dx1;\nvar dy1;\nvar dx2;\nvar dy2;\nvar numLines = 40;\t\/\/number of string art lines in each 'shape'\nvar rot = 0\t\t\/\/rotation effect (DISABLED bc of noLoop() call; comment out noLoop() to see rotation)\n\/\/ color variables for shading effect:\nvar r = 0;\nvar g = 50;\nvar b = 100;\n\nfunction setup() {\n    createCanvas(400, 300);\n    background(200);\n}\n\nfunction draw() {\n    background(200);\t\t\t\t\t\/\/ called for rotation effect\n\ttranslate(width\/2, height\/2);\t\t\/\/ center canvas\n\t\/\/rotation effect (DISABLED while noLoop() is activated):\n\trotate(radians(rot));\n\trot += 1;\n\t\/\/ color variables for shade change effect re-defined after each rotation:\n\tr = 0;\n\tg = 50;\n\tb = 100;\n\t\/\/lines to create basic star shape, coordinates set by variables:\n    line(lineAx1, lineAy1, lineAx2, lineAy2);\n    line(lineBx1, lineBy1, lineBx2, lineBy2);\n    line(lineCx1, lineCy1, lineCx2, lineCy2);\n    line(lineDx1, lineDy1, lineDx2, lineDy2);\n    line(lineEx1, lineEy1, lineEx2, lineEy2);\n\t\/\/ drawLines() called to create the string art effect:\n\tdrawLines(lineAx1, lineAy1, lineAx2, lineAy2, lineBx1, lineBy1, lineBx2, lineBy2);\n\tdrawLines(lineBx1, lineBy1, lineBx2, lineBy2, lineCx1, lineCy1, lineCx2, lineCy2);\n\tdrawLines(lineCx1, lineCy1, lineCx2, lineCy2, lineDx1, lineDy1, lineDx2, lineDy2);\n\tdrawLines(lineDx1, lineDy1, lineDx2, lineDy2, lineEx1, lineEy1, lineEx2, lineEy2);\n\tdrawLines(lineEx2, lineEy2, lineEx1, lineEy1, lineAx1, lineAy1, lineAx2, lineAy2);\n    \/\/ comment noLoop() out to see roration:\n    noLoop();\n}\n\n\t\/\/drawLines function made for string art effect, takes x and y coordinates of both connecting lines (8 parameters):\nfunction drawLines(line1x1, line1y1, line1x2, line1y2, line2x1, line2y1, line2x2, line2y2) {\n    \/\/ set distance between end points for string lines:\n    dx1 = (line1x2-line1x1)\/numLines;\n    dy1 = (line1y2-line1y1)\/numLines;\n    dx2 = (line2x2-line2x1)\/numLines;\n    dy2 = (line2y2-line2y1)\/numLines;\n\t\/\/initialize variables for string line end points:\n    var x1 = line1x1;\n    var y1 = line1y1;\n    var x2 = line2x1;\n    var y2 = line2y1;\n\t\/\/ string lines drawn until specified number of lines is hit:\n    for (var i = 0; i &lt;= numLines; i += 1) {\n\t\tstroke(r, g, b);\n        line(x1, y1, x2, y2);\n\t\t\/\/ string line variables update to create string art effect:\n        x1 += dx1;\n        y1 += dy1;\n        x2 += dx2;\n        y2 += dy2;\n\t\t\/\/color effect:\n        if (i &lt;= numLines\/2) {\n\t\t\tr += 255\/numLines;\n\t\t\tg -= 255\/numLines;\n\t\t\tb += 100\/numLines;\n\t\t} else {\n\t\t\tr -= 255\/numLines;\n\t\t\tg += 255\/numLines;\n\t\t\tb -= 100\/numLines;\n\t\t}\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p>I decided to do a star shape for this project, and I&rsquo;ve attached an image of my initial sketches. It took me a while to figure out how I wanted to use the &lsquo;string art&rsquo; style, but I like the outcome that this method created. <\/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_2052-2-768x1024.jpg\" alt=\"\" class=\"wp-image-66584\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-225x300.jpg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2052-2-scaled.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Initial sketches to visualize a star with the &lsquo;string art&rsquo; style.<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>kstargio-04-projDownload \/\/ coordinated for basic star shape: \/\/lineA: var lineAx1 = 0 var lineAy1 = 0 var lineAx2 = 0 var lineAy2 = -125 \/\/lineB: var lineBx1 = 119 var lineBy1 = -39 var lineBx2 = 0 var lineBy2 = 0 \/\/lineC: var lineCx1 = 0 var lineCy1 = 0 var lineCx2 = 73 var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/26\/project-04-string-art-13\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-04: String Art&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66572"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66572"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66572\/revisions"}],"predecessor-version":[{"id":66585,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66572\/revisions\/66585"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}