228

Keplerian Orbits

Multi-body planetary orbital mechanics following Kepler's laws with eccentric anomaly transcendental equation solvers.

Playground
60 FPS Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code

// 022 - Keplerian Orbits (space)
// 1:1 Original algorithm engine source
function createKeplerOrbits() {
  const BODIES = 6;
  const a = [60, 95, 130, 165, 205, 250];
  const e = [0.2, 0.45, 0.15, 0.6, 0.3, 0.5];
  const incl = [0, 0.3, -0.4, 0.6, -0.2, 0.5];
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const t = timeState.time * Number(params.speed || 0.8);
      const cx = width * 0.5;
      const cy = height * 0.5;
      ctx.fillStyle = "rgba(8, 9, 13, 0.18)";
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = "#fde047";
      ctx.shadowColor = "#f59e0b";
      ctx.shadowBlur = 18;
      ctx.beginPath();
      ctx.arc(cx, cy, 7, 0, Math.PI * 2);
      ctx.fill();
      ctx.shadowBlur = 0;
      for (let b = 0; b < BODIES; b++) {
        const semiA = a[b] * (Math.min(width, height) / 600);
        const ecc = e[b];
        const semiB = semiA * Math.sqrt(1 - ecc * ecc);
        const focusOffset = semiA * ecc;
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(incl[b] + t * 0.05);
        ctx.beginPath();
        ctx.ellipse(-focusOffset, 0, semiA, semiB, 0, 0, Math.PI * 2);
        ctx.strokeStyle = hsla((b * 45 + 180) % 360, 70, 50, 0.25);
        ctx.lineWidth = 1;
        ctx.stroke();
        const orbitalPeriod = Math.pow(semiA / 50, 1.5);
        const meanAnomaly = t / orbitalPeriod * Math.PI * 2;
        let E = meanAnomaly;
        for (let iter = 0; iter < 4; iter++) {
          E = E - (E - ecc * Math.sin(E) - meanAnomaly) / (1 - ecc * Math.cos(E));
        }
        const planetX = semiA * Math.cos(E) - focusOffset;
        const planetY = semiB * Math.sin(E);
        const hue = (b * 50 + 190) % 360;
        ctx.fillStyle = hsla(hue, 95, 70, 0.95);
        ctx.shadowColor = hsla(hue, 95, 70, 0.8);
        ctx.shadowBlur = 10;
        ctx.beginPath();
        ctx.arc(planetX, planetY, 3.5, 0, Math.PI * 2);
        ctx.fill();
        ctx.shadowBlur = 0;
        ctx.restore();
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "speed",
    "label": "Orbital Time Scale",
    "type": "range",
    "min": 0.2,
    "max": 2.5,
    "step": 0.1,
    "defaultValue": 0.8,
    "description": "Planetary revolution rate"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['kepler-orbits']) {
  const inst = typeof createKeplerOrbits === 'function' ? createKeplerOrbits() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['kepler-orbits'] = inst;
}

const instance = window.__art_instances['kepler-orbits'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

medium
Analytical Equation
r(ν)=a(1e2)1+ecosν,M=EesinE,T2=4π2G(M1+M2)a3r(\nu) = \frac{a(1 - e^2)}{1 + e \cos\nu}, \quad M = E - e \sin E, \quad T^2 = \frac{4\pi^2}{G(M_1 + M_2)} a^3
Click to expand
Compact Formula
E_{k+1} = E_k - (E_k - e*sin(E_k) - M) / (1 - e*cos(E_k)), x = a*cos(E) - ae

Mathematical Tags

#kepler #orbital-mechanics #astronomy #celestial #ellipse #space
Author: Math Art Core Target: 60 FPS

Export & Embed: Keplerian Orbits

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/kepler-orbits" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate Select
110 Mathematical Artworks
Made by Fazley Rabbi

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨