{"id":67585,"date":"2021-10-15T13:48:05","date_gmt":"2021-10-15T17:48:05","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67585"},"modified":"2021-10-15T13:48:05","modified_gmt":"2021-10-15T17:48:05","slug":"curves","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/15\/curves\/","title":{"rendered":"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>I decided to chose the Devil&rsquo;s Curve for my project, mostly because I liked the way it looked. It was very hard at first because I have not been in a math class in years, to figure out what each part of my equations did. At first I had a problem where my signs were wrong and only had the crunode show up. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"640\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-1024x640.png\" alt=\"\" class=\"wp-image-67587\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-1024x640.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-300x188.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-768x480.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-1536x960.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-2048x1280.png 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.35.21-PM-1200x750.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>bad ()s<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"640\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-1024x640.png\" alt=\"\" class=\"wp-image-67588\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-1024x640.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-300x188.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-768x480.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-1536x960.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-2048x1280.png 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-15-at-1.21.03-PM-1-1200x750.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>more bad ()s<\/figcaption><\/figure><p>I got stuck for a bit, but the project seemed simpler than I thought at first. To better understand and to play around with my curve to figure out how I should have it move, I was able to find an example of the curve and move it&rsquo;s a and b points on desmos. One thing I had already accidentally realized was that if a and b were equal they would make a circle and if a\/b was more or less than one rotated the crunode. I thought these properties were interesting so I wanted to attach my b value and a values to movements so that they would be able to both equal each other and be more than and less than. Doing this also allowed my curve to grow and shrink.<\/p>\n\n\n\n<p>The code works so so that mouseX and Y control a and b. They do the same thing to the numbers but depending on the position of the mouse on the page it controls rotation of the crunode and size.<\/p>\n\n\n\n<p><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-82.js\">file<\/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\">\/\/Georgia Miller\n\/\/Section D\n\/\/15-104\n\nnPoints = 400;\nfunction setup() {\n    createCanvas(400, 400);\n    frameRate(10);\n}\n\nfunction draw() {\n    background(255, 204, 255);\n    push();\n    translate(width \/ 2, height \/ 2);\n    drawDevilsCurve();\n}\n\nfunction drawDevilsCurve(){\n    \/\/https:\/\/mathworld.wolfram.com\/DevilsCurve.html\n    var x;\n    var y;\n    var a = 40;\n    var b = a * 1.75;\n    var h = mouseY \/ 2 ; \/\/ up and down to change crunode\n    \/\/this particular curve changes orientation based on if a\/b is bigger or larger than 1\n    var ph = mouseX \/ 2; \/\/ move mouse to right to grow\n\n    stroke(255, 0, 127);\n    strokeWeight(3);\n    fill(153, 153, 255);\n\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++){\n        var t = map(i, 0, nPoints, 0, TWO_PI); \/\/t = theta\n        x = cos(t) * sqrt((pow(a + ph, 2) * pow(sin(t), 2) \n         - pow(b + h * 2, 2) * pow(cos(t), 2)) \/ (pow(sin(t), 2) - pow(cos(t), 2)));\n        y = sin(t) * sqrt((pow(a + ph, 2) * pow(sin(t), 2)\n         - pow(b + h * 2, 2) * pow(cos(t), 2)) \/ (pow(sin(t), 2) - pow(cos(t), 2)));\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I decided to chose the Devil&rsquo;s Curve for my project, mostly because I liked the way it looked. It was very hard at first because I have not been in a math class in years, to figure out what each part of my equations did. At first I had a problem where my signs were &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/15\/curves\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":660,"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\/67585"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67585"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67585\/revisions"}],"predecessor-version":[{"id":67594,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67585\/revisions\/67594"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}