{"id":66338,"date":"2021-09-23T15:22:46","date_gmt":"2021-09-23T19:22:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66338"},"modified":"2021-09-23T15:22:46","modified_gmt":"2021-09-23T19:22:46","slug":"project-04-string-art","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/23\/project-04-string-art\/","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><p><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-164.js\">String Art Project<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-164.js\" class=\"wp-block-file__button\" download>Download<\/a>\n\n\n\n<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\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 04: String Art\n\n\n\nfunction setup ()\n{\n    createCanvas (400, 300);\n}\n\nfunction draw ()\n{\n    background (0);\n    if (mouseIsPressed)\n    {\n        background(255);\n    }\n    var x = 100;\n    var y = 100;\n    var dist = 50;\n    var num = 5;\n\n    push();\n    translate (100, 75);\n\/\/white lines\n    for (y = 10; y &lt;= 300; y += 5)\n    {\n        strokeWeight (4);\n        rotate (radians (-num + 180));\n        stroke (255);\n        if (mouseIsPressed)\n        {\n            stroke(0);\n        }\n        line (x + dist, y + dist, min (mouseX, 300), y);\n        strokeWeight (.5);\n        dist -= 1;\n    }\n\n\/\/purple lines\n    for (y = 100; y &lt;= 200; y += .5)\n    {\n        rotate (radians (num));\n        stroke (76, 0, 153);\n        if (mouseIsPressed)\n        {\n            stroke (179, 255, 102);\n        }\n        line (constrain (mouseX, 50, 350), y, x + dist, y + dist);\n        dist -= 5;\n    }\n\/\/light blue lines\n    for (y = 200; y &lt;= 400; y += 1)\n    {\n        rotate (radians (num));\n        stroke (0, 255, 255);\n        if (mouseIsPressed)\n        {\n            stroke (255, 0, 0);\n        }\n        line (min (mouseX, 400), y, x + dist, y + dist);\n    }\n    pop();\n\n\/\/white string in larger black circle\n    push ();\n    translate (300, 200);\n    fill (0);\n    if (mouseIsPressed)\n    {\n        fill (255);\n    }\n\/\/big circle\n    ellipse (0, 0, 250, 250);\n    for (var k = 0; k &lt; 100; k+= 1)\n    {\n        rotate (radians (num));\n        stroke (255, 220, 255);\n\/\/when mouseIsPressed, colors invert\n\/\/and new strings are drawn\n        if (mouseIsPressed)\n        {\n            stroke (0);\n            for (var a = 0; a &lt; 40; a ++)\n            {\n                rotate (radians (1));\n                line (2, 10, 10 + min (mouseX\/10, 40), 30);\n\n            }\n            push ();\n            translate (-100, -50);\n            for (var a = 0; a &lt; 40; a ++)\n            {\n                stroke (100, 255, 100);\n                rotate (radians (4));\n                line (2, 10, 10 + min (mouseX\/10, 40), 30);\n\n            }\n            pop();\n            noFill();\n            ellipse (0, 0, 220, 220);\n            ellipse (0, 0, 180, 180);\n            ellipse (0, 0, 140, 140);\n        }\n        line (25, 0, 25 + mouseY\/5, 45);\n    }\n    pop ();\n\n\/\/string in smaller black circle\n    push();\n    translate (180, 275);\n    fill (0);\n    if (mouseIsPressed)\n    {\n        fill (255);\n    }\n\/\/smaller circle\n    ellipse (0, 0, 100, 100);\n    for (var i = 0; i &lt; 100; i ++)\n    {\n        rotate (radians (num));\n        stroke (204, 204, 255);\n        if (mouseIsPressed)\n        {\n            stroke (51, 51, 0);\n            for (var a = 0; a &lt; 40; a ++)\n            {\n                rotate (radians (num));\n                line (15, 25, 15 + min (mouseX\/10, 20), 35);\n            }\n        }\n        line (15, 5, mouseY\/8, 30);\n        line (10, 5, min (mouseY, 50), min (mouseY, 50));\n    }\n    pop ();\n\n    if (mouseIsPressed)\n    {\n        push();\n        translate (mouseX, mouseY);\n\/\/circle of red string circles\n        for (var c = 0; c &lt;= 8; c ++)\n        {\n            translate (20, 20);\n            for (var b = 0; b &lt; 80; b ++)\n            {\n                stroke (255, 0, 0);\n                rotate (radians (num));\n                line (8, 8, 20, 20);\n                noStroke();\n            }\n        }\n        pop();\n    }\n}\n\n\n<\/code><\/pre><\/p><p>For this project, it was hard to figure out what I wanted to do, since I didn&rsquo;t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>String Art ProjectDownload \/\/Alana Wu \/\/ID: alanawu \/\/Project 04: String Art function setup () { createCanvas (400, 300); } function draw () { background (0); if (mouseIsPressed) { background(255); } var x = 100; var y = 100; var dist = 50; var num = 5; push(); translate (100, 75); \/\/white lines for (y = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/23\/project-04-string-art\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 04 String Art&#8221;<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/66338"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66338"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66338\/revisions"}],"predecessor-version":[{"id":66341,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66338\/revisions\/66341"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}