{"id":74499,"date":"2022-10-15T19:30:35","date_gmt":"2022-10-15T23:30:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74499"},"modified":"2022-10-15T19:30:35","modified_gmt":"2022-10-15T23:30:35","slug":"project-07-composition-with-curves-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-07-composition-with-curves-2\/","title":{"rendered":"Project-07: Composition with Curves"},"content":{"rendered":"\n

Reference Curve: Atzema Spiral<\/p>\n\n\n\n

Move the mouse up and down to change the rotation angle<\/p>\n\n\n\n

Move the mouse left and right to change the radius<\/p>\n\n

sketch<\/a>\n\n\n\n

\"\" — Examples<\/figcaption><\/figure><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\/\/xinyidu@andrew.cmu.edu\n\/\/Project-07\n\n\/\/Referrence Curve: Atzema Spiral\n\/\/move the mouse up and down to change the rotation angle\n\/\/move the mouse left and right to change radius\n\nfunction setup() {\n createCanvas(480, 480);\n background(250);\n}\n\nfunction draw() {\n background(0);\n \/\/draw the pair of lines that change with mouseX and mouseY\n lines1(mouseX, mouseY);\n lines2(mouseX, mouseY);\n}\n\n\/\/define the function to draw the lines\nfunction lines1 (R, A) {\n \/\/constrain the angle and radius and map them to specific ranges\n RR = constrain(R, 0, width);\n AA = constrain(A, 0, height);\n \/\/radius with the range(20, 20)\n r = map(RR, 0, width, 20, 50);\n \/\/angle within the range(50, 800)\n a = map(AA, 0, height, 50, 800);\n \n \/\/for loop to draw the lines and circles\n for (angle = 57.2957795; angle < 57.2957795+a; angle += 3) {\n push(); \/\/push to save the orgin tranformation\n\n \/\/translate the origin to (width\/3, width\/3)\n translate(width\/3, width\/3);\n \/\/polar coordinates according to Atzema Spiral\n var t = radians(angle);\n var x = x3+ r * ( sin(t)\/t - 2*cos(t) - t*sin(t) );\n var y = y3+ r * ( -cos(t)\/t - 2*sin(t) - t*cos(t) );\n \/\/another series of polar coordinates with 60 more degrees of angle\n var t2 = radians(angle+60);\n var x2 = x3 + (r) * ( sin(t2)\/t2 - 2*cos(t2) - t2*sin(t2) );\n var y2 = y3 + (r) * ( -cos(t2)\/t2 - 2*sin(t2) - t2*cos(t2) );\n \/\/reference circle polar coordinates\n var radius = 2*r; \/\/radius of the circle\n var x3 = radius * cos(radians(angle));\n var y3 = radius * sin(radians(angle));\n\n strokeWeight(0.5);\n \/\/purple and opacity 90 of the lines from center to polar coordinates\n stroke(183, 125, 255, 90);\n line(0, 0, x, y);\n \n \/\/blurish purple \n stroke(104, 81, 225); \n noFill();\n \n \/\/three circles\n ellipse(0, 0, radius*2, radius*2);\n ellipse(0, 0, radius*2+10, radius*2+10);\n ellipse(0, 0, radius*2+20, radius*2+20);\n\n \/\/blue\n stroke(1, 124, 228);\n \/\/lines from first series of polar coordinates to the second series\n line(x, y, x2, y2);\n \/\/lines from center to the reference circle\n line(0, 0, x3, y3);\n\n \/\/purple\n stroke(183, 125, 255)\n fill(183, 125, 255);\n \/\/small circles\n circle(x, y, 3);\n\n pop(); \/\/pop to return to the original setting of the origin \n }\n\n}\n \n\/\/rotate 180 degrees of the lines1\nfunction lines2 (R, A) {\n \/\/tranlate the origin\n translate(width, height);\n rotate(radians(180));\n \/\/call the function lines1\n lines1(R, A);\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Reference Curve: Atzema Spiral Move the mouse up and down to change the rotation angle Move the mouse left and right to change the radius sketch \/\/Xinyi Du \/\/15104 Section B \/\/xinyidu@andrew.cmu.edu \/\/Project-07 \/\/Referrence Curve: Atzema Spiral \/\/move the mouse up and down to change the rotation angle \/\/move the mouse left and right to … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-07-composition-with-curves-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-07: Composition with Curves”<\/span><\/a><\/p>\n","protected":false},"author":716,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74499"}],"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\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74499"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74499\/revisions"}],"predecessor-version":[{"id":74501,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74499\/revisions\/74501"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}