A
Micro Project Report
On
“Animation in JavaScript-Bouncing Ball”
Submitted by
1.Name of Student
2.Name of Student
3.Name of Student
4.Name of Student
Under the Guidance of
Name of Project Guide
In the Partial Fulfilment of Fifth Semester of Diploma in
Computer Engineering
Department of Computer Engineering
Sandip Polytechnic
Mahiravani, Nashik - 422213
Affiliated to
Maharashtra State
Board of Technical Education
Academic Year 2021-22
1
Maharashtra State
Board of Technical Education
Certificate
This is to certify that Mr./Ms. 1. _____________________________________________ with Roll No-_____
2. _____________________________________________ with Roll No-_____
3. _____________________________________________ with Roll No-_____
4. _____________________________________________ With Roll No-_____
has successfully completed Micro-project in course “Client Side Scripting Programming(22519)” for the
academic year 2021-22 as prescribed in the 'Assessment Manual'during his/her tenure of completing Fifth
Semester of Diploma Programme in Computer Engineering from institute, Sandip Polytechnic with institute
code 1167.
Place: Nashik Enrollment No:
Date: Exam Seat No:
Course Teacher Head of the Department Head of the Institute
2
Annexur
e–I
Micro Project Proposal
Animation in JavaScript-Bouncing Ball
Title of Project: Banking Record System
1. Aims/Benefits of the Micro-Project:
2. Course Outcomes Addressed:
a. Create interactive web pages using program flow control structure.
b. Implement arrays and functions in Java Script.
c. Create event based web forms using java scripts.
d. Use java script for handling cookies.
e. Create interactive webpages using regular expressions for validations.
3. Proposed Methodology:
The work will be distributed among 8 students involved in the group. To complete the Project
“Animation in JavaScript-Bouncing Ball”, qualitative method will be used in which data collection,
analysis and interpretation is required. The data will be collected from different sources such as Internet,
reference books etc. The analysis and interpretation will be done by observing the collected data &
programming work. Finally the data will be represented with interpretation in the form of application or
collected data.
4. Action Plan:
Sr. Planned Planned Name of Responsible Team
Details of Activity
No Start Date Finish Date Members
Discussion and Finalization of
1 18/09/2021 25/09/2021
the Project Title
2 Preparation of Abstracts 25/09/2021 09/10/2021
3 Literature Review 09/10/2021 16/10/2021
4 Collection of Data 16/10/2021 23/10/2021
Discussion and Outline of 23/10/2021 30/10/2021
5
Content
Rough Writing of the Projects 30/10/2021
6 13/11/2021
Contents
7 Editing and Proof Reading of 13/11/2021 20/11/2021
the Contents
3
8 Final Completion of the Project 20/11/2021 27/11/2021
Seminar Presentation, viva-
9 vice, Assessment and 27/11/2021 18/12/2021
Submission of Report
5. Resources Required:
Sr.N
Name of Resource/Material Specification Qty. Remarks
o
Desktop with Intel Core 2 Duo
1 Hardware Resource 2.93 GHz, RAM 2GB, HDD 160 1 -
GB
2 Software Resource Turbo C++, Notpad ++ 1 -
3 Any Other Resource - - -
Index
Sr. No Content Page No
1 Abstract 5
2 Introduction 5
3 Implementation 6
4 Output 11
5 Conclusion 12
Abstract
4
.
Introduction
In the above code snippet we have defined the animation of the ball bouncing in the canvas element
We are having the canvas element as with the id as "mycanvas" , width as 400 and height as 300 and we
are having the style as border as 5 px solid blue color
var canvas = document.getElementById('mycanvas'); - It defines the id as "mycanvas"
var ctx = canvas.getContext('2d'); - It defines the context to the canvas element
var p = { x: 25, y: 25 }; - It defines we are declaring var as p to x as 25 and y as 25 which defines
the xpositions and y positions
var velo = 3, corner = 50, rad = 20; - It defines the velo as 3 corner, 50 and rad as 20
velo - It defines the different shapes in the canvas
corner- It defines the rotation of the ball animation
rad- It defines the size of the ball
var ball x=p.x
var ball y= p.y
var moveX = Math.cos(Math.PI / 180 * corner) * velo; - It defines the moveX with the given
values
var moveY = Math.sin(Math.PI / 180 * corner) * velo; - It defines the moveY with the given
values
In the nextline we are having function Drawme(), in the function drawme we are defining the values as
ctx.clearRect(0, 0, 400, 300); - It defines the clear rect as (x, y, width, height) which sets
the position n to the center
In the nextline we are checking with if condition as
if (ball.x > canvas.width - rad || ball.x < rad) moveX = -moveX; - it defines as if the
ball.X greater than canvas width(400)-rad(20)||ball.xlessthan rad(20) is equal to -movX
if (ball.y > canvas.height - rad || ball.y < rad) moveY = -moveY; - it defines as if the
ball.Y greater than canvas height(400)-rad(20)||ball.Ylessthan rad(20) is equal to -movY
ball.x += moveX; - I defines the ball.X to the moveX
ball.y += moveY; - It defines the ball.Y to the moveY
In the nextline we are defining the ball with color, shape,size with the given values
setinterval (drawme, 10) is a function which calls the function (Drawme) with the speed as 10
Implementation
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball</title>
</head>
<body>
<h2 style="color:red;"><b><i>Bouncing ball animation in canvas</i></b></h2>
5
<canvas id="mycanvas" width="400" height="300" style="border:5px solid blue;"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var p = { x: 25, y: 25 };
var velo = 3,
corner = 50,
rad = 20;
var ball = { x: p.x, y: p.y };
var moveX = Math.cos(Math.PI / 180 * corner) * velo;
var moveY = Math.sin(Math.PI / 180 * corner) * velo;
function DrawMe() {
ctx.clearRect(0, 0, 400, 300);
if (ball.x > canvas.width - rad || ball.x < rad) moveX = -moveX;
if (ball.y > canvas.height - rad || ball.y < rad) moveY = -moveY;
ball.x += moveX;
ball.y += moveY;
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(ball.x, ball.y, rad, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
setInterval(DrawMe, 10);
</script>
</body>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Output
6
Conclusion :
Name of Team Members with Roll No’s:
Roll No Name of Team Members
Prof.V.B.Ohol
Name & Signature of Course Teacher
7
Annexure – IV
Micro Project Evaluation Sheet
Name of Student : Enrollment No :
Name of Programme : Computer Engineering Semester : III
Course Title : Object Oriented Programming Course Code : 22316
Title of Micro Project : Animation in JavaScript-Bouncing Ball
Poor Average Good Excellent
Sr Sub
Characteristic to be Assessed Marks Marks Marks Marks
No Total
(1-3) (4-5) (6-8) (9-10)
(A) Process and Product Assessment (6 Marks)
1 Relevance to the Course
2 Literature Review/Information Collection
3 Completion of the Targetas per Project Proposal
4 Analysis of Data & Representation
5 Quality of Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (4Marks)
7 Presentation
8 Viva
(A) (B)
Total Marks
Process and Product Assessment Individual Presentation/Viva
(10 Marks)
(6 Marks) (4 Marks)
Comments/Suggestions about Teamwork/Leadership/Inter-personal Communication(if any)
…………………………………..……………………………………………………………………………
Name &Designation of Course Teacher:
Dated Signature:
