Carlos Aguni

Highly motivated self-taught IT analyst. Always learning and ready to explore new skills. An eternal apprentice.


D3js Spirograph

17 Oct 2021 »

Draw

https://crashlaker.github.io/d3js-static/spirograph/index0-draw.html

Force

https://crashlaker.github.io/d3js-static/spirograph/index1-force.html

Rocket

https://crashlaker.github.io/d3js-static/spirograph/index2-rocket.html

References

 const params = {
    // Graph parameters
    tMin  : 0,
    tMax  : 160,
    tStep : .1,
    xMin  : -10,
    xMax  : 10,
    yMin  : -10,
    yMax  : 10,

    // Display parameters
    lineWidth  : 4,
    renderTime : 800,

    // Hypotrochoid parameters
    R : 4.6,
    r : 2.5,
    d : 8,
};

function hypotrochoidX(t) {
    return (
        (params.R - params.r) * Math.cos(t)
        + params.d * Math.cos((params.R - params.r) / params.r * t)
    );
}

function hypotrochoidY(t) {
    return (
        (params.R - params.r) * Math.sin(t)
        - params.d * Math.sin((params.R - params.r) / params.r * t)
    );
}

https://github.com/nylen/d3-spirograph

https://www.visualcinnamon.com/portfolio/spirograph/