\

Pimpri Chinchwad Education Trust’s CO-R-46

Pimpri Chinchwad Polytechnic
Revision : Date :
Computer Department
00 / /2024
(NBA Accredited and ISO 9001:2015Certified Department)
Academic Year: 2024-25 Page : 01/01

MICRO PROJECT REPORT

PART - A and PART – B

Name of Program: Diploma in Computer Engineering

Semester: FIFTH(5TH)

Name of Course and Code: Client Side Scripting (22519)

Title of the Micro-Project: Solar System Simulation

Name of Team Members: 72.Samiksha Gaikwad

115.Sanskruti Kakade

133.Monika More

135.Aditi More

Name and Sign of the Project Guide: SIGN: - Mrs.Vidya Pingale

Department of Computer Engineering, PC Polytechnic

\

Maharashtra State
Board of Technical Education, Mumbai
(Autonomous) (ISO-9001-2015) (ISO/IEC 27001:2013)

CERTIFICATE

This is to certify that Ms/Mr. Samiksha Gaikwad,Sanskruti kakade, Monika

More,Aditi More Diploma in Computer Engineering of Pimpri Chinchwad
Polytechnic has completed
Micro- projects of the course Client Side Scripting (22519) as prescribed in the
curriculum for the academic year 2024-25.
Place: Nigdi

Date:

Course Incharge Head of Department

Mrs.Vidya Pingale Prof.M.S.Malkar

Seal of institute

Department of Computer Engineering, PC Polytechnic

\

MICRO PROJECT PROPOSAL

(PART-A)
Title:Solar System Simulation
1.0 Aim of The Micro-Project
The aim of the solar system simulation microproject is to create an interactive, web-
based model of the solar system to enhance understanding of planetary motion and
celestial relationships. Benefits include improved educational engagement, development
of web development skills, encouragement of creativity, and a valuable addition to a
developer's portfolio by demonstrating the integration of science with technology.
2.0 Description
A solar system simulation microproject using a client-side scripting language involves
creating an interactive and visually appealing representation of the solar system that
operates directly within a web browser. The project typically leverages technologies like
HTML for structure, CSS for styling, and JavaScript for dynamic behavior to model the
movement of planets around the sun, simulate orbital paths, and display detailed planetary
characteristics, such as size, distance, and velocity. The simulation may include features
like zooming, panning, and real-time adjustments to speed or perspective, offering users
an immersive and educational experience. This project not only showcases proficiency in
programming and web development but also an understanding of physics and astronomy
concepts, making it a comprehensive demonstration of technical and creative skills in a
client-side environment.
Addressed Course Outcomes
a. Create interactive web page using program flow control structure.
b. Create interactive webpage using regular expression for validation.

3.0 Proposed Methodology

 The group members discussed the topic of project.
 Working of each student was given by leaders.
 We collected information related to project.

Department of Computer Engineering, PC Polytechnic

\

5.0 Action Plan

SR DETAILS OF PLANNED PLANNED NAME OF
NO. ACTIVITY START DATE FINISHED RESPONSIBLE TEAM
DATE MEMBER

1. Topic given by
subject teacher and 15/07/24 15/07/24 Samiksha Gaikwad
discussed with given
members.

2. Design of Project 22/07/24 22/07/24 Monika More

3. Planning of project. 29/07/24 29/07/24 Aditi More

4. Distribution of task Sanskruti Kakade

and discussion of role 05/08/24 05/08/24
and responsibilities
of each other.

WEEK 4: Reviews and Suggestions

5. Collection of
information related to
the topic. 12/08/24 12/08/24 Monika More

6. Analyzed the
collected data and
finalize structure of 28/08/24 28/08/24 Sanskruti Kakade
the project.

7. Report preparation.
02/09/24 02/09/24 Samiksha Gaikwad

8. Implementation 09/09/24 09/09/24 Aditi More

6.0 Actual Resource Used

Department of Computer Engineering, PC Polytechnic

\

SR. NAME OF SPECIFICATION QTY. REMARKS

NO. RESOURCES/MATERIAL
1. Computer System Hp Laptop Intel 1 Used
Core I5
2. Web Browser Any 1 Used

7.0 List of Team Members

Enrolment no. Roll no. Names

2100560083 72 Samiksha Gaikwad

2200560164 133 Monika More

2200560140 116 Sanskruti Kakade

2200560168 135 Aditi More

Name of Course: Computer Engineering Semester: 5th

Course Title: Client Side Scripting Code:(22519)

Title of Microproject: “Solar System Simulation”

Name of Subject Teacher: Mrs. Vidya Pingale

Name of Course Teacher: Mrs.Vidya Pingale Sign:

Department of Computer Engineering, PC Polytechnic

\

MICRO PROJECT REPORT

(PART-B)
1.0 Brief Description:
A solar system simulation microproject using a client-side scripting language involves
creating an interactive and visually appealing representation of the solar system that
operates directly within a web browser. The project typically leverages technologies like
HTML for structure, CSS for styling, and JavaScript for dynamic behavior to model the
movement of planets around the sun, simulate orbital paths, and display detailed planetary
characteristics, such as size, distance, and velocity. The simulation may include features
like zooming, panning, and real-time adjustments to speed or perspective, offering users
an immersive and educational experience. This project not only showcases proficiency in
programming and web development but also an understanding of physics and astronomy
concepts, making it a comprehensive demonstration of technical and creative skills in a
client-side environment.
2.0 Aim of the Micro-Project:
The aim of the solar system simulation microproject is to create an interactive, web-
based model of the solar system to enhance understanding of planetary motion and
celestial relationships. Benefits include improved educational engagement, development
of web development skills, encouragement of creativity, and a valuable addition to a
developer's portfolio by demonstrating the integration of science with technology.
3.0 Intended Course Outcome:
a. Create interactive web page using program flow control structure.
b. Create interactive webpage using regular expression for validation.

4.0 Literature Review

Creating a solar system simulation using CSS leverages the styling and animation
capabilities of CSS to represent celestial bodies and their orbits interactively. Keyframe
animations, transforms, and transitions are employed to animate the movement of planets
around the sun. This approach benefits from being lightweight and easily integrated into
web pages, making it accessible for educational and entertainment purposes. However, it
may be limited in accuracy and complexity compared to more robust simulation software,
focusing more on visual representation than precise astronomical modeling.

5.0 Actual Methodology Followed

• The group members discussed the topic of project.
• Working of each student was given.

Department of Computer Engineering, PC Polytechnic

 \

• We collected information related to project.

• After gathering information, we studied about the topic.
• Changes were made according to the requirements of projects and the
report was submitted.

6.0 Actual Resources Used

SR. NAME OF SPECIFICATION QTY. REMARKS

NO. RESOURCES/MATERIAL
1. Computer System Hp Laptop Intel 1 Used
Core I5
2. Web Browser Any 1 Used

7.0 Outputs of the Micro-Project:

SOURCE CODE:
<!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 Simulation</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
background-color: #111;
}
</style>
</head>
<body>
<canvas id="solarSystem"></canvas>

<script>
const canvas = document.getElementById('solarSystem');
const ctx = canvas.getContext('2d');

// Set canvas size

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Sun properties
const sun = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 30,

Department of Computer Engineering, PC Polytechnic

\

color: '#FFD700',
name: 'Sun'
};

// Planets array with 3D effect properties

const planets = [
{ name: 'Mercury', radius: 3, distance: 50, color: '#A9A9A9', speed: 0.02, angle: 0, orbitInclination: 0.1 },
{ name: 'Venus', radius: 5, distance: 70, color: '#D2691E', speed: 0.015, angle: 0, orbitInclination: 0.2 },
{ name: 'Earth', radius: 6, distance: 100, color: '#1E90FF', speed: 0.01, angle: 0, orbitInclination: 0.15 },
{ name: 'Mars', radius: 4, distance: 140, color: '#FF4500', speed: 0.008, angle: 0, orbitInclination: 0.05 },
{ name: 'Jupiter', radius: 10, distance: 200, color: '#DAA520', speed: 0.005, angle: 0, orbitInclination: 0.1 },
{ name: 'Saturn', radius: 8, distance: 280, color: '#CD853F', speed: 0.003, angle: 0, orbitInclination: 0.12 },
{ name: 'Uranus', radius: 7, distance: 360, color: '#4682B4', speed: 0.002, angle: 0, orbitInclination: 0.08 },
{ name: 'Neptune', radius: 7, distance: 420, color: '#4169E1', speed: 0.0015, angle: 0, orbitInclination: 0.2 }
];

// Generate random stars

const stars = [];
const numStars = 200;
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5
});
}

// Draw Stars
function drawStars() {
ctx.fillStyle = '#FFFFFF';
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();
});
}
// Draw Sun
function drawSun() {
ctx.beginPath();
ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
ctx.fillStyle = sun.color;
ctx.fill();
ctx.closePath();

// Draw Sun name

ctx.fillStyle = '#FFFFFF';
ctx.font = '14px Arial';
ctx.fillText(sun.name, sun.x - sun.radius / 2, sun.y + sun.radius + 20);
}

// Draw Orbital Paths

function drawOrbitalPaths() {
planets.forEach(planet => {
ctx.beginPath();
ctx.arc(sun.x, sun.y, planet.distance, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; // semi-transparent white for the orbit line
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
});
}

Department of Computer Engineering, PC Polytechnic

 \

// Draw Planets with 3D effect

function drawPlanets() {
planets.forEach(planet => {
// Calculate the 3D position based on the orbit inclination
const scale = 1 + Math.sin(planet.angle) * planet.orbitInclination;
const planetX = sun.x + Math.cos(planet.angle) * planet.distance * scale;
const planetY = sun.y + Math.sin(planet.angle) * planet.distance * (1 - planet.orbitInclination);

// Draw shadow effect on the planet

const gradient = ctx.createRadialGradient(planetX, planetY, planet.radius * 0.5, planetX, planetY, planet.radius);
gradient.addColorStop(0, planet.color);
gradient.addColorStop(1, '#000');

ctx.beginPath();
ctx.arc(planetX, planetY, planet.radius * scale, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();

// Draw planet name

ctx.fillStyle = '#FFFFFF';
ctx.font = '12px Arial';
ctx.fillText(planet.name, planetX + planet.radius * scale + 5, planetY + planet.radius * scale / 2);

// Update planet angle for next frame

planet.angle += planet.speed;
});
}

// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

drawStars(); // Draw the Stars

drawOrbitalPaths(); // Draw the Orbital Paths
drawSun(); // Draw the Sun
drawPlanets(); // Draw the Planets

requestAnimationFrame(animate); // Loop the animation

}

// Start the animation

animate();
</script>
</body>
</html>

Department of Computer Engineering, PC Polytechnic

 \

OUTPUT

Department of Computer Engineering, PC Polytechnic

\

8.0 Developed/Learning outcome of this Micro-project: -

Sr. no Skills Remark
1 Information Collection
2 Information Analysis
3 Design of project
4 Programming Skills
5 Leadership
6 Team management
7 Planning
8 Critical thinking
9 Task Management
10 Creativity
11 Develop Project in deadline driven environment

12 Familiar with subject knowledge:

9.0 Applications of this Micro Project: -

 Educational Tools: Interactive simulations can help students visualize and

understand the movement of planets and other celestial bodies.
 Entertainment: Engaging and visually appealing simulations can be used in games
or digital art.
 Web Design: Enhancing websites with dynamic and educational content related to
astronomy.
 Presentations: Providing a visually compelling way to demonstrate astronomical
concepts in lectures and presentations.
 Virtual Exhibits: Museums and science centers can use these simulations to create
interactive exhibits.
 Outreach Programs: Helping to engage the public and foster interest in space and
science through accessible web-based simulation.

Department of Computer Engineering, PC Polytechnic

\

10.0 Action Plan

PLANNED PLANNED NAME OF

SR DETAILS OF
START FINISHED RESPONSIBLE TEAM
NO. ACTIVITY
DATE DATE MEMBER

Topic given by
subject teacher Samiksha Gaikwad
1. 23/09/24 23/09/24
and discussed on
given members.

Collection of
information Monika More
2. 23/09/24 23/09/24
related
to the topic.
Planning of
3. 30/09/24 30/09/24 Aditi More
project.
Analyze the
collected data and
4. finalize structure 30/09/24 30/09/24 Sanskruti Kakade
of
data
Submission of
5. 14/10/24 14/10/24 Samiksha Gaikwad
proposal
Distribution of
task and
discussion of role 14/10/24 14/10/24
6. Sanskruti Kakade
and
responsibilities of
each other.

7. Design of Project 21/10/24 21/10/24 Monika More

8. Implementation 21/10/24 21/10/24 Aditi More

Department of Computer Engineering, PC Polytechnic

\

Name of Course: Computer Engineering Semester: 5th

Course Title: Client Side Scripting Code:(22519)

Title of Microproject: “Solar System Simulation”

Name of Subject Teacher: Mrs. Vidya Pingale

Name of Course Teacher: Mrs.Vidya Pingale Sign:

Department of Computer Engineering, PC Polytechnic