{"id":67825,"date":"2021-10-16T23:01:28","date_gmt":"2021-10-17T03:01:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67825"},"modified":"2021-10-16T23:01:28","modified_gmt":"2021-10-17T03:01:28","slug":"project-07-composition-with-curves-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-6\/","title":{"rendered":"Project 07 &#8211; 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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-111.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=\"\" height=\"\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/* Nami Numoto\n * Section A\n * mnumoto@andrew.cmu.edu\n * Project 07 - Composition with Curves\n *\/\n\nvar nPoints = 100;\nvar CYCLOID = 0;\n\nfunction setup() {\n    createCanvas(480, 480);\n    frameRate(10);\n}\n\nfunction draw() {\n    background(0);\n    \/\/ draw the curve in the middle and iterate 3x\n    translate(width \/ 2, height \/ 2);\n    for (i = 0; i &lt; 3; i ++) {\n        drawCycloid();\n        rotate(90);\n    }\n    rotate(mouseX \/ 50);\n}\n\nfunction drawCycloid() {\n    \/\/ Cycloid:\n    \/\/ https:\/\/mathworld.wolfram.com\/Cycloid.html\n    \n    var x;\n    var y;\n    \n    var a = constrain(mouseX \/ 2, 0, 200);\n    var b = constrain(mouseY \/ 2, 0, 200);\n\n    stroke(240, 3, 252);\n    noFill();\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        var t = map(i, 0, nPoints, 0, TWO_PI);\n        x = a * (t - sin(t));\n        y = a * (1 - cos(t));\n        vertex(x, y);\n    }\n    endShape();\n}<\/code><\/pre><\/div>\n\n\n\n<p>I had a hard time figuring out the math behind the functions, but well, I guess I ended up getting it in the end. It&rsquo;s not very fancy, but I iterated a Cycloid function three times to make a sort of 3-way yin&amp;yang, minus the outer circle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-1024x1024.png\" alt=\"\" class=\"wp-image-67827\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-1024x1024.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-768x769.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702-1200x1201.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0702.png 1395w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Cycloid function without any transformations<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"1019\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-1024x1019.png\" alt=\"\" class=\"wp-image-67828\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-1024x1019.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-300x298.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-768x764.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701-1200x1194.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0701.png 1372w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Started constraining x and y to mouseX and mouseY and rotating the canvas with mouseX<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"998\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703-998x1024.png\" alt=\"\" class=\"wp-image-67829\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703-998x1024.png 998w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703-292x300.png 292w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703-768x788.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703-1200x1232.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/0703.png 1360w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>3 iterations with aforementioned constraints and transformations<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/* Nami Numoto * Section A * mnumoto@andrew.cmu.edu * Project 07 &#8211; Composition with Curves *\/ var nPoints = 100; var CYCLOID = 0; function setup() { createCanvas(480, 480); frameRate(10); } function draw() { background(0); \/\/ draw the curve in the middle and iterate 3x translate(width \/ 2, height \/ 2); for (i = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07 &#8211; Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":663,"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\/67825"}],"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\/663"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67825"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67825\/revisions"}],"predecessor-version":[{"id":67830,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67825\/revisions\/67830"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}