lets make some solar system simulalation by html,css,javascript. there should be some astrophysical data already known, on which we can construct simuli. now need to get local time and align all positions accordingly.
“you would need to gather current ephemeris data and compute each planet’s position in its elliptical orbit, which is beyond the scope of a simple Canvas simulation.”. why “beyond the scope of a simple Canvas simulation”? can you do relatively simple math model algorithm in all terms that will function as intended? output full code implemented. don’t remove mouse drag-rotation control.:
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Solar System Simulation with Labels</title>
<style>
canvas {
display: block;
background: black;
width: 100%;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id=“canvas”></canvas>
<script>
const canvas = document.getElementById(“canvas”);
const ctx = canvas.getContext(“2d”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Scaled down values for distances and sizes for demonstration purposes
const planets = [
// Adjusted size and distance for visualization
{ name: ‘Mercury’, radius: 50, angle: 0, size: 1.5, color: ‘darkgray’ },
{ name: ‘Venus’, radius: 90, angle: 0, size: 2.5, color: ‘yellow’ },
{ name: ‘Earth’, radius: 120, angle: 0, size: 2.5, color: ‘blue’ },
{ name: ‘Mars’, radius: 140, angle: 0, size: 2, color: ‘red’ },
{ name: ‘Jupiter’, radius: 180, angle: 0, size: 10, color: ‘orange’ },
{ name: ‘Saturn’, radius: 250, angle: 0, size: 8, color: ‘khaki’ },
{ name: ‘Uranus’, radius: 330, angle: 0, size: 5, color: ‘lightblue’ },
{ name: ‘Neptune’, radius: 380, angle: 0, size: 5, color: ‘darkblue’ },
// The Sun, not to scale, for visibility
{ name: ‘Sun’, radius: 0, angle: 0, size: 20, color: ‘yellow’ }
];
const center = { x: canvas.width / 2, y: canvas.height / 2 };
let angleX = 0;
let angleY = 0;
let dragStart = null;

function rotate(point, angleX, angleY) {
let cosX = Math.cos(angleX);
let sinX = Math.sin(angleX);
let cosY = Math.cos(angleY);
let sinY = Math.sin(angleY);

let x1 = point.x;
let y1 = cosX * point.y - sinX * point.z;
let z1 = sinX * point.y + cosX * point.z;

return {
x: cosY * x1 - sinY * z1,
y: y1,
z: sinY * x1 + cosY * z1
};
}

function project(point) {
const zoom = 600;
const perspective = zoom / (zoom + point.z);
return {
x: point.x * perspective + center.x,
y: point.y * perspective + center.y
};
}

function drawOrbit(radius) {
ctx.beginPath();
let firstPoint = true;
for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
let point = rotate({ x: radius * Math.cos(angle), y: 0, z: radius * Math.sin(angle) }, angleX, angleY);
let projected = project(point);
if (firstPoint) {
ctx.moveTo(projected.x, projected.y);
firstPoint = false;
} else {
ctx.lineTo(projected.x, projected.y);
}
}
ctx.closePath();
ctx.strokeStyle = “rgba(255, 255, 255, 0.3)”;
ctx.stroke();
}

function drawPlanet(planet) {
let point = rotate({ x: planet.radius * Math.cos(planet.angle), y: 0, z: planet.radius * Math.sin(planet.angle) }, angleX, angleY);
let projected = project(point);
ctx.beginPath();
ctx.arc(projected.x, projected.y, planet.size, 0, Math.PI * 2);
ctx.fillStyle = planet.color;
ctx.fill();
ctx.closePath();

// Draw the planet’s name if it’s the Sun or if the perspective scale is enough
if (planet.name === ‘Sun’ || perspectiveScale(point.z) > 0.1) {
ctx.fillStyle = ‘white’;
ctx.font = bold ${Math.max(projected.scale * 15, 12)}px sans-serif; //need to be converted in normal templateliteral without backticks
ctx.fillText(planet.name, projected.x + planet.size + 5, projected.y + 5);
}
}

function perspectiveScale(z) {
const zoom = 600;
return zoom / (zoom + z);
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the Sun
drawPlanet(planets[planets.length - 1]);

// Draw orbits and planet
for (let i = 0; i < planets.length - 1; i++) {
let planet = planets[i];
drawOrbit(planet.radius);

planet.angle += (Math.PI / 180) * (1 / planet.radius); // simplistic speed proportional to orbit size
drawPlanet(planet);
}

requestAnimationFrame(draw);
}

canvas.addEventListener(‘mousedown’, (event) => {
dragStart = { x: event.clientX, y: event.clientY };
});

canvas.addEventListener(‘mousemove’, (event) => {
if (dragStart) {
const dx = event.clientX - dragStart.x;
const dy = event.clientY - dragStart.y;
angleY += dx * 0.005;
angleX += dy * 0.005;
dragStart = { x: event.clientX, y: event.clientY };
}
});

canvas.addEventListener(‘mouseup’, () => {
dragStart = null;
});

canvas.addEventListener(‘mouseleave’, () => {
dragStart = null;
});

draw(); // Start the simulation
</script>
</body>
</html>