{"id":66361,"date":"2021-09-24T12:09:54","date_gmt":"2021-09-24T16:09:54","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66361"},"modified":"2021-09-24T12:09:54","modified_gmt":"2021-09-24T16:09:54","slug":"project-4-string-art","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/24\/project-4-string-art\/","title":{"rendered":"Project 4: 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-height=\"300\" data-width=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-165.js\">sketch<\/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\">\/\/Anthony Pan\n\/\/Section C\nvar 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; \n\nvar numLines = 30;\n\n\nfunction setup() {\n    createCanvas(400, 300);\n    background(0);\n\n    \/\/left of circle change in x\/y\n    dx1 = (280)\/numLines;\n    dy1 = (70)\/numLines;\n    dx2 = (120)\/numLines;\n    dy2 = (150)\/numLines;\n\n    \/\/top of circle change in x\/y\n    dx3 = (150)\/numLines;\n    dy3 = (320)\/numLines;\n    dx4 = (90)\/numLines;\n    dy4 = (90)\/numLines;\n\n    \/\/top right of circle change in x\/y\n    dx5 = (250)\/numLines;\n    dy5 = (20)\/numLines;\n    dx6 = (40)\/numLines;\n    dy6 = (150)\/numLines;\n\n    \/\/bottom of circle change in x\/y\n    dx7 = (70)\/numLines;\n    dy7 = (120)\/numLines;\n    dx8 = (20)\/numLines;\n    dy8 = (300)\/numLines;\n\n    \/\/right of circle change in x\/y\n    dx9 = (220)\/numLines;\n    dy9 = (120)\/numLines;\n    dx10 = (80)\/numLines;\n    dy10 = (150)\/numLines;\n\n    \/\/bottom right of circle change in x\/y\n    dx11 = (240)\/numLines;\n    dy11 = (10)\/numLines;\n    dx12 = (105)\/numLines;\n    dy12 = (60)\/numLines;\n\n    \/\/bottom left of circle change in x\/y\n    dx13 = (80)\/numLines;\n    dy13 = (140)\/numLines;\n    dx14 = (20)\/numLines;\n    dy14 = (300)\/numLines;\n\n\n}\n\nfunction draw() {\n    \/\/ellipse(width\/2, height\/2, 120, 120) \/\/ellipse for reference\n\n    \/\/left of circle start points\n    var x1 = 130;\n    var y1 = 5;\n    var x2 = 130;\n    var y2 = 230;\n\n    \/\/top of circle start points\n    var x3 = 0;\n    var y3 = 100;\n    var x4 = 250;\n    var y4 = 85;\n\n    \/\/top right of circle start points\n    var x5 = 273;\n    var y5 = 5; \n    var x6 = 273;\n    var y6 = 230;\n\n    \/\/bottom of circle start points\n    var x7 = 125;\n    var y7 = 210;\n    var x8 = 400;\n    var y8 = 210;\n\n    \/\/right of circle start points\n    var x9 = 220;\n    var y9 = 40;\n    var x10 = 280;\n    var y10 = 180;\n\n    \/\/bottom right of circle start points\n    var x11 = 240;\n    var y11 = 10;\n    var x12 = 270;\n    var y12 = 210;\n\n    \/\/bottom left of circle start points\n    var x13 = 160;\n    var y13 = 200;\n    var x14 = 230;\n    var y14 = 220;\n\n\n    for (var i = 0; i &lt;= numLines; i += 1) { \n        stroke(220, 20, 0);\n\n        \/\/creating red vortex around a circle\n\n        line(x1, y1, x2, y2); \/\/left of circle\n        x1 += dx1;\n        x2 -= dx2;\n        y1 += dy1;\n        y2 -= dy2;\n\n        line(x3, y3, x4, y4); \/\/top of cirlce\n        x3 -= dx3;\n        y3 -= dy3;\n        x4 += dx4;\n        y4 += dy4;\n\n        line(x5, y5, x6, y6); \/\/top right of circle  \n        x5 -= dx5;\n        y5 += dy5;\n        x6 += dx6;\n        y6 -= dy6;\n\n        line(x7, y7, x8, y8); \/\/bottom of circle\n        x7 -= dx7;\n        y7 -= dy7;\n        x8 += dx8;\n        y8 += dy8;\n\n        line(x9, y9, x10, y10); \/\/right side\n        x9 += dx9;\n        y9 -= dy9;\n        x10 -= dx10;\n        y10 += dy10;\n\n        line(x11, y11, x12, y12); \/\/bottom right\n        x11 += dx11;\n        y11 -= dy11;\n        x12 -= dx12;\n        y12 += dy12;\n\n        line(x13, y13, x14, y14); \/\/bottom left\n        x13 -= dx13;\n        y13 -= dy13;\n        x14 += dx14;\n        y14 += dy14;\n\n    }\n\n    noLoop();\n\n}\n\n\n\n\n\n    <\/code><\/pre><\/div>\n\n\n\n<p>Creating a vortex around an ellipse using string art <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C var dx1; var dy1; var dx2; var dy2; var dx3; var dy3; var dx4; var dy4; var dx5; var dy5; var dx6; var dy6; var dx7; var dy7; var dx8; var dy8; var dx9; var dy9; var dx10; var dy10; var dx11; var dy11; var dx12; var dy12; var dx13; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/24\/project-4-string-art\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 4: String Art&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"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\/66361"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66361"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66361\/revisions"}],"predecessor-version":[{"id":66364,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66361\/revisions\/66364"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}