{"id":4459,"date":"2020-09-02T12:20:47","date_gmt":"2020-09-02T16:20:47","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?page_id=4459"},"modified":"2020-09-02T12:20:47","modified_gmt":"2020-09-02T16:20:47","slug":"circles-and-triangles","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/daily-notes\/september\/09-02-loops\/circles-and-triangles\/","title":{"rendered":"Circles and Triangles"},"content":{"rendered":"<h3>Circles and Triangles: A Consideration of Graphical Nuance<\/h3>\n<p><em>How many ways can you think of to convert a circle to a triangle?<\/em><br \/>\n<em>In this\u00a0<a href=\"https:\/\/github.com\/golanlevin\/circle-morphing\">Circles to Triangles<\/a>\u00a0project, I demonstrate 14 methods that I could think of.<\/em><br \/>\n<em>The point of this demonstration is to sensitize you to details of computational craft.<\/em><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/ct6_300.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-4455\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/ct6_300.gif\" alt=\"\" width=\"300\" height=\"300\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ol start=\"0\">\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/DF4NZkp5A\">code<\/a>) by sampling a circle into many vertices, and then locally averaging each point with its neighbors, except for the three special corner vertices<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/mRmZWwgV9\">code<\/a>) by progressively deleting all points except for the triangle&#8217;s corners<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/M9uPn0vE8\">code<\/a>) by approximating a circle with three Bezier cubic splines and modulating the spline control points<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/Hn31KTubV\">code<\/a>) by approximating a circle with three circular arcs whose radii lengthen to infinity<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/HGN3pVgQI\">code<\/a>) by linearly interpolating points on the circle towards points on the triangle, along radii of the circle<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/NxR-1oPoS\">code<\/a>) by progressively moving points evenly sampled along the circle, towards points on the triangle, resampled at equal intervals, by small random amounts<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/P-NxlPAOa\">code<\/a>) by treating it as a rounded triangle, whose (rounded) corners have a dynamic radius<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/Fqty0L6mi\">code<\/a>) by treating it as a multisided polygon whose number of sides gradually decreases to three<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/xBQYC-LjV\">code<\/a>) by gradually flattening the circle on three sides<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/ZQd6o7tmE\">code<\/a>) by gradually shrinking the circle&#8217;s radius, revealing triangular corners within<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/09byag_Mq\">code<\/a>) by treating points along the perimeter as a series of springy particles<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/SJUh-fJIl\">code<\/a>) by considering it as a set of alternating straight lines and arcs in which the arcs shrink while the lines grow<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/SeNQ5k_Yw\">code<\/a>) by treating the form as a series of 6 circular arcs, alternatingly with small and large radii<\/li>\n<li>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/LUAMiCOn5\">code<\/a>) by progressively subdividing it into a 3-gon, 6-gon, 12-gon, 24-gon, etc., with smooth interpolations.<\/li>\n<\/ol>\n<p><em>If you find this interesting you might also enjoy:<\/em><\/p>\n<ul>\n<li><em>Dan Shiffman&#8217;s\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=Md5LIDW0RyY&amp;t=12m35s\" rel=\"nofollow\">&#8220;10 Minute Coding Challenges &#8211; Shape Morphing&#8221;<\/a>\u00a0(12:35-43:20).<\/em><\/li>\n<li><em>Dan Shiffman&#8217;s\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=z86cx2A4_3E&amp;t=4m22s\" rel=\"nofollow\">&#8220;Coding Challenge #19: Superellipse&#8221;<\/a>\u00a0(4:22-12:00).<\/em><\/li>\n<li><em><a href=\"http:\/\/sfpcyukiy.tumblr.com\/post\/104067533568\/a-book-of-drawcircle\" rel=\"nofollow\">A Book of drawCircle()<\/a>\u00a0&amp;\u00a0<a href=\"https:\/\/github.com\/yukiy\/drawCircle\">Github<\/a>\u00a0by\u00a0<a href=\"http:\/\/sfpc.io\/people\/yuki-yoshida\/\" rel=\"nofollow\">Yuki Yoshida<\/a><\/em><\/li>\n<li><em><a href=\"http:\/\/troika.uk.com\/work\/squaring-the-circle\/\" rel=\"nofollow\">Squaring the Circle<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=5q5G0jP9cTw\" rel=\"nofollow\">Dark Matter<\/a>\u00a0by Troika<\/em><\/li>\n<li><em><a href=\"https:\/\/vimeo.com\/129666491\" rel=\"nofollow\">OTTO &#8211; Footnotes from the History of Two Cultures: Mitsuo Katsui<\/a>\u00a0by J\u00fcrg Lehni<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Circles and Triangles: A Consideration of Graphical Nuance How many ways can you think of to convert a circle to a triangle? In this\u00a0Circles to Triangles\u00a0project, I demonstrate 14 methods that I could think of. The point of this demonstration is to sensitize you to details of computational craft. &nbsp; (code) by sampling a circle &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/daily-notes\/september\/09-02-loops\/circles-and-triangles\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Circles and Triangles&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4421,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4459"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4459"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4459\/revisions"}],"predecessor-version":[{"id":4460,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4459\/revisions\/4460"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4421"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}