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);