frommainland / circle-morphing

Interpolations from a circle to a triangle in p5.js

Circle Morphing

Computational interpolations from a circle-to-a-square, and circle-to-a-triangle, using p5.js

References / See Also:

• Dan Shiffman's "10 Minute Coding Challenges - Shape Morphing" (12:35-43:20).
• Dan Shiffman's "Coding Challenge #19: Superellipse" (4:22-12:00).
• A Book of drawCircle() & Github by Yuki Yoshida
• Squaring the Circle and Dark Matter by Troika
• OTTO – Footnotes from the History of Two Cultures: Mitsuo Katsui by Jürg Lehni

--

Some Ways of Transforming a Circle into a Square

1. (code) by progressively deleting all points except for the square's corners
2. (code) by approximating a circle with four Bezier cubic splines and modulating the spline control points
3. (code) by approximating a circle with four circular arcs whose radii lengthen to infinity
4. (code) by linearly interpolating points on the circle towards points on the square, along radii of the circle
5. (code) by progressively moving points evenly sampled along the circle, towards points on the square, resampled at equal intervals, by small random amounts
6. (code) by treating it as a rounded rect, whose (rounded) corners have a dynamic radius
7. (code) by treating it as a multisided polygon whose number of sides gradually decreases to four
8. (code) by gradually flattening the circle on four sides
9. (code) by gradually shrinking the circle's radius, revealing square corners within
10. (code) by treating points along the perimeter as a series of springy particles
11. (code) by considering it as a set of alternating straight lines and arcs in which the arcs shrink while the lines grow
12. (code) by using a 'superellipse' formula
13. (code) by progressively subdividing it into a 4-gon, 8-gon, 16-gon, 32-gon, etc., with smooth interpolations.
14. (code) by abruptly moving points evenly sampled along the circle, towards corresponding points on the square

--

Some Ways of Transforming a Circle into a Triangle

0. (code) // by sampling a circle into many vertices, and then locally averaging each point with its neighbors, except for the three special corner vertices.
1. (code) by progressively deleting all points except for the triangle's corners
2. (code) by approximating a circle with three Bezier cubic splines and modulating the spline control points
3. (code) by approximating a circle with three circular arcs whose radii lengthen to infinity
4. (code) by linearly interpolating points on the circle towards points on the triangle, along radii of the circle
5. (code) by progressively moving points evenly sampled along the circle, towards points on the triangle, resampled at equal intervals, by small random amounts
6. (code) by treating it as a rounded triangle, whose (rounded) corners have a dynamic radius
7. (code) by treating it as a multisided polygon whose number of sides gradually decreases to three
8. (code) by gradually flattening the circle on three sides
9. (code) by gradually shrinking the circle's radius, revealing triangular corners within
10. (code) by treating points along the perimeter as a series of springy particles
11. (code) by considering it as a set of alternating straight lines and arcs in which the arcs shrink while the lines grow
12. (code) by treating the form as a series of 6 circular arcs, alternatingly with small and large radii
13. (code) by progressively subdividing it into a 3-gon, 6-gon, 12-gon, 24-gon, etc., with smooth interpolations.