{"id":72050,"date":"2022-09-17T16:33:27","date_gmt":"2022-09-17T20:33:27","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72050"},"modified":"2022-09-29T22:00:43","modified_gmt":"2022-09-30T02:00:43","slug":"windows-style-dynamic-drawing","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/windows-style-dynamic-drawing\/","title":{"rendered":"Windows style dynamic drawing"},"content":{"rendered":"\n

I am trying to create a grid of circles and using my mouse cursor as an attraction point to control the size and color of the circles. The wavey movement of circles is created by changing the circle rotation angle based on the distance between the mouse cursor and the center of the circles.<\/p>\n\n\n\n

<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jason Jiang\n\/\/Section E\n\n\/\/Setting variables \nvar d = 40;\nvar size = d\/2;\nvar h = 0;\nvar s = 0;\nvar a = 0;\nfunction setup() {\n createCanvas(640, 450);\n angleMode(DEGREES);\n colorMode(HSB);\n \n}\n\nfunction draw() {\n background(0);\n fill(255);\n noStroke();\n \/\/Create Grid of circles using loop\n for (var x = d\/2 - d; x < width + d; x = x+d){\n for (var y = d\/2 - d; y < height + d; y = y+d){\n var dis = dist(x, y, mouseX, mouseY);\n \n \/\/Change Circle size according to distance\n \n \/\/Remap distance to circle center to angle\n size = map(dis, 0, (width^2+height^2)^0.5, 30, 1);\n\n \/\/Change Circle color according to distance\n \n \/\/Remap distance to circle center to color value\n h = map(dis, 0, (width^2+height^2)^0.5, 0, 255);\n s = map(dis, 0, (width^2+height^2)^0.5, 50, 100);\n fill(h, s, 100);\n \n\n \/\/Change circle rotation according to distance\n\n \/\/Remap distance to circle center to angle\n let a = map(dis, 0, (width^2+height^2)^0.5, 0, 360);\n push();\n translate(x, y);\n rotate(a);\n circle(10, 10, size);\n pop();\n }\n } \n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I am trying to create a grid of circles and using my mouse cursor as an attraction point to control the size and color of the circles. The wavey movement of circles is created by changing the circle rotation angle based on the distance between the mouse cursor and the center of the circles. \/\/Jason … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/windows-style-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Windows style dynamic drawing”<\/span><\/a><\/p>\n","protected":false},"author":723,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72050"}],"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\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72050"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72050\/revisions"}],"predecessor-version":[{"id":72056,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72050\/revisions\/72056"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}