9 Planets Animated Solar System Using Html, CSS, Javascript

Introduction

Experience the solar system like never before. In this project, we’ll use HTML, CSS, and JavaScript to create a mesmerizing animated solar system. Watch planets orbit the Sun, explore their details, and embark on an interactive journey through our celestial neighborhood. It’s a blend of art, science, and coding that brings the cosmos to your web browser. Let’s begin our cosmic adventure!

Processes in Development of 9 Planets Animated System

Creating a 9-planets animated solar system using HTML, CSS, and JavaScript involves building a web-based simulation that visually represents the planets in our solar system and animates their orbits. Below, I’ll provide a high-level overview of how you can create such a project:

HTML Structure: Start by setting up the basic HTML structure for your project. Create a container for the solar system and individual elements for each planet. You can use HTML elements like <div> or <canvas> for this purpose.
CSS Styling: Use CSS to style the elements and make them look like planets. You’ll need to define the size, colors, and textures (if desired) for each planet. You can also use CSS animations for any planet-specific animations, like rotating.
JavaScript Logic: JavaScript will be the backbone of your animation. You’ll need to write JavaScript code to handle the following aspects:
- Orbit Calculation: Calculate the positions of the planets based on their orbital parameters (distance from the Sun, orbital period, eccentricity, etc.). You can use Kepler’s laws or simplified equations for this purpose.
- Animation Loop: Create an animation loop using requestAnimationFrame() or a similar method to continuously update the positions of the planets and simulate their orbits.
- Planet Movement: Update the position of each planet based on its orbital parameters in each frame of the animation loop. You’ll need to use trigonometric functions to calculate their positions.
Documentation: Consider documenting your project well, especially if you plan to share it with others. Provide explanations of how the simulation works and how others can use or modify it.
Publishing: Once your project is complete, you can publish it on a web hosting platform or share it on a code-sharing platform like GitHub so that others can see and interact with your animated solar system.

Remember that creating a realistic solar system simulation with accurate orbital parameters can be quite complex, but it’s a great way to learn about web development and physics.

Html Code File (index.html)

This HTML code is a basic structure for creating a webpage that simulates a solar system animation using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta charset="utf-8">
  <title>Solar System</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <img class="object" src="sun.png" alt="" id="sun">
  <img class="object planet" src="mercury.png" alt="" id="mercury">
  <img class="object planet" src="venus.png" alt="" id="venus">
  <img class="object planet" src="earth.png" alt="" id="earth">
  <img class="object planet" src="mars.png" alt="" id="mars">
  <img class="object planet" src="jupiter.png" alt="" id="jupiter">
  <img class="object planet" src="saturn.png" alt="" id="saturn">
  <img class="object planet" src="uranus.png" alt="" id="uranus">
  <img class="object planet" src="neptune.png" alt="" id="neptune">
  <div class="object" id="moon"></div>

  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object p-orbit"></div>
  <div class="object" id="m-orbit"></div>

  <img src="asteroid.png" class="object" alt="" id="belt">
</body>

  <script src="script.js"></script>
</html>

Let’s break down the code step by step:

<!DOCTYPE html>: This is the document type declaration, which tells the browser that the document is an HTML5 document.
<html lang="en">: This is the opening <html> tag, and it specifies that the document is in English (the “en” attribute). It’s the root element of the HTML document.
<head>: This is the head section of the document, where you include metadata and links to external resources. It doesn’t contain visible content for the webpage.
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">: This <meta> tag sets the viewport properties, ensuring that the webpage adapts to the device’s width and scale. It’s essential for creating a responsive design.
- <meta charset="utf-8">: This <meta> tag specifies the character encoding for the document, which is set to UTF-8, a widely used character encoding for handling various character sets.
- <title>Solar System</title>: This <title> tag sets the title of the webpage, which is displayed in the browser’s title bar or tab.
- <link rel="stylesheet" href="main.css">: This <link> tag links an external CSS (Cascading Style Sheet) file named “main.css” to the HTML document. It’s used to apply styles to the webpage.
<body>: This is the body section of the document, where the visible content of the webpage resides.
- <img>: These are a series of <img> tags that represent images of celestial bodies (e.g., the Sun, planets, and an asteroid) that are part of the solar system animation. Each image has a class attribute for styling purposes and an id attribute to uniquely identify it. The src attribute specifies the image file to be displayed, and the alt attribute provides alternative text for accessibility.
- <div>: These are <div> elements with various classes (object, p-orbit, m-orbit) and an id attribute (moon). These are used to create div elements for styling and positioning elements in the animation.
- <script src="script.js"></script>: This <script> tag links an external JavaScript file named “script.js” to the HTML document. It’s used to provide the functionality and interactivity for the solar system animation.

CSS Code File (style.css)

This CSS code is used to style the elements of a solar system animation.

CSS

body {
    background: black;
    margin: 0;
    padding: 0;
    height: 200vmin;
  }
  
  .object {
    border-radius: 50%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY( 50vmin );
  }
  
  .p-orbit, #m-orbit{
    border: 0.1vmin solid lightgrey;
    opacity: 0.5;
    background: transparent;
  }
  
  #belt {
    height: 97vmin;
    width: 97vmin;
    animation: spin 50s infinite linear;
    margin-top: 50vmin;
  }
  
  @keyframes spin{
    0%{ transform: rotate(0deg) }
    100%{ transform: rotate(360deg) }
  }
  
  #m-orbit {
    height: 8vmin;
    width: 8vmin;
  }
  
  .planet, #moon {
    z-index: 100;
  }
  
  #sun {
    height: 12vmin;
    width: 12vmin;
  }
  
  #moon {
    height: 1vmin;
    width: 1vmin;
    background-color: white;
  }
  
  #mercury {
    height: 2vmin;
    width: 2vmin;
  }
  
  #venus {
    height: 3vmin;
    width: 3vmin;
  }
  
  #earth {
    height: 4vmin;
    width: 4vmin;
  }
  
  #mars {
    height: 3.5vmin;
    width: 3.5vmin;
  }
  
  #jupiter {
    height: 12vmin;
    width: 12vmin;
  }
  
  #saturn {
    height: 12vmin;
    width: 12vmin;
    border-radius: 0%;
  }
  
  #uranus {
    height: 5vmin;
    width: 5vmin;
  }
  
  #neptune {
    height: 4vmin;
    width: 4vmin;
  }

Let’s break down the code step by step:

body: This selector styles the <body> element, which represents the entire webpage’s content.
- background: black;: Sets the background color of the webpage to black.
- margin: 0; padding: 0;: Removes any default margins and padding from the <body> element.
- height: 200vmin;: Sets the height of the <body> element to 200vmin. The vmin unit represents the smaller of the viewport’s width and height, so this makes the height responsive to the viewport size.
.object: This selector styles elements with the class .object. These elements are used for various celestial bodies in the solar system animation.
- border-radius: 50%;: Gives these elements a circular shape by setting a 50% border radius.
- position: absolute;: Positions the elements absolutely within their containing element.
- margin: auto;: Centers the elements horizontally by setting margin to auto.
- top: 0; left: 0; right: 0; bottom: 0;: Centers the elements vertically and horizontally using top, left, right, and bottom properties.
- transform: translateY(50vmin);: Translates the elements vertically by 50vmin units, which helps position them appropriately within the viewport.
.p-orbit, #m-orbit: This selector styles elements with the class .p-orbit and the element with the id #m-orbit. These elements represent the planetary orbits.
- border: 0.1vmin solid lightgrey;: Sets a light grey solid border with a thickness of 0.1vmin.
- opacity: 0.5;: Reduces the opacity of these elements to 50%, making them partially transparent.
- background: transparent;: Sets the background of these elements to transparent.
#belt: This selector styles the element with the id #belt, which represents the asteroid belt.
- height: 97vmin; width: 97vmin;: Sets the height and width of the asteroid belt to 97vmin units, making it responsive to the viewport size.
- animation: spin 50s infinite linear;: Applies a CSS animation named “spin” to rotate the asteroid belt over 50 seconds infinitely in a linear fashion.
- margin-top: 50vmin;: Adds a top margin of 50vmin units to vertically position the asteroid belt.
@keyframes spin: This is a keyframes animation named “spin” that defines how the asteroid belt rotates.
- 0% { transform: rotate(0deg) }: At 0% of the animation, the asteroid belt starts with no rotation.
- 100% { transform: rotate(360deg) }: At 100% of the animation, the asteroid belt completes a full 360-degree rotation.
#m-orbit: This selector styles the element with the id #m-orbit, which represents the moon’s orbit.
- height: 8vmin; width: 8vmin;: Sets the height and width of the moon’s orbit to 8vmin units.
.planet, #moon: This selector styles elements with the class .planet and the element with the id #moon, representing planets and the moon.
- z-index: 100;: Sets the z-index to 100, ensuring that these elements appear above other elements in the stacking order.
ID selectors (e.g., #sun, #mercury, #venus, etc.): These selectors style individual celestial bodies, including the Sun and planets, by specifying their respective IDs.
- height and width properties set the height and width of each celestial body.
- For Saturn, there’s an additional border-radius property that sets the border-radius to 0%, making it appear as a circle.
- For the moon (#moon), there’s a background-color property that sets its background color to white.

Overall, this CSS code provides the styling for the solar system animation, including background colors, sizes, positions, borders, and animations for various celestial bodies and their orbits.

Javascript Code file (script.js)

This JavaScript code is responsible for animating a solar system simulation on a webpage.

JavaScript

const planets = document.querySelectorAll('.planet')
const p_radii = [22,33,50,70,112,138,165,190]
let p_radians = new Array(8).fill(0)
const p_velocities = [1.607, 1.174,1,0.802, 0.434, 0.323, 0.228, 0.182]

const moon = document.querySelector('#moon')
const m_radius = 8
let m_radians = 0
const m_velocity = 10

const p_orbits = document.querySelectorAll('.p-orbit')
const m_orbit = document.querySelector('#m-orbit')

p_orbits.forEach((p_orbit, index)=>{
  p_orbit.style.height = `${p_radii[index]}vmin`
  p_orbit.style.width = `${p_radii[index]}vmin`
})

setInterval( ()=> {
  planets.forEach( (planet, index)=>{
    planet.style.left = `${Math.cos(p_radians[index]) * p_radii[index]}vmin`
    planet.style.top = `${Math.sin(p_radians[index]) * p_radii[index]}vmin`
    p_radians[index] += p_velocities[index] * 0.02
  })

  moon.style.left = `${earthX() + (Math.cos(m_radians) * m_radius )}vmin`
  moon.style.top = `${earthY() + (Math.sin(m_radians) * m_radius )}vmin`
  m_radians += m_velocity * 0.02

  m_orbit.style.left = `${earthX()}vmin`
  m_orbit.style.top = `${earthY()}vmin`
}, 1000/60)

function earthX(){
  return Number( planets[2].style.left.split('vmin')[0] )
}

function earthY(){
  return Number( planets[2].style.top.split('vmin')[0] )
}

Let’s break it down step by step:

const planets = document.querySelectorAll('.planet'):
- This line selects all elements with the class planet and stores them in the planets variable.
- These elements represent the planets in the solar system.
const p_radii = [22, 33, 50, 70, 112, 138, 165, 190]:
- An array p_radii is defined, containing the radii (distances from the center) for the planetary orbits in vmin units.
let p_radians = new Array(8).fill(0):
- An array p_radians is initialized with eight values, all set to 0.
- This array will store the current angles of rotation for each planet.
const p_velocities = [1.607, 1.174, 1, 0.802, 0.434, 0.323, 0.228, 0.182]:
- An array p_velocities is defined, containing the angular velocities for the planets.
const moon = document.querySelector('#moon'):
- This line selects the element with the ID moon and stores it in the moon variable.
- This element represents the moon in the solar system.
const m_radius = 8:
- The variable m_radius is set to 8, representing the distance of the moon from the Earth.
let m_radians = 0:
- The variable m_radians is initialized to 0.
- This variable will store the current angle of rotation for the moon.
const m_velocity = 10:
- The variable m_velocity is set to 10, representing the angular velocity of the moon.
const p_orbits = document.querySelectorAll('.p-orbit'):
- This line selects all elements with the class p-orbit and stores them in the p_orbits variable.
- These elements represent the orbits of the planets.
const m_orbit = document.querySelector('#m-orbit'):
- This line selects the element with the ID m-orbit and stores it in the m_orbit variable.
- This element represents the orbit of the moon.

p_orbits.forEach((p_orbit, index) => { ... }):
- This loop iterates through each element in the p_orbits array (planet orbits).
- For each element, it sets the height and width styles to match the respective radius from the p_radii array.

setInterval(() => { ... }, 1000/60):
- This sets up a repeating interval using setInterval with a function that executes every 16.67 milliseconds (approximately 60 frames per second).

planets.forEach((planet, index) => { ... }):
- This loop iterates through the planets array (planet elements) and updates their positions.
- It calculates the new left and top styles for each planet based on the current angle (p_radians) and radius (p_radii) to simulate their orbital motion.
- The angles are incremented by the corresponding angular velocities from p_velocities.

moon.style.left and moon.style.top:
- These lines update the position of the moon element based on its angle (m_radians) and radius (m_radius) relative to the Earth’s position.

m_radians is incremented by m_velocity to simulate the moon’s rotation.
m_orbit.style.left and m_orbit.style.top:
- These lines update the position of the moon’s orbit to match the Earth’s position.

Finally, two functions, earthX() and earthY(), are defined to calculate the X and Y coordinates of Earth (the third planet in the planets array) to position the moon relative to it.

In summary, this JavaScript code animates the planets and the moon in a solar system simulation by continuously updating their positions based on angles, radii, and velocities. It also updates the positions of their orbits and ensures that the animation runs at approximately 60 frames per second.

Images Zip File with All Codes

3 MB

In the provided HTML and CSS code snippets, images are referenced using the <img> HTML elements. These images represent celestial bodies and objects in the solar system simulation. However, the code you provided does not include the actual image files themselves; it only specifies the paths to these images using the src attribute in the <img> elements.

Here are the image references in the HTML code:

HTML

<img class="object" src="sun.png" alt="" id="sun">
<img class="object planet" src="mercury.png" alt="" id="mercury">
<img class="object planet" src="venus.png" alt="" id="venus">
<img class="object planet" src="earth.png" alt="" id="earth">
<img class="object planet" src="mars.png" alt="" id="mars">
<img class="object planet" src="jupiter.png" alt="" id="jupiter">
<img class="object planet" src="saturn.png" alt="" id="saturn">
<img class="object planet" src="uranus.png" alt="" id="uranus">
<img class="object planet" src="neptune.png" alt="" id="neptune">
<img src="asteroid.png" class="object" alt="" id="belt">

In this code, each <img> element has a src attribute that specifies the path to the image file to be displayed. For example, "sun.png" refers to an image file named “sun.png,” and "mercury.png" refers to an image file named “mercury.png.”

These images should be present in the same directory as the HTML file or in a directory specified by the relative path in the src attribute. These images are used to visually represent the Sun, planets, and an asteroid in the solar system simulation when the webpage is loaded and displayed in a web browser.