{"id":67639,"date":"2021-10-16T15:14:52","date_gmt":"2021-10-16T19:14:52","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67639"},"modified":"2021-10-16T15:14:52","modified_gmt":"2021-10-16T19:14:52","slug":"project-07-composition-with-curves","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves\/","title":{"rendered":"Project 07: Composition with Curves"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-85.js\">curves<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var points = 100;\n\nfunction setup() {\n    createCanvas(400, 400);\n}\n\nfunction draw() {    \n    background(map(mouseX, 0, width, 50, 0)); \/\/ background color goes from grey -&gt; black as mouse moves to the right\n    translate(width\/2, height\/2); \/\/ move origin to center\n    hypotrochoid(); \/\/ draw the curve   \n}\n\nfunction hypotrochoid() {\n    \/\/ https:\/\/mathworld.wolfram.com\/Hypotrochoid.html\n    var x; \n    var y;\n    var a = map(mouseX, 0, width, 50, 80); \/\/ radius of fixed circle\n    var b = map(mouseY, 0, height, 0.1, 1); \/\/ radius of circle rolling around fixed circle\n    var h = mouseX\/2; \/\/ distance from center of interior circle\n    strokeWeight(map(mouseX, 0, width, 0.1, 3)); \/\/ stroke weight increases as mouse moves to the right\n    stroke(mouseX, 100, mouseY);\n    noFill();\n    beginShape();\n    for (var i = 0; i &lt;= points; i ++) {\n        var t = map(i, 0, points, 0, TWO_PI);\n        x = (a - b) * cos(t) + (h * cos(((a - b)\/b) * t));\n        y = (a - b) * sin(t) - (h * sin(((a - b)\/b) * t));\n        vertex(x, y);\n    }\n    endShape();\n}\n\n\n<\/code><\/pre><\/div>\n\n\n<p>I started the project by just browsing all the different curves in mathworld and coding them to see how they look on the canvas. I ended up settling on the <meta charset=\"utf-8\"><a href=\"https:\/\/mathworld.wolfram.com\/Hypotrochoid.html\">Hypotrochoid<\/a> curve. The sample curve on the website actually didn&rsquo;t seem very interesting, but once I allowed the parameters to change based on the mouse&rsquo;s position, the curve had a lot more details and got much more complicated. It was quite incredible to see how the curve changes as the mouse cross the canvas. Here are some screenshots of the different looks: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"798\" height=\"800\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.47.53-PM.png\" alt=\"\" class=\"wp-image-67642\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.47.53-PM.png 798w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.47.53-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.47.53-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.47.53-PM-768x770.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><figure class=\"wp-block-image\"><img src=\"blob:https:\/\/courses.ideate.cmu.edu\/412c454a-d64b-42d3-b95a-b1215842a8bb\" alt=\"\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"790\" height=\"792\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.50.05-PM.png\" alt=\"\" class=\"wp-image-67646\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.50.05-PM.png 790w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.50.05-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.50.05-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-10.50.05-PM-768x770.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"796\" height=\"796\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.06.57-PM-1.png\" alt=\"\" class=\"wp-image-67645\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.06.57-PM-1.png 796w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.06.57-PM-1-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.06.57-PM-1-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.06.57-PM-1-768x768.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p>The changes are quite drastic, so it&rsquo;s interesting that they were all produced by the same equation. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>curves var points = 100; function setup() { createCanvas(400, 400); } function draw() { background(map(mouseX, 0, width, 50, 0)); \/\/ background color goes from grey -&gt; black as mouse moves to the right translate(width\/2, height\/2); \/\/ move origin to center hypotrochoid(); \/\/ draw the curve } function hypotrochoid() { \/\/ https:\/\/mathworld.wolfram.com\/Hypotrochoid.html var x; var y; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67639"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67639"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67639\/revisions"}],"predecessor-version":[{"id":67647,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67639\/revisions\/67647"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}