Hypocycloid Curves #1 (Deltoid)

Hypocycloid curve (red) of 3 cusps (Deltoid), generated with a JavaScript loop.

'Sprint' is a function to simply replace 'document.write' (a little less typing).

An SVG animation is overlaid to show how it is produced.

Follow the green dot on the moving circle.

• R: 150
• r: 50
• Area: 2πr²
• Perimeter (total arc length): 16r

The large circle radius is 3 times the small generating circle radius. This ratio always produces 3 cusps.

An interesting point: while the circle rotates clockwise, the green generating dot has to rotate counter-clockwise to trace the hypocycloid path.

This is achieved by making the 'to' value negative as in the following SVG code:

<animateTransForm
    xlink:href="#InnerG"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 350 250" to="360 350 250" begin="1s" dur="3s" repeatCount="3"
    additive="sum" />
<animateTransform
    xlink:href="#InnerC"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 250 250" to="-360 250 250" begin="1s" dur="9s" fill="freeze"
    additive="sum"/>

The JavaScript code:

var R=150;
var r=50;
for(var theta=0; theta < 360; theta+=0.1) {
var x=(2*r)*Math.cos(theta)+r*Math.cos(2*theta) +250;
var y=(2*r)*Math.sin(theta)-r*Math.sin(2*theta) + 250;
    Sprint('<circle cx="'+x+'" cy="'+y+'" r="1" fill="red"/>');
}