{"id":72808,"date":"2022-09-24T17:59:15","date_gmt":"2022-09-24T21:59:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72808"},"modified":"2022-09-24T18:07:36","modified_gmt":"2022-09-24T22:07:36","slug":"project-4-string-art-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/24\/project-4-string-art-3\/","title":{"rendered":"Project 4 &#8211; 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>Clicking on the canvas allows the user to iterate through the 3 string art drawings, while holding the left mouse down shows all 3 of them overlaid on each other.<\/p>\n\n\n\n\n\n<style>\ndiv {text-align: center;}\n<\/style><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-354.js\" data-width=\"400\" data-height=\"300\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/ Tsz Wing Clover Chau\n\/\/ Section E\n\nfunction setup() {\n    createCanvas(400, 300);\n    background(255);\n}\n\nvar counter = 0;\nvar showCounter = 0;\nvar m = 1;\nvar n = 10;\nvar n2 = n*2;\n\n\nfunction draw() {\n    noFill();\n\n    var cx = width\/2;\n    var cy = height\/2;\n\n    var dy1 = (height\/n2)*m;      \/\/ dimensions for drawing 1\n    var dx1 = (width\/n2)*m;\n\n    var dx2 = width\/(2*n);        \/\/ dimensions for drawing 2\n    var dy2 = height\/(6*n);\n    var dx3 = width\/(6*n);\n    var dy3 = height\/(2*n);\n    \n    var size1 = min(width, height)*(4\/5);         \/\/ dimensions for drawing 3\n    var sx1 = width\/5;\n    var sy1 = height\/10;\n    var sx2 = width*4\/5;\n    var sy2 = height*9\/10;\n\n    var dx4 = size1\/(2*n);\n    var dy4 = dx4;\n\n    var size2 = min(width, height)*(3\/5);\n    var sx3 = (width-size2)\/2;\n    var sy3 = (height-size2)\/2;\n    var sx4 = width-sx3;\n    var sy4 = height - sy3\n\n    var dx5 = size2\/(2*n);\n    var dy5 = dx5;\n\n    if (counter %3 == 0){         \/\/ drawing 1\n        background(255);\n        for (var i = 0; i &lt;= n2; i++){\n            stroke(231, 111, 81);\n            line(dx1*i, 0, width, dy1*i);\n            stroke(233, 196, 106);\n            line(width, dy1*i, width-(dx1*i), height);\n            stroke(42, 157, 143);\n            line(width - (dx1*i), height, 0, height - (dy1*i));\n            stroke(38, 70, 83);\n            line(0, height-(dy1*i), dx1*i, 0);\n        }\n\n    } else if (counter % 3 == 1){         \/\/ drawing 2\n        background(255);\n\n        for (var j = 0; j &lt;= n; j++){\n            stroke(38, 70, 83);\n            line(cx+(dx2*j), cy+(dy2*j), width*(2\/3)-(dx3*j), dy3*j);\n            line(cx-(dx2*j), cy-(dy2*j), width*(2\/3)-(dx3*j), dy3*j);\n            stroke(233, 196, 106);\n            line(cx-(dx2*j), cy-(dy2*j), (width\/3)+(dx3*j), height-(dy3*j));\n            line(cx+(dx2*j), cy+(dy2*j), (width\/3)+(dx3*j), height-(dy3*j));\n        }\n    } else {                              \/\/ drawing 3\n        background(255);\n        for (var k = 0; k &lt; n; k++){\n\n            stroke(42, 157, 143);\n            line(cx-(dx5*k), cy+(dy5*k), sx3+(dx5*k), sy4);\n            line(cx-(dx5*k), cy+(dy5*k), sx3, sy4-(dy5*k));\n            line(cx+(dx5*k), cy-(dy5*k), sx4-(dx5*k), sy3);\n            line(cx+(dx5*k), cy-(dy5*k), sx4, sy3+(dy5*k));\n            line(cx, sy3, sx4, sy3);\n            line(sx4, sy3, sx4, cy);\n            line(cx, sy4, sx3, sy4);\n            line(sx3, cy, sx3, sy4);\n            \n            stroke(244, 162, 97);\n            line(cx-(dx4*k), cy-(dy4*k), sx1+(dx4*k), sy1);\n            line(cx-(dx4*k), cy-(dy4*k), sx1, sy1+(dy4*k));\n            line(cx+(dx4*k), cy+(dy4*k), sx2, sy2-(dy4*k));\n            line(cx+(dx4*k), cy+(dy4*k), sx2-(dx4*k), sy2);\n            line(cx, sy1, sx1, sy1);\n            line(sx1, sy1, sx1, cy);\n            line(cx, sy2, sx2, sy2);\n            line(sx2, cy, sx2, sy2);\n        }\n    }\n\n    showAll();\n    if (showCounter &gt; 15){                \/\/ all 3 drawings\n        background(255);\n        stroke(38, 70, 83);\n        for (var i = 0; i &lt;= n2; i++){\n            line(dx1*i, 0, width, dy1*i);\n            line(width, dy1*i, width-(dx1*i), height);\n            line(width - (dx1*i), height, 0, height - (dy1*i));\n            line(0, height-(dy1*i), dx1*i, 0);\n        }\n\n        for (var k = 0; k &lt;= n; k++){\n            stroke(142, 202, 230);\n            line(cx+(dx2*k), cy+(dy2*k), width*(2\/3)-(dx3*k), dy3*k);\n            line(cx-(dx2*k), cy-(dy2*k), width*(2\/3)-(dx3*k), dy3*k);\n            stroke(42, 157, 143);\n            line(cx-(dx2*k), cy-(dy2*k), (width\/3)+(dx3*k), height-(dy3*k));\n            line(cx+(dx2*k), cy+(dy2*k), (width\/3)+(dx3*k), height-(dy3*k));\n\n            stroke(233, 196, 106);\n            line(cx-(dx5*k), cy+(dy5*k), sx3+(dx5*k), sy4);\n            line(cx-(dx5*k), cy+(dy5*k), sx3, sy4-(dy5*k));\n            line(cx+(dx5*k), cy-(dy5*k), sx4-(dx5*k), sy3);\n            line(cx+(dx5*k), cy-(dy5*k), sx4, sy3+(dy5*k));\n            line(cx, sy3, sx4, sy3);\n            line(sx4, sy3, sx4, cy);\n            line(cx, sy4, sx3, sy4);\n            line(sx3, cy, sx3, sy4);\n            \n            stroke(231, 111, 81);\n            line(cx-(dx4*k), cy-(dy4*k), sx1+(dx4*k), sy1);\n            line(cx-(dx4*k), cy-(dy4*k), sx1, sy1+(dy4*k));\n            line(cx+(dx4*k), cy+(dy4*k), sx2, sy2-(dy4*k));\n            line(cx+(dx4*k), cy+(dy4*k), sx2-(dx4*k), sy2);\n            line(cx, sy1, sx1, sy1);\n            line(sx1, sy1, sx1, cy);\n            line(cx, sy2, sx2, sy2);\n            line(sx2, cy, sx2, sy2);\n        }\n    } \n}\n\n\nfunction mouseClicked(){\n    counter ++;\n}\n\n\nfunction showAll(){\n    if (mouseIsPressed){\n        showCounter ++;\n    } else {\n        showCounter = 0;\n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Clicking on the canvas allows the user to iterate through the 3 string art drawings, while holding the left mouse down shows all 3 of them overlaid on each other. sketch \/\/ Tsz Wing Clover Chau \/\/ Section E function setup() { createCanvas(400, 300); background(255); } var counter = 0; var showCounter = 0; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/24\/project-4-string-art-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 4 &#8211; String Art&#8221;<\/span><\/a><\/p>\n","protected":false},"author":708,"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\/f2022\/wp-json\/wp\/v2\/posts\/72808"}],"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\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72808"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72808\/revisions"}],"predecessor-version":[{"id":72818,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72808\/revisions\/72818"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}