BHARATI VIDYAPEETH

Institute of Technology (Polytechnic), Navi Mumbai

(ACADEMIC YEAR:-2020-2021)

(MICRO PROJECT)
CLIENT SIDE SCRIPTING (CSS)

PROGRAM:- CM5I COURSE AND CODE:-CSS(22519)

TOPIC:- :-“Developing Animated Solar System using

Javascript ”

SUBMITTED BY :-
1. Shreyash Ghatage (3135)
2. Reshma Damare (3136)
3. Shruti Lende (3155)

1
 Annexure- I

Micro- Project Proposal

DEVELOPING ANIMATED SOLAR SYSTEM

1.0Aims/ Benefits of the Micro – Project :

a) To develop a program for animated solar system.
b) The aim of this project is to how animated solar system is created using java script.

2.0 Course Outcomes Addressed

a)Implement arrays and functions in java script.

b)Use java script for handling Cookies.

3.0 Proposed Methodology ( Procedure in brief that will be followed to do the

micro-project in about 100-200 words)
In this project we will learns how to develop animated solar system using
javascript. We will create a code in html using javascript. In this code for
displaying animated solar system more attractive we will use various tags like
canvas ,script tags etc. We also use user defined functions. In this code we also
various graphics objects like circle, line, arc. The path of the image in provided
in image src tag.In this manner we are trying to show animated solar system in
javascript.

3.0 Action Plan(Sequence and time required for major activity)

Sr.No. Details of activity Planned Planned finish Name of

start date date responsible team
members
1. Searched topic for 05/08/20 13/08/20 Reshma , Shruti ,
microproject Shreyash
2. Collected the requied 14/08/20 18/09/20 Shruti
materials
3. Planned the outline of the 19/09/20 06/10/20 Shreyash,
project Reshma
4. Working on micro project 07/10/20 15/10/20 Reshma, Shruti,
Shreyash

2
4.0Resources Required ( major resources such as raw material, some
machining facility, software etc.)

Sr.No. Name of resource / Specification Quantity Remarks

material
1. Pc / Laptop 4 GB Ram 1
2. Operating System Windows 10 1
3. Software Notepad 1

Names of Team Members with Roll Nos.

1. Shreyash Ghatage (335)
2. Reshma Damare (3136)
3. Shruti Lende (3155)

(To be approved by the concerned teacher)

3
 ANNEXURE II

Evaluation Sheet for the Micro Project

Academic Year :2020-2021 Name of Faculty: Mrs. Shobhna Gaikwad

Course: Client Side Scripting Course Code:22519 Semester:CM5I

Title of the Project: Developing Animated Solar System using Javascript.

COs addressed by the Micro Project:

A. Create interactive web pages using program flow control structure.
B. Implement arrays and functions in java script.

Major Learning Outcomes achieved by students by doing the Project:

(a)Practical Outcomes: Develop Javascript to implement array functionalities.

(b) Unit Outcomes in Cognitive domain : Develop javascript to implement the given
function.

(c) Outcomes in Affective Domain: a. Follow ethical practices.

b.D

emonstrate working as a leader/a team member.

Comments/Suggestions about team work/leadership/inter-personal communication

(if any)

Roll Student Name Marks out of 6 Marks out of 4 Total out

No. for performance for performance of 10
in group activity in oral /
(D5 Col. 8) presentation
(D5 Col. 9)
3135 Shreyash Ghatage
3136 Reshma Damare
3155 Shruti Lende

4
(Name & Signature of faculty)

5
 CONTENT
● INTRODUCTION
● OBJECTIVE
● DESCRIPTION OF PROJECT
● TECHNOLOGY & TOOLS USED:
● ADVANTAGES
● PROGRAM CODE
● OUTPUT
● CONCLUSION AND REFRENCE

INTRODUCTION

JavaScript is a Programming Language commonly used in web development. It

was originally developed by Netscape as a means to add dynamic and
interactive elements to websites. While JavaScript is influenced by Java, the
syntax is more similar to C and is based on ECMA Script, a scripting language
developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code is
processed by the client's web browser rather than on the web server. This
means JavaScript functions can run after a webpage has loaded without
communicating with the server. For example, a JavaScript function may check a
web form before it is submitted to make sure all the required fields have been
filled out. The JavaScript code can produce an error message before any
information is actually transmitted to the server.

OBJECTIVE
● To develop a program for animated solar system
● The aim of this project is to show how animated solar system using
javascript.

6
 DESCRIPTION OF PROJECT

In this project we will learns how to develop animated solar system using java
script. We will create a code in html using javascript.In this code for displaying
animated solar system more attractive we will use various tags like canvas
,script tags.etc. We also use user defined functions.In this code we also various
graphics objects like circle,line ,arc.The path of the image in provided in image
src tag.In this manner we are trying to show animated solar system in
javascript.

TECHNOLOGY AND TOOLS USED

● System used(COMP/LAPTOP): Computer Processor, 4GB RAM
● Operating System: Windows 7
● Software: Notepad

ADVANTAGES
1. User can get more information by seeing virtual image.
2. User will get more attracted towards the virtual image of the Solar
System.
3. This will increase the interest of the user to perform more graphical
animations.

7
CODING
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Solar System</title>
<style type="text/css">
*{
margin:0;
padding:0p;
font-family:"Helvetica";
}
body{
background:black;
user-select: none;
}
ul{
list-style:none;
}
li{
display:inline-block;
}
.body{
margin:0 auto;
width:1000px;
padding-top:40px;

8
}#canvas{
}
</style>
<body>
<canvas id="canvas" height="800" width="1000"></canvas>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></s
cript>
<script type="text/javascript">
window.onload = function(){
if(navigator.appVersion.indexOf("MSIE 7.") != -1
||navigator.appVersion.indexOf("MSIE 8.") != -1){alert("Please don't use old IE
browser");
}
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
cw = canvas.width,
ch = canvas.height,
time = 1;
/*set support for requestAnimationFrame - ovrride method */
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(callback){window.setTimeout(callback, 1000/60);}
function circle(radius,color,x,y){/*set default*/
x = typeof x !== "undefined" ? x : cw/2;
y = typeof y !== "undefined" ? y : ch/2;

9
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x,y,radius,0,2*Math.PI,true); //true = clockwise, false = counterclock
ctx.fill();
ctx.closePath();
}
function circleStroke(radius,strokeColor,x,y,lineWidth){
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI,true);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeColor;
ctx.stroke();
ctx.closePath();
}
function line(ax,ay,bx,by){
ctx.beginPath();
ctx.moveTo(ax*2,ay);
ctx.lineTo(bx,by);
ctx.strokeStyle = "rgba(255, 255, 255,0.12)";
ctx.stroke();
ctx.closePath();
}
function text(text,color,font,x,y){
ctx.beginPath();
ctx.font = font;
ctx.fillStyle = color;

10
ctx.fillText(text,x,y);ctx.closePath();
//console.log(text);
}
function animate(){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.fillRect(0,0,cw,ch);
ctx.closePath();
//Sun - center
ctx.translate(cw/2,ch/2);
circle(25,"yellow",0,0);
text("Sun", "black","15pt arial", -16,7);
//Mercury white line
circleStroke(40,"#1c1c1c",0,0,"1");
//Mercury
ctx.rotate(time / 30); /*.restore and .save doesn't work on rotate()*/
ctx.translate(40,0);
circle(3.8,"#898989",0,0);
line(-40,0,0,0);
//Venus white line
ctx.translate(-40,0); //reset translate
circleStroke(60,"#1c1c1c",0,0,"1");
//Venus
ctx.rotate(time / 100 - (time / 90)); /*.restore and .save doesn't work
onrotate()*/ ctx.translate(60,0);

11
circle(9,"#b9955b",0,0);
line(-60,0,0,0);
//Earth white line
ctx.translate(-60,0);
circleStroke(90,"#1c1c1c",0,0,"2");
//Earth - This is Where i live
ctx.rotate(time / 100 - (time / 80));
ctx.translate(90,0);
circle(10,"#2f2fc1",0,0);
line(-90,0,0,0);
//Moon.. nobody likes the moon anyway :P
// ctx.rotate(time/120);
// ctx.translate(20,0);
// circle(4,"white",0,0);
//Mars white line
ctx.translate(-90,0);
circleStroke(120,"#1c1c1c",0,0,"2");
//Mars
ctx.rotate(time / 120 - (time / 50));
ctx.translate(120,0);
circle(15,"#9f5e13",0,0);
line(-120,0,0,0);
//asteroid belt
ctx.translate(-120,0);
circleStroke(160,"#151515",0,0,"35");//jupiter white line
ctx.translate(0,0);

12
circleStroke(220,"#1c1c1c",0,0,"2");
//jupiter
ctx.rotate(time / 120 - (time / 50));
ctx.translate(220,0);
circle(45,"#ef602c",0,0);
line(-220,0,0,0);
//saturn white line
ctx.translate(-220,0);
circleStroke(300,"#1c1c1c",0,0,"2");
//saturn
ctx.rotate(time / 120 - (time / 90));
ctx.translate(300,0);
circle(35,"#c76743",0,0);
line(-300,0,0,0);
//saturn asteroid belt
ctx.translate(0,0);
circleStroke(50,"#747474",0,0,"3");
//uranus white line
ctx.translate(-300,0);
circleStroke(340,"#1c1c1c",0,0,"2");
//uranus
ctx.rotate(time / 120 - (time / 90));
ctx.translate(-340,0);
circle(23,"#b843c7",0,0);line(340,0,0,0);
//neptune white line
ctx.translate(340,0);

13
circleStroke(380,"#1c1c1c",0,0,"2");
//neptune
ctx.rotate(time / 120 - (time / 140));
ctx.translate(-380,0);
circle(20,"#43aec7",0,0);
line(380,0,0,0);
ctx.restore();
time++;
// console.log(time);
window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);
}
</script>
</body>

OUTPUT

14
 CONCLUSION AND REFRENCE
CONCLUSION
This project can be used to display animated solar system. Instead of using the
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.

REFRENCE

1. BookName- Javascript Demystified Author-Keogh, Jim

Publication-McGraw-Hill 2015, NewDelhiISBN:0-07060347-2.
2. BookName- Beginning JavaScript Author-Wilton, Paul
Publication- WilyIndia, New Delhi,2015,ISBN:0-7645-5587-1

15