{"id":74626,"date":"2022-10-16T12:42:58","date_gmt":"2022-10-16T16:42:58","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74626"},"modified":"2022-10-16T12:42:58","modified_gmt":"2022-10-16T16:42:58","slug":"curve","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/curve\/","title":{"rendered":"Curve"},"content":{"rendered":"\n

This is my curve project. I am using mouseX to control the rotation, scale, and color of curves while using mouseY to control the number of iterations. Also, when you click, the curve changes. I really like how Hypocychoid and Epitrochoid are constructed and how different iterations of them overlap one another. <\/p>\n\n\n\n

\"\" — Different iterations for Hypocychoid <\/figcaption><\/figure>
Hypocycloid<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jason Jiang\n\/\/Section E\n\n\/\/Setting up variables\nvar nPts = 200;\nvar a = 80;\nvar N;\nvar b\nvar x;\nvar y;\nvar crvMode = 1;\n\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(10)\n colorMode(HSB);\n }\n \n\n\nfunction draw() { \n \/\/Mapping mouseY value to number of iterations\n N = map(mouseY, 0, height, 0, 25);\n b = a\/N;\n background(0);\n\n \/\/Draw Hypocychoid\n if (crvMode%2 == 0) {\n for(var i = 3; i <= N; i++) {\n \/\/Decreasing strokeWeight each iteration\n strokeWeight(2-i*0.05)\n\n \/\/Changing color according to mouseX\n stroke(255-mouseX*0.1, 100-i, 200-i*5)\n crv1(i);\n stroke(255-mouseX*0.1, 100-i, 100-i*5)\n crv1(PI+i);\n }\n} \n \/\/Draw Epitrochoid\n else {\n for(var i = 3; i <= N; i++){ \n \/\/Decreasing strokeWeight each iteration\n strokeWeight(2-i*0.05)\n \n \/\/Changing color according to mouseX\n stroke(mouseX*0.1, 100-i, 200-i*5)\n crv2(i);\n stroke(mouseX*0.1, 100-i, 100-i*5)\n crv2(PI+i);\n }\n }\n}\n\n\/\/Hypocychoid\nfunction crv1(m) {\n \/\/Changing scale and rotation according to mouseX\n h = map(mouseX, 0, width, 1, 2, true)*m*0.05;\n angle = map(mouseX, 0, width, 0, PI);\n \n push()\n translate(width\/2, height\/2);\n \n \/\/Rotate curve according to mouseX\n rotate(angle + m);\n\n \/\/Drawing curves\n noFill();\n beginShape()\n \n for(var i = 0; i < nPts; i++){\n var t1 = map(i, 0, nPts, 0, TWO_PI)\n var t2 = t1*(a-b)\/b\n x = h*((a-b)*cos(t1)+b*cos(t2))\n y = h*((a-b)*sin(t1)-b*sin(t2))\n\n \/\/Adding random movement to the curve\n vertex(random(x+4, x-4), random(y+4, y-4));\n }\n endShape(CLOSE);\n pop();\n}\n\n\/\/Epitrochoid\nfunction crv2(m) {\n \/\/Changing scale and rotation according to mouseX\n h = map(mouseX, 0, width, 1, 2, true)*m*0.05;\n angle = map(mouseX, 0, width, 0, TWO_PI);\n \n push()\n translate(width\/2, height\/2);\n\n \/\/Rotate curve according to mouseX\n rotate(angle + m);\n\n \/\/Drawing curves\n noFill();\n beginShape()\n\n for(var i = 0; i < nPts; i++){\n var t1 = map(i, 0, nPts, 0, TWO_PI)\n var t2 = t1*(a-b)\/b\n x = h*((a-b)*cos(t1)+b*sin(t2))\n y = h*((a-b)*sin(t1)-b*cos(t2))\n vertex(x, y);\n }\n endShape(CLOSE)\n pop();\n}\n\n\/\/Change curves when press mouse\nfunction mousePressed(){\n crvMode++\n print(crvMode);\n}\n \n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my curve project. I am using mouseX to control the rotation, scale, and color of curves while using mouseY to control the number of iterations. Also, when you click, the curve changes. I really like how Hypocychoid and Epitrochoid are constructed and how different iterations of them overlap one another. Hypocycloid \/\/Jason Jiang … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/curve\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Curve”<\/span><\/a><\/p>\n","protected":false},"author":723,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74626"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74626"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74626\/revisions"}],"predecessor-version":[{"id":74630,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74626\/revisions\/74630"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}