{"id":67982,"date":"2021-10-18T00:00:04","date_gmt":"2021-10-18T04:00:04","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67982"},"modified":"2021-10-18T00:00:04","modified_gmt":"2021-10-18T04:00:04","slug":"project-composition-with-curves","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/18\/project-composition-with-curves\/","title":{"rendered":"Project: 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><p>For this project, I was excited to explore different types of curves and how you can create new ones through simple interactions. I started off my process by looking at and trying different curves in Sublime to see which ones were the most interesting to change. I also spent some time plugging mouseX and mouseY into different parts of the equation to see how they changed. I found it interesting that curves can look completely different based on which variables were changed. For instance, I used a Cayley&rsquo;s Sextic curve for one of my curves, which looks like a rounded heart. However, when you control the ratio multiplied by cosine, it changes the number of curves and their rotation so it looks like a flower. <\/p>\n\n\n\n<p>Astroid curve in different phases:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"954\" height=\"952\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.42-PM.png\" alt=\"\" class=\"wp-image-67987\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.42-PM.png 954w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.42-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.42-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.42-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"952\" height=\"946\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.52-PM.png\" alt=\"\" class=\"wp-image-67988\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.52-PM.png 952w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.52-PM-300x298.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.52-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.52-PM-768x763.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"946\" height=\"946\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.31.02-PM.png\" alt=\"\" class=\"wp-image-67989\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.31.02-PM.png 946w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.31.02-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.31.02-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.31.02-PM-768x768.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><\/p>\n\n\n\n<p>Cayley&rsquo;s Sextic in different phases:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"944\" height=\"946\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.12-PM.png\" alt=\"\" class=\"wp-image-67990\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.12-PM.png 944w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.12-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.12-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.12-PM-768x770.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"942\" height=\"942\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.24-PM.png\" alt=\"\" class=\"wp-image-67991\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.24-PM.png 942w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.24-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.24-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.30.24-PM-768x768.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"954\" height=\"944\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.32.17-PM.png\" alt=\"\" class=\"wp-image-67992\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.32.17-PM.png 954w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.32.17-PM-300x297.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-11.32.17-PM-768x760.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-126.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl@andrew.cmu.edu\n\/\/Section D\n\/\/jianingl_07_Project\n\nvar type = 1 \/\/keeps track of current type of curve\n\n\/\/draws two different types of curves that changes with mousePressed\nfunction setup() {\n    createCanvas(480, 480);\n}\n\nfunction draw() {\n    \/\/checks for current curve\n    if (type == 1) {\n        drawSextic();\n    } else if (type == 2) {\n        drawAstroid();\n    }\n}\n\nfunction drawAstroid() {\n    \/\/Astroid\n    \/\/https:\/\/mathworld.wolfram.com\/Astroid.html\n    \/\/creates a circular form with curves around the circumference\n    var red = min(mouseX, 255); \n    var green = min(mouseY, 255); \n    fill(red, green, 0);\n    noStroke();\n    translate(width\/2,height\/2); \n    background(0);\n    beginShape();\n    var x ;\n    var y ;\n\n    var b = map(mouseY, 0, 480, 10, 20); \/\/controls number of curves around circumference\n    var a = constrain(mouseX, 0, width\/2); \/\/controls size of circle curve\n    rotate(radians(mouseY\/3));\n    for (i = 0; i &lt; 480; i++) {\n        var theta = map(i,0,480, 0, TWO_PI); \n        x = (a-b)*cos(theta) + b*cos((a-b)\/b*(theta));\n        y = (a-b)*sin(theta) - b*cos((a-b)\/b*(theta));\n        vertex(x,y);\n    }\n    endShape();\n\n}\n\nfunction drawSextic() {\n    \/\/Cayley's Sextic\n    \/\/https:\/\/mathworld.wolfram.com\/CayleysSextic.html\n    \/\/creates a flower form with different numbers of petals\n    push();\n    var blue= min(mouseX, 255);\n    var red = min(mouseY, 255);\n    translate(width\/2,height\/2);\n    fill(red,0,blue);\n    noStroke();\n    background(0);\n    beginShape();\n    var x ;\n    var y ;\n\n    var b = map(mouseY, 0, 480, 0, 1); \/\/controls rotation and number of petals\n    var a = map(mouseX, 0, width, 0, 150); \/\/controls size of form\n    rotate(radians(mouseY\/5));\n    for (i = 0; i &lt; 480; i++) {\n        var theta = map(i, 0, 480, 0, PI * 3);\n        x = (3*a*pow(cos((1\/b)*theta),3)*cos(theta));\n        y = (3*a*pow(cos((1\/b)*theta),3)*sin(theta));\n        vertex(x,y);\n    }\n    endShape();\n    pop();\n}\n\nfunction mousePressed() {\n    \/\/switches current curve when mouse is pressed\n    if (type == 1) {\n        type += 1\n    } else if (type == 2) {\n        type = 1\n    }\n}<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I was excited to explore different types of curves and how you can create new ones through simple interactions. I started off my process by looking at and trying different curves in Sublime to see which ones were the most interesting to change. I also spent some time plugging mouseX and mouseY &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/18\/project-composition-with-curves\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":654,"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\/67982"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67982"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67982\/revisions"}],"predecessor-version":[{"id":67995,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67982\/revisions\/67995"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}