Full code for the solar system is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Solar System</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #0a0a1a;
font-family: 'Arial', sans-serif;
color: white;
}
canvas {
display: block;
}
.info {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: white;
font-size: 18px;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
pointer-events: none;
}
.tag {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
color: #ff9500;
font-size: 24px;
font-weight: bold;
text-shadow: 0 0 10px rgba(255, 149, 0, 0.8);
pointer-events: none;
}
.planet-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #ffffff;
text-shadow: 0 0 15px rgba(255,255,255,0.8);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
text-align: center;
}
.interact-hint {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, 0);
font-size: 18px;
color: #aaaaaa;
text-shadow: 0 0 10px rgba(0,0,0,0.8);
pointer-events: none;
text-align: center;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="tag">@prince_codes1</div>
<div class="planet-name" id="planetName"></div>
<!-- <div class="interact-hint">Tap to interact</div> -->
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const planetNameElement = document.getElementById('planetName');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Solar system configuration
const planets = [
{ name: "Sun", radius: 35, color: "#FDB813", distance: 0, speed: 0, moons: [], glowColor: "rgba(253, 184, 19, 0.25)", glowSize: 30, orbitColor: "transparent" },
{ name: "Mercury", radius: 5, color: "#A57744", distance: 60, speed: 0.01, moons: [], glowColor: "rgba(165, 119, 68, 0.15)", glowSize: 2, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Venus", radius: 8, color: "#E8B658", distance: 85, speed: 0.007, moons: [], glowColor: "rgba(232, 182, 88, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Earth", radius: 9, color: "#267EAA", distance: 115, speed: 0.005, moons: [{ radius: 2, distance: 15, speed: 0.025, color: "#AAAAAA" }], glowColor: "rgba(38, 126, 170, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Mars", radius: 7, color: "#C1440E", distance: 145, speed: 0.004, moons: [{ radius: 1, distance: 12, speed: 0.02, color: "#BBBBBB" }], glowColor: "rgba(193, 68, 14, 0.15)", glowSize: 3, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Jupiter", radius: 20, color: "#C88B3A", distance: 190, speed: 0.002, moons: [{ radius: 2, distance: 25, speed: 0.01, color: "#DDDDDD" }, { radius: 3, distance: 35, speed: 0.008, color: "#CCCCCC" }], glowColor: "rgba(200, 139, 58, 0.15)", glowSize: 8, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Saturn", radius: 18, color: "#E4BB7A", distance: 250, speed: 0.0015, rings: { innerRadius: 22, outerRadius: 30, color: "rgba(228, 187, 122, 0.7)" }, moons: [{ radius: 3, distance: 35, speed: 0.007, color: "#DDDDDD" }], glowColor: "rgba(228, 187, 122, 0.15)", glowSize: 7, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Uranus", radius: 14, color: "#93B8BE", distance: 300, speed: 0.001, moons: [{ radius: 2, distance: 20, speed: 0.006, color: "#DDDDDD" }], glowColor: "rgba(147, 184, 190, 0.15)", glowSize: 5, orbitColor: "rgba(255, 255, 255, 0.1)" },
{ name: "Neptune", radius: 14, color: "#3E66A3", distance: 340, speed: 0.0008, moons: [{ radius: 2, distance: 22, speed: 0.005, color: "#DDDDDD" }], glowColor: "rgba(62, 102, 163, 0.15)", glowSize: 5, orbitColor: "rgba(255, 255, 255, 0.1)" },
];
// Visual settings
let zoom = 1;
let targetZoom = 1;
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let angle = 0;
let viewTilt = Math.PI / 8;
let activePlanet = null;
let stars = [];
// Create stars
function createStars() {
for (let i = 0; i < 400; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 1.5,
opacity: Math.random() * 0.8 + 0.2
});
}
}
createStars();
// Calculate positions with tilt
function calculatePosition(distance, angle) {
return {
x: Math.cos(angle) * distance,
y: Math.sin(angle) * distance * Math.sin(viewTilt)
};
}
// Draw a planet with optional 3D effect and glow
function drawPlanet(x, y, radius, color, glowColor, glowSize, drawDetails = false) {
// Glow effect
const glow = ctx.createRadialGradient(x, y, radius, x, y, radius + glowSize);
glow.addColorStop(0, glowColor);
glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = glow;
ctx.beginPath();
ctx.arc(x, y, radius + glowSize, 0, Math.PI * 2);
ctx.fill();
// Planet base
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
// 3D lighting effect
if (drawDetails) {
const gradient = ctx.createLinearGradient(x - radius, y - radius, x + radius * 0.5, y + radius * 0.5);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
}
// Draw Saturn's rings
function drawRings(x, y, innerRadius, outerRadius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.ellipse(x, y, outerRadius, outerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#0a0a1a";
ctx.beginPath();
ctx.ellipse(x, y, innerRadius, innerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);
ctx.fill();
}
// Draw orbit
function drawOrbit(distance, color) {
ctx.strokeStyle = color;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.ellipse(centerX, centerY, distance * zoom, distance * zoom * Math.sin(viewTilt), 0, 0, Math.PI * 2);
ctx.stroke();
}
// Detect which planet was clicked
function getPlanetAtPosition(x, y) {
for (let i = planets.length - 1; i >= 0; i--) {
const planet = planets[i];
const pos = calculatePosition(planet.distance, angle + i * planet.speed);
const planetX = centerX + pos.x * zoom;
const planetY = centerY + pos.y * zoom;
const dx = x - planetX;
const dy = y - planetY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < planet.radius * zoom * 1.5) {
return planet;
}
}
return null;
}
// Handle clicks/taps
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const clickedPlanet = getPlanetAtPosition(x, y);
if (clickedPlanet) {
activePlanet = clickedPlanet;
targetZoom = clickedPlanet.name === "Sun" ? 1 : 2.5;
// Show planet name
planetNameElement.textContent = clickedPlanet.name;
planetNameElement.style.opacity = 1;
// Hide after 2 seconds
setTimeout(() => {
planetNameElement.style.opacity = 0;
}, 2000);
} else {
// Reset view
activePlanet = null;
targetZoom = 1;
}
});
// Animation loop
function animate() {
// Clear canvas
ctx.fillStyle = '#0a0a1a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw stars
stars.forEach(star => {
ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
ctx.beginPath();
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
ctx.fill();
});
// Animate zoom
zoom += (targetZoom - zoom) * 0.05;
// Draw orbits
planets.forEach(planet => {
if (planet.distance > 0) {
drawOrbit(planet.distance, planet.orbitColor);
}
});
// Draw planets
planets.forEach((planet, i) => {
const pos = calculatePosition(planet.distance, angle + i * planet.speed);
const planetX = centerX + pos.x * zoom;
const planetY = centerY + pos.y * zoom;
// Draw planet
const isActive = activePlanet === planet;
drawPlanet(
planetX,
planetY,
planet.radius * zoom,
planet.color,
planet.glowColor,
planet.glowSize * zoom,
isActive
);
// Draw rings for Saturn
if (planet.rings) {
drawRings(
planetX,
planetY,
planet.rings.innerRadius * zoom,
planet.rings.outerRadius * zoom,
planet.rings.color
);
}
// Draw moons
planet.moons.forEach(moon => {
const moonAngle = angle * moon.speed * 5;
const moonPos = {
x: planetX + Math.cos(moonAngle) * moon.distance * zoom,
y: planetY + Math.sin(moonAngle) * moon.distance * zoom * Math.sin(viewTilt)
};
drawPlanet(
moonPos.x,
moonPos.y,
moon.radius * zoom,
moon.color,
'rgba(255, 255, 255, 0.1)',
moon.radius * zoom
);
});
});
// Update angle for next frame
angle += 0.002;
requestAnimationFrame(animate);
}
// Start animation
animate();
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
centerX = canvas.width / 2;
centerY = canvas.height / 2;
// Recalculate star positions
stars = [];
createStars();
});
// Auto-cycle through planets (great for automatic reel recording)
let planetIndex = 0;
setInterval(() => {
if (!activePlanet) {
activePlanet = planets[planetIndex];
targetZoom = activePlanet.name === "Sun" ? 1 : 2.5;
planetNameElement.textContent = activePlanet.name;
planetNameElement.style.opacity = 1;
setTimeout(() => {
planetNameElement.style.opacity = 0;
}, 2000);
planetIndex = (planetIndex + 1) % planets.length;
}
}, 3000);
</script>
</body>
</html>
Top comments (0)