{"id":74333,"date":"2022-10-14T12:33:46","date_gmt":"2022-10-14T16:33:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74333"},"modified":"2022-10-14T12:33:46","modified_gmt":"2022-10-14T16:33:46","slug":"rose-curve-augmented-hypocycloid","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/14\/rose-curve-augmented-hypocycloid\/","title":{"rendered":"rose curve + augmented hypocycloid"},"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>mouseX rotates and changes the size of the hypocycloid (thicker lines, filled shape). mouseY corresponds with n, which essentially determines the complexity of the curves. it took me a while to finish this because I was having too much fun spacing out while playing with it&hellip;<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-110.js\" data-width=\"400\" data-height=\"400\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/ jaden luscher\n\/\/ jluscher@andrew.cmu.edu\n\/\/ section a\n\/\/ project 07: composition with curves\n\/\/ HYPOCYCLOID PEDAL CURVE + ROSE CURVE\n\n\/\/ INITIALIZING VARIABLES\nvar nPoints = 250;\nvar n;\nvar a;\nvar q;\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(200);\n\n  frameRate(30);\n\n}\n\nfunction draw() {\n  background(\"orange\");\n  noFill();\n\n  q = constrain((mouseX \/ width), 0.1, 1.0);\n  p = constrain((mouseY \/ height), 0.1, 1.0);\n  n = int(p * 100);   \/\/ n corresponds to the curves' complexity\n  a = int(width * p * 10);    \/\/ \"radius\" of rose curve increades with mouseY\n  var c = 155 + (q * 100);  \/\/ fill color for hypocycloid\n\n  translate (width\/2, height\/2);\n  strokeWeight(q *20);    \/\/ stroke of hypocycloid corresponds to mouseX\n  stroke(\"white\");\n  fill(c, 0, c, 5);\n  for (i = 0; i &lt; nPoints\/10; i++) {\n    drawHypocycloid();\n    a = a *sqrt(q) - width*q;   \/\/ sqaure root causes many curve sizes to \"cross\"\n  }\n  a = int(width * p * 10);    \/\/ \"radius\" of rose curve increades with mouseY\n  stroke(\"white\");\n  strokeWeight(0.5);\n  rotate(PI * q);   \/\/ rose curve spins with mouseX\n  drawRoseCurve();\n}\n\n\nfunction drawHypocycloid() {\n  \/\/ hypocycloid pedal curve:\n  \/\/ https:\/\/mathworld.wolfram.com\/HypocycloidPedalCurve.html\n  push();\n\n  var x;\n  var y;\n  var r;\n\n  beginShape();\n  for (var i = 0; i &lt; nPoints; i++) {\n    var t = map(i, 0, nPoints, 0, TWO_PI);\/\/ sweep theta from 0 to two pi\n\n    \/\/ hypocycloid:\n    r = q * (n-2) * ((sin * (n \/ (n-2))) * (t + PI\/2));\n\n    x = a * (((n-1) * cos(t) + cos((n-1) * t)) \/ n);\n    y = a * (((n-1) * sin(t) + sin((n-1) * t)) \/ n);\n    vertex(x, y);\n  }\n  endShape(CLOSE);\n  pop();\n}\n\n\nfunction drawRoseCurve() {\n  \/\/ rose curve\n  \/\/ https:\/\/mathworld.wolfram.com\/RoseCurve.html\n\n  push();\n  var x;\n  var y;\n  var r;\n\n  beginShape();\n  for (var i = 0; i &lt; nPoints; i++) {\n    var t = map(i, 0, nPoints, 0, TWO_PI);\/\/ sweep theta from 0 to two pi\n    r = a * p  * cos(n * t);\n\n\/\/ pasted from hypercycloid\n    x = r * cos(t);\n    y = r * sin(t);\n    vertex(x, y);\n  }\n  endShape(CLOSE);\n  pop();\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>mouseX rotates and changes the size of the hypocycloid (thicker lines, filled shape). mouseY corresponds with n, which essentially determines the complexity of the curves. it took me a while to finish this because I was having too much fun spacing out while playing with it&hellip; sketch \/\/ jaden luscher \/\/ jluscher@andrew.cmu.edu \/\/ section a &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/14\/rose-curve-augmented-hypocycloid\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;rose curve + augmented hypocycloid&#8221;<\/span><\/a><\/p>\n","protected":false},"author":741,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74333"}],"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\/741"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74333"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74333\/revisions"}],"predecessor-version":[{"id":74334,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74333\/revisions\/74334"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}