{"id":67734,"date":"2021-10-16T21:45:48","date_gmt":"2021-10-17T01:45:48","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67734"},"modified":"2021-10-16T21:45:48","modified_gmt":"2021-10-17T01:45:48","slug":"project-07-composition-with-curves-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-5\/","title":{"rendered":"Project 07: Composition with Curves"},"content":{"rendered":"\n

project 07 sketch copy<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var nPoints = 100;\n\nfunction setup() {\n\tcreateCanvas(480, 480);\n}\n\nfunction draw() {\n\tbackground(153,0,76);\n\t\n\t\/\/centered in the middle of the canvas \n\ttranslate(240, 240);\n\trotate(mouseX\/50);\n\t\n\t\/\/drawing the functions created \n\tstrokeWeight(4);\n\tnoFill();\n\tstroke(255);\n\tdrawHypotrochoidCurve();\n\tstroke(40,63,141);\n\tdrawEpitrochoidCurve();\n}\n\n\/\/Hypotrochoid Curve\nfunction drawHypotrochoidCurve() {\n\n\tvar x;\n\tvar y;\n\tvar a = map(mouseX, 0, width, 0, 100);\n\tvar b = a \/ 10;\n\tvar h = constrain(mouseY, 0, height, 0, 250);\n\n\t\/\/curve formula\n\tbeginShape();\n\tfor (var j = 0; j < nPoints; j ++) {\n\t\t var t = map(j, 0, nPoints, 0, TWO_PI);\n\t\t x = (a - b) * cos(t) + h * cos(((a - b) \/ b) * t);\n\t\t y = (a - b) * sin(t) - h * sin(((a - b) \/ b) * t);\n\t\t vertex(x, y);\n\t}\n\tendShape();\n} \n\n\/\/Epitrochoid Curve\nfunction drawEpitrochoidCurve() {\n\n\tvar x;\n\tvar y;\n\tvar a = map(mouseX\/5, 0, width, 0, 100);\n\tvar b = a \/ 10;\n\tvar h = constrain(mouseY\/5, 0, height, 0, 250);\n\n\t\/\/curve formula \n\tbeginShape();\n\tfor (var j = 0; j < nPoints; j ++) {\n\t\t var t = map(j, 0, nPoints, 0, TWO_PI);\n\t\t x = (a + b) * cos(t) - h * cos(((a + b) \/ b) * t);\n\t\t y = (a + b) * sin(t) - h * sin(((a + b) \/ b) * t);\n\t\t vertex(x, y);\n\t}\n\tendShape();\n}<\/code><\/pre><\/p>\n\n\n\n<p>I enjoyed the straightforward nature of this assignment. For the two curves I chose, the Mathworld website provided clear formulas to use. It was interesting to play around with the constrain and map functions and see how the alterations of my curves changed as I, for instance, divided the width by 10 or multiplied the mouseX by 5. I also added in some rotation. In the project, as you move the mouse from left to right, the curves become more compressed. As you change the mouseY value, the curves become smaller and change in shape. I wanted to have the curves look smooth at some points (such that they look like two squiggly lines) and then more angular at other positions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"473\" height=\"473\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.05.09-PM.png\" alt=\"\" class=\"wp-image-67753\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.05.09-PM.png 473w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.05.09-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.05.09-PM-150x150.png 150w\" sizes=\"(max-width: 473px) 85vw, 473px\"><figcaption>This is what the curves look like when the mouse is in the upper right hand corner.<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"477\" height=\"475\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.06.00-PM.png\" alt=\"\" class=\"wp-image-67754\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.06.00-PM.png 477w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.06.00-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-8.06.00-PM-150x150.png 150w\" sizes=\"(max-width: 477px) 85vw, 477px\"><figcaption><meta charset=\"utf-8\">This is what the curves look like when the mouse is in the middle right side.<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I enjoyed the straightforward nature of this assignment. For the two curves I chose, the Mathworld website provided clear formulas to use. It was interesting to play around with the constrain and map functions and see how the alterations of my curves changed as I, for instance, divided the width by 10 or multiplied the … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 07: Composition with Curves”<\/span><\/a><\/p>\n","protected":false},"author":651,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67734"}],"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\/651"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67734"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67734\/revisions"}],"predecessor-version":[{"id":67755,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67734\/revisions\/67755"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}