Shirley Du P4<\/p>\n
Examples:<\/p>\n\n\n\n<\/figure><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\nvar dx;\nvar dy;\nvar dx2;\nvar dy2;\nvar numInterval1 = 12; \/\/number of intervals\nvar numInterval2 = 10; \/\/number of intervals\n\nfunction setup() {\n createCanvas(400, 400);\n}\n\nfunction draw() {\n background(0);\n\n \/\/the first series of strings\n stroke(189, 252, 83);\n string1(mouseX, mouseY);\n stroke(100);\n string2(mouseX, mouseY);\n\n push();\n translate(400, 0); \/\/translate the orgin to top right corner\n rotate(radians(90)); \/\/rotate to get the second series of strings in another color\n stroke(47, 109, 246);\n string1(mouseX, mouseY);\n stroke(100);\n string2(mouseX, mouseY);\n pop();\n\n push();\n translate(400, 400); \/\/translate the orgin to bottom right corner\n rotate(radians(180)); \/\/rotate to get the third series of strings in another color\n stroke(106, 214, 129);\n string1(mouseX, mouseY);\n stroke(100);\n string2(mouseX, mouseY);\n pop();\n\n push();\n translate(0, 400); \/\/translate the orgin to bottom left corner\n rotate(radians(270)); \/\/rotate to get the fourth series of strings in another color\n stroke(91, 196, 218);\n string1(mouseX, mouseY);\n stroke(100);\n string2(mouseX, mouseY);\n pop();\n}\n\n\/\/draw the small and grey central strings that follows the mouse\nfunction string2(x, y) {\n var dx2 = (dist(x, y, width\/2, y))\/numInterval1; \/\/strings horizontal interval\n var dy2 = (dist(x, y, x, height\/2))\/numInterval1; \/\/strings vertical interval\n for (var i = 0; i < numInterval1; i += 1){ \/\/use for loop to repeat the drawing process\n line(width\/2, y+dx2*i, width\/2+dx2*i+dx2, height\/2);\n line(width\/2, y, width\/2, height\/2);\n line(width\/2, height\/2, x, height\/2);\n }\n}\n\nfunction string1(x, y) {\n \/\/draw the bigger strings at one side of the canvas\n var dx = (height\/2)\/numInterval1; \/\/strings horizontal interval\n var dy = (width\/2)\/numInterval1; \/\/strings vertical interval\n for (var i = 0; i <= numInterval1; i += 1){ \/\/use for loop to repeat the drawing process\n line(0, dy*i-dy, dx*i, width\/2); \n line(0, height\/2, width\/2, height\/2)\n line(0, width\/2+dy*i+dy, width\/2-dx*i, height\/2);\n \n }\n\n \/\/draw the smaller strings that follows the mouse\n var dx2 = (dist(x, y, width\/2, y))\/numInterval2;\n var dy2 = (dist(x, y, x, height\/2))\/numInterval2;\n for (var i = 0; i < numInterval2; i += 1){ \/\/use for loop to repeat the drawing process\n line(width\/2+dx2*i, y, x, y+dx2*i+dx2);\n line(width\/2, y, x, y);\n line(x, y, x, height\/2);\n }\n\n}\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Shirley Du P4 sketch Examples: \/\/Xinyi Du \/\/15104 Section B var dx; var dy; var dx2; var dy2; var numInterval1 = 12; \/\/number of intervals var numInterval2 = 10; \/\/number of intervals function setup() { createCanvas(400, 400); } function draw() { background(0); \/\/the first series of strings stroke(189, 252, 83); string1(mouseX, mouseY); stroke(100); string2(mouseX, mouseY); … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/24\/project-04-string-art-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-04:\u00a0String Art”<\/span><\/a><\/p>\n","protected":false},"author":716,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[102,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72823"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72823"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72823\/revisions"}],"predecessor-version":[{"id":72883,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72823\/revisions\/72883"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Xinyi-Du-Project4-674x1024.png\")
<\/figure>