Hypocycloid 001

Although the website I obtained this code from calls this a Spirograph I think it's more accurate to call this a Hypocycloid
It does not generate all the possibilities of an actual Spirograph.
maissan.net/articles/javascript-spirograph

Log in to post a comment.

// hypocycloid by Rupert Russell
// https://en.wikipedia.org/wiki/Spirograph
// https://maissan.net/articles/javascript-spirograph

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(1);

// Global code will be evaluated once.
const turtle = new Turtle();
turtle.penup();
turtle.goto(0,0);
turtle.pendown();

const R1 = 58; // min=2 max=100 step=1
const R2 = 40; // min=-20 max=100 step=1
const ratio = 70; // min=2 max=100 step=1

function drawSpirograph(cx, cy, radius1, radius2, ratio) {
  var x, y, theta;

  // Move to starting point (theta = 0)
  turtle.jump(cx + radius1 + radius2, cy);

  // Draw segments from theta = 0 to theta = 2PI
  for (theta = 0; theta <= Math.PI * 2; theta += 0.001) {
    x = cx + radius1 * Math.cos(theta) + radius2 * Math.cos(theta * ratio);
    y = cy + radius1 * Math.sin(theta) + radius2 * Math.sin(theta * ratio);
    turtle.goto(x, y);
  }

}


// Draw spirograph
drawSpirograph(0, 0, R1, R2, ratio);