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: