{"id":67741,"date":"2021-10-16T20:33:25","date_gmt":"2021-10-17T00:33:25","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67741"},"modified":"2021-10-16T20:33:25","modified_gmt":"2021-10-17T00:33:25","slug":"project-7-composition-with-curves-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-7-composition-with-curves-2\/","title":{"rendered":"Project 7: Composition with Curves"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x1;\nvar y1;\nvar x;\nvar y;\nvar a;\nvar t;\nvar r;\nvar g;\nvar b;\nvar bcolor;\n\nfunction setup() {\n createCanvas(480, 480);\n let j = 700\n while (j > 0) {\n strokeWeight(0);\n j = j - 10\n bcolor = map(j, 700, 0, 0, 255);\n fill(bcolor);\n circle(240, 240, j);\n }\n}\n\nfunction draw() {\n stroke(r, g, b);\n strokeWeight(3);\n beginShape();\n for (var i = 0; i < 100; i++) {\n a = map(mouseX, 0, 480, 0, 100);\n t = map(mouseY, 0, 480, 0, 100);\n x1 = a * sin(t);\n y1 = a * sin(t) * cos(t);\n x = 240 + x1 * -1\n y = 240 + y1 * -1\n vertex(x, y);\n print(y);\n }\n endShape(CLOSE);\n}\n\nfunction mousePressed() {\n r = random(0, 255);\n g = random(0, 255);\n b = random(0, 255);\n}<\/code><\/pre><\/p>\n\n\n\n<p>As I started working on this project, I wanted the viewer to be able to “draw” the curves themselves. As MouseX changes, the size of the curve changes. As MouseY changes, different points are added on the curve. When the canvas is clicked, the color of the points change. If you manipulate the mouse in a certain way, you can make concentric figure 8s of varying colors. When I finished coding the curves and their mouse interaction, it still felt a little bland, so I added a circular gradient to the background to focus the eye gaze on the center of the canvas.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var x1; var y1; var x; var y; var a; var t; var r; var g; var b; var bcolor; function setup() { createCanvas(480, 480); let j = 700 while (j > 0) { strokeWeight(0); j = j – 10 bcolor = map(j, 700, 0, 0, 255); fill(bcolor); circle(240, 240, j); } } function … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-7-composition-with-curves-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 7: Composition with Curves”<\/span><\/a><\/p>\n","protected":false},"author":681,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67741"}],"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\/681"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67741"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67741\/revisions"}],"predecessor-version":[{"id":67764,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67741\/revisions\/67764"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}