Scribd
Upload
13 views

randhir css project

css micro project

Uploaded by

abhi966512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

randhir css project

css micro project

Uploaded by

abhi966512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like