Spirograph

A small circle rolling inside a big one, with a pen offset from its centre. Change the three radii and the pattern changes completely.

examples/showcase-spirograph.axis

config {
    showGrid: false
    showXAxis: false
    showYAxis: false
    backgroundColor: #11131a
    textColor: #e6e8ef
    lockViewport: false
}

"Spirograph"

folder "Dials" {
    big = 7 @ slider: 2..12 step 1
    small = 3 @ slider: 1..11 step 1
    pen = 4 @ slider: 0.5..8 step 0.1
}

"The hypotrochoid the pen traces."

diff = big - small @ hidden
ratio = diff / small @ hidden

trace(t) = (diff * cos(t) + pen * cos(ratio * t), diff * sin(t) - pen * sin(ratio * t)) @ hidden

// The pattern closes once the small circle has rolled round `small` times, so
// that is how far t has to run for the whole of it to be drawn.
trace(t) @ color: ORANGE, lineWidth: 2, domain: 0..small * tau

folder "The rolling circles" {
    "The fixed outer circle."
    x ^ 2 + y ^ 2 = big ^ 2 @ color: BLUE, lineWidth: 2, lineOpacity: 0.5
    "The rolling one, at angle w."
    w = 0 @ slider: 0..2pi step 0.005, playing
    centre = (diff * cos(w), diff * sin(w)) @ color: PURPLE, pointSize: 10
    (centre.x + small * cos(t), centre.y + small * sin(t)) @{
        domain: 0..tau
        color: PURPLE
        lineWidth: 2
        lineOpacity: 0.6
    }
    "The pen, riding the small circle."
    tip = trace(w) @ color: ORANGE, pointSize: 16
    arm = [centre, tip] @ color: ORANGE, lines, points: false, lineOpacity: 0.7
}

Open in playground →