D3 Examples - Orbital Trajectory

Orbital Trajectory

A simulation of orbital trajectories using the d3-force simulation engine with the gravity-like d3-force-magnetic attraction force.

The initial tangential velocity of the blue orbiting body can be set relative to its orbital speed, calculated as √(GM/d). A factor of 1x (default) results in a perfectly circular orbit. Approaching the factor of √2x reaches the body's escape velocity, causing the body to drift away from the central object's gravity pull in an hyperbolic trajectory. Factors below 1 will cause a quicker fall of the blue body towards the attracting center, yielding elliptic orbits with increasing eccentricity.

The length of the pre-estimated trajectory can be manipulated by changing the number of samples (represented as dots).

xxxxxxxxxx
 
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
    <script src="//unpkg.com/d3-force-magnetic"></script>
    <link rel="stylesheet" href="style.css">
</head>
​
<body>
    <canvas id="trails"></canvas>
    <svg id="scaffold">
        <circle r="10" style="fill: red"></circle>
        <circle id="satellite" r="5" style="fill: rgba(0, 0, 255, .6)"></circle>
        <circle id="ghost" r="5" style="fill: rgba(0, 0, 255, .6)"></circle>
    </svg>
    <div id="controls">
        Velocity:
        <input class="slider-control" type="range" min="0.01" max="2" value="1" step="0.001" oninput="onVelocityChange(this.value)">
        <span id="velocity-val">1</span>x orbital velocity
        <br/>
        <input type="number" min="0" max="50000" value="5000" step="1000" oninput="onNumSamplesChange(this.value)" style="margin-top: 5px;">
        samples
    </div>
​
    <script src="index.js"></script>
</body>
    