Developing Animated Solar System using JS
MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION
Vidyavardhini Institute Of Technology, Pal,
Gargoti
MICRO PROJECT
Academic Year: 2024-25
TITLE OF PROJECT
“Developing Animated Solar System using JS”
Program: Computer Engineering Program code:CO5I
Course: CSS Course code: 22519
V.V.I.T. Pal pg. 1
Developing Animated Solar System using JS
Board Of Technical Education
Certificate
This is to certify that Roll no. of V Semester of Diploma in Computer Engineering of
Institute, VVIT, Pal (Code: 1207) has completed the Micro Project satisfactorily in Subject
CSS for the academic year 2024-25 as prescribed in the curriculum.
SR.NO NAME ROLL.NO Enrollment No Seat No
1 Randhir Ravindra Patil 44 2212070069 240729
Subject Teacher Head of the Department Principle
V.V.I.T. Pal pg. 2
Developing Animated Solar System using JS
INDEX
SR.NO CONTENT PAGE
NO
1
Introduction 4
2 Objective 5
3
Description and Tool used 5
4 Advantages 6
5 Program 7
6 Output 12
7
Conclusion 13
V.V.I.T. Pal pg. 3
Developing Animated Solar System using JS
Introduction
V.V.I.T. Pal pg. 4
Developing Animated Solar System using JS
Objective
Description of Project
V.V.I.T. Pal pg. 5
Developing Animated Solar System using JS
Advantages
1. User will get more attractive towards the virtual images of the solar system.
2. This will increase the user interest on the action perform on graphical
animation.
3. User get more information by seeing virtual images.
V.V.I.T. Pal pg. 6
Developing Animated Solar System using JS
Program
Index.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="main.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>
V.V.I.T. Pal pg. 7
Developing Animated Solar System using JS
<img src="asteroid.png" class="object" alt="" id="belt">
</body>
<script src="script.js"></script>
</html>
Main.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;
V.V.I.T. Pal pg. 8
Developing Animated Solar System using JS
@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 {
V.V.I.T. Pal pg. 9
Developing Animated Solar System using JS
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;
}
script.js
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]
V.V.I.T. Pal pg. 10
Developing Animated Solar System using JS
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] )
}
V.V.I.T. Pal pg. 11
Developing Animated Solar System using JS
Output
V.V.I.T. Pal pg. 12
Developing Animated Solar System using JS
Conclusion
In practical terms, the project can be used to diplay animated solar
system. Instead of using inbuilt application a user can make use of this to make
the representation more effective .This will increase the interest of the user to
perform more graphical animations.
V.V.I.T. Pal pg. 13
