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