Sun need to be centered here plus the XYZ rotation of scene by mouse left button dragging in any empty space implemented. plus bg color to black with some random noise in form of milky way, without any image, frameworks or third-party libraries used. plus the time factor relatively to natural planetoid progression and their sizes difference adjusted. plus all possible astronomical terms accordingly applied to corresponding stellar bodily physics, as: 1. Orbit: The path that a planet or other celestial body follows as it revolves around another body in space.

2. Perihelion: The point in a planet’s orbit at which it is closest to the Sun.

3. Aphelion: The point in a planet’s orbit at which it is farthest from the Sun.

4. Eccentricity: The degree to which an orbit deviates from a perfect circle; in other words, how “oval” or elongated an orbit is.

5. Inclination: The angle between a planet’s orbital plane and the plane of the ecliptic (the imaginary plane that Earth’s orbit follows as it revolves around the Sun).

6. Retrograde motion: The apparent backward motion of a planet in the sky, caused by the differing orbital speeds of Earth and the other planet.

7. Synodic period: The time it takes for a planet to return to the same position relative to Earth and the Sun, as seen from Earth.

8. Sidereal period: The time it takes for a planet to complete one orbit around the Sun, as measured with respect to the fixed stars.

9. Precession: The slow, cyclical wobbling of the Earth’s rotational axis that causes changes in the positions of the stars over long periods of time.

10. Tidal locking: The phenomenon by which a planet’s rotation and revolution become synchronized with each other, so that one side of the planet always faces its star. Other terms might include Kepler’s laws of planetary motion (which describe the elliptical shape of planetary orbits and the speed at which planets move at various points in their orbits), the Roche limit (which describes how close a moon can orbit a planet before tidal forces tear it apart), and the Hill sphere (which describes the gravitational “sphere of influence” that a planet has around it, within which other celestial bodies are most likely to be bound to its gravity rather than that of the Sun). : const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

const sunPos = { x: 0, y: 0, z: 0, size: 20 };
const mercuryPos = { x: 50, y: 0, z: 0, size: 3 };
const venusPos = { x: 70, y: 0, z: -10, size: 4 };
const earthPos = { x: 100, y: 0, z: 0, size: 5 };

function drawSolarSystem() {
    // Clear the canvas before drawing the planets
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the Sun
    drawPlanet(sunPos.x, sunPos.y, sunPos.size, 'yellow');

    // Draw Mercury
    const mercPos2D = projectTo2D(mercuryPos.x, mercuryPos.y, mercuryPos.z);
    drawPlanet(mercPos2D.x, mercPos2D.y, mercuryPos.size, 'red');

    // Draw Venus
    const venusPos2D = projectTo2D(venusPos.x, venusPos.y, venusPos.z);
    drawPlanet(venusPos2D.x, venusPos2D.y, venusPos.size, 'orange');

    // Draw Earth
    const earthPos2D = projectTo2D(earthPos.x, earthPos.y, earthPos.z);
    drawPlanet(earthPos2D.x, earthPos2D.y, earthPos.size, 'blue');

    // Update planet positions for the next frame
    updatePlanetPositions();
}

function updatePlanetPositions() {
    // Update Mercury's position
    mercuryPos.x = 50 * Math.cos(Date.now() / 1000);
    mercuryPos.z = 50 * Math.sin(Date.now() / 1000);

    // Update Venus's position
    venusPos.x = 70 * Math.cos(Date.now() / 1500);
    venusPos.z = -10 * Math.sin(Date.now() / 1500);

    // Update Earth's position
    earthPos.x = 100 * Math.cos(Date.now() / 2000);
    earthPos.z = 100 * Math.sin(Date.now() / 2000);
}

function drawPlanet(x, y, size, color) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

function projectTo2D(x, y, z) {
    const fov = 90; // Field of view angle in degrees
    const distance = canvas.width / 2 / Math.tan(fov / 2 * Math.PI / 180);

    const scale = distance / (distance + z);
    const x2d = canvas.width / 2 + x * scale;
    const y2d = canvas.height / 2 - y * scale;

    return { x: x2d, y: y2d };
}

// Start the animation loop
setInterval(drawSolarSystem, 16);