{"id":67946,"date":"2021-10-17T21:36:41","date_gmt":"2021-10-18T01:36:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67946"},"modified":"2021-10-17T21:36:41","modified_gmt":"2021-10-18T01:36:41","slug":"project-07-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/project-07-3\/","title":{"rendered":"Project-07"},"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 chose to use two curves in my project. both are hypocycloids, which I think are very interesting curves. However, while they are both hypocycloids, they behave very differently from each other. The one in the center never overlaps itself each time it is drawn; However, each time the outer curve is drawn it crossed over itself a bunch of times due to the parameters it is given. This causes a cool effect to be visualized on the canvas. I also think the colors work well together.<\/p>\n\n\n\n<div><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-123.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\">var nPoints = 100;\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(200,50,86);\n}\n\nfunction draw() {\n    \n        push();\n        translate(240, 240);\n        Hypotrochoid();\n        Astroid();\n        pop();\n\n}\n\nfunction Astroid() {\n    \/\/housekeeping\n    c = color(map(mouseX, 0,480, 0, 255), map(mouseY, 0,480, 150, 200),map(mouseY+mouseY, 0, 960, 0, 255))\n    stroke(c);\n    strokeWeight(3);\n    noFill();\n\n    \/\/asteroid equation\n    var a = int(map(mouseY, 0, width, 4, 20));\n    var b = int(map(mouseX, 0, width, 0, 100));\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++){\n        angle = map(i, 0, nPoints, 0, radians(360));\n        x = (b \/ a) * ((a - 1) * cos(angle) + cos((a - 1) * angle));\n        y = (b \/ a) * ((a - 1) * sin(angle) - sin((a - 1) * angle));\n        vertex(x,y);\n    }\n    endShape();\n\n}\n\nfunction Hypotrochoid() {\n    \/\/housekeeping\n    c = color(map(mouseX, 0,480, 150, 200), map(mouseY, 0,480, 0, 255),map(mouseY+mouseY, 0, 960, 0, 255))\n    stroke(c);\n    strokeWeight(1);\n    noFill();\n\n    \/\/ hypotrochoid equation\n    var a = map(mouseY, 0, 480, 0, 250);\n    var b = 5\n    var h = map(mouseX, 0, 480, 2, 105);\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++ ) {\n        var angle = map(i, 0, nPoints, 0, radians(360));\n         x = (a - b) * cos(angle) + h * cos((a - b) * (angle \/ b));\n         y = (a - b) * sin(angle) - h * sin((a - b) * (angle \/ b));\n        vertex(x, y);\n    }\n\n  endShape();\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I chose to use two curves in my project. both are hypocycloids, which I think are very interesting curves. However, while they are both hypocycloids, they behave very differently from each other. The one in the center never overlaps itself each time it is drawn; However, each time the outer curve is drawn it crossed &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/project-07-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-07&#8221;<\/span><\/a><\/p>\n","protected":false},"author":659,"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\/f2021\/wp-json\/wp\/v2\/posts\/67946"}],"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\/659"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67946"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67946\/revisions"}],"predecessor-version":[{"id":67951,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67946\/revisions\/67951"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}