{"id":74576,"date":"2022-10-15T21:42:25","date_gmt":"2022-10-16T01:42:25","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74576"},"modified":"2022-10-15T21:47:22","modified_gmt":"2022-10-16T01:47:22","slug":"project-07-composition-with-curves-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-07-composition-with-curves-3\/","title":{"rendered":"Project-07: 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><div><a class=\"p5_sketch_link\" data-height=\"480\" data-width=\"480\" id=\"wp-block-file--media-8ad8d5cf-8db0-45db-83e2-9dc6f8acb4f3\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-137.js\">sketch curve<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-137.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-8ad8d5cf-8db0-45db-83e2-9dc6f8acb4f3\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/*\nSandy Youssef; \nsection D; \nsyoussef@andrew.cmu.edu;\nProject-07;\n*\/\n\nfunction setup() {\n    createCanvas(480, 480);\n    frameRate(6);\n    \n}\n\nfunction draw() {\n    \/\/ Epicloid Curve\n    \/\/https:\/\/mathworld.wolfram.com\/Epicycloid.html\n    background(255);\n    drawEpicloid1();\n    drawEpicloid2();\n    drawEpicloid3(); \n    drawEpicloid4();\n    drawEpicloid5();\n    drawEpicloid6();\n    drawEpicloid7();\n    drawEpicloid8();\n\n\n}\n\nfunction drawEpicloid1() {\n\/\/curve located at the top right that moves according to mouse Y \npush();\n    translate( width\/2-100, height\/2-100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle that moves around bigger circle to create points\n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseY\/50\n    fill(255, 0, 0, 50); \/\/ transparent pink\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(theta) - b * cos (theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (theta) - b * sin (theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid2() {\n\/\/ same curve as drawEpicloid1 but moves in opposite direction\npush();\n    translate( width\/2-100, height\/2-100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseY\/50\n    fill(200, 210, 0,50); \/\/transparent yellow\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) \/b * move);\n        vertex(x,y);\n    \n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid3() {\n\/\/ curve located at top right that moves according to mouse X\npush();\n    translate( width\/2+100, height\/2-100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseX\/50\n    fill(200, 210, 0,50); \/\/ transparent yellow\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(theta) - b * cos (theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (theta) - b * sin (theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid4() {\n\/\/ same curve as drawEpicloid3 but moves in opposite direction according to mouse X\npush();\n    translate( width\/2+100, height\/2-100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseX\/50\n    fill(200, 0, 0,100); \/\/ brighter pink\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid5() {\n\/\/ curve located in bottom right corner that moves according to mouse Y\npush();\n    translate( width\/2+100, height\/2+100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseY\/50\n    fill(200, 210, 0,50); \/\/ transparent yellow\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(theta) - b * cos (theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (theta) - b * sin (theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid6() {\n\/\/ same curve as drawEpicloid5 but moves in opposite direction according to mouse Y\npush();\n    translate( width\/2+100, height\/2+100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseY\/50\n    fill(0, 210, 0,50); \/\/ transparent green\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n}\n\nfunction drawEpicloid7() {\n\/\/ curve located in bottom left corner that moves according to mouse X\npush();\n    translate( width\/2-100, height\/2+100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseX\/50\n    fill(0, 250, 0,130); \/\/ brighter transparent green\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(theta) - b * cos (theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (theta) - b * sin (theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n\n}\n\nfunction drawEpicloid8() {\n\/\/ same curve as drawEpicloid7 but moves in opposite direction according to mouse X\npush();\n    translate( width\/2-100, height\/2+100);\n    var x; \n    var y; \n\n    var a = 20;; \/\/ radius of smaller circle \n    var b = a * 3;  \/\/ radius\n    var theta = 30;\n    var move = mouseX\/50\n    fill(200, 210, 0,50); \/\/transparent yellow\n    beginShape();\n    for (var i = 0; i &lt; 100; i ++) {\n        var theta = map ( i , 0, 100, 0, TWO_PI);\n        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) \/b * move);  \/\/ mathematical formula for the curve\n        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) \/b * move);\n        vertex(x,y);\n    }\n    endShape(CLOSE);\n    pop();\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch curveDownload \/* Sandy Youssef; section D; syoussef@andrew.cmu.edu; Project-07; *\/ function setup() { createCanvas(480, 480); frameRate(6); } function draw() { \/\/ Epicloid Curve \/\/https:\/\/mathworld.wolfram.com\/Epicycloid.html background(255); drawEpicloid1(); drawEpicloid2(); drawEpicloid3(); drawEpicloid4(); drawEpicloid5(); drawEpicloid6(); drawEpicloid7(); drawEpicloid8(); } function drawEpicloid1() { \/\/curve located at the top right that moves according to mouse Y push(); translate( width\/2-100, height\/2-100); var x; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-07-composition-with-curves-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-07: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":776,"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\/f2022\/wp-json\/wp\/v2\/posts\/74576"}],"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\/776"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74576"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74576\/revisions"}],"predecessor-version":[{"id":74587,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74576\/revisions\/74587"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}