Skip to content

Commit d29f742

Browse files
objectgyanobjectgyan
authored
HTML5 Bouncing Ball : Initial Checkin
Just for fun added bouncing ball animation on html 5 canvas
1 parent 38f7cb6 commit d29f742

File tree

6 files changed

+220
-0
lines changed

6 files changed

+220
-0
lines changed

‎Animation.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
var CanvasDrawer = /** @class */ (function () {
2+
function CanvasDrawer(canvas) {
3+
this.canvas = canvas;
4+
this.elements = [];
5+
this.context = this.canvas.getContext("2d");
6+
setCount(this.elements.length | 0);
7+
this.initializeCanvasElements();
8+
}
9+
/// Add default elements
10+
CanvasDrawer.prototype.initializeCanvasElements = function () {
11+
this.elements = [
12+
{ x: 20, y: 20, xValue: 3, yValue: 4 },
13+
{ x: 60, y: 40, xValue: 4, yValue: 6 },
14+
{ x: 100, y: 90, xValue: 6, yValue: 7 }
15+
];
16+
};
17+
/// Performs rendering for all the elements presents in elements array
18+
CanvasDrawer.prototype.renderBouncingBalls = function () {
19+
var _this = this;
20+
this.context.clearRect(0, 0, canvas.width, canvas.height);
21+
this.elements.forEach(function (e) {
22+
_this.drawIndividualCircle(e);
23+
});
24+
};
25+
/// Draws one element at a time on Canvas
26+
CanvasDrawer.prototype.drawIndividualCircle = function (e) {
27+
this.context.fillStyle = "#D40000";
28+
this.context.beginPath();
29+
this.context.arc(e.x, e.y, 15, 0, 2 * Math.PI);
30+
this.context.fill();
31+
if (e.y >= canvas.height - 15) {
32+
e.yValue = -4;
33+
}
34+
if (e.y <= 15) {
35+
e.yValue = 4;
36+
}
37+
if (e.x <= 15) {
38+
e.xValue = 3;
39+
}
40+
if (e.x >= canvas.width - 15) {
41+
e.xValue = -3;
42+
}
43+
e.x = e.x + e.xValue;
44+
e.y = e.y + e.yValue;
45+
};
46+
/// Triggers the animation and fixes the refresh rate for rendering
47+
CanvasDrawer.prototype.startAnimation = function () {
48+
var _this = this;
49+
stopAnimation();
50+
setCount(this.elements.length);
51+
window.requestAnimationFrame(function () { return _this.renderBouncingBalls(); });
52+
this.myEvent = setInterval(function () { return window.requestAnimationFrame(function () { return _this.renderBouncingBalls(); }); }, 50);
53+
};
54+
/// Stops the animation
55+
CanvasDrawer.prototype.stopAnimation = function () {
56+
if (this.myEvent != undefined)
57+
clearInterval(this.myEvent);
58+
};
59+
return CanvasDrawer;
60+
}());
61+
var canvas = document.getElementById("canvas");
62+
var cd = new CanvasDrawer(canvas);
63+
/// Starts the animation when Start button is clicked
64+
function startAnimation() {
65+
cd.startAnimation();
66+
}
67+
/// Push new element when add button is clicked
68+
function addMoreElements() {
69+
if (cd.myEvent != undefined && cd.myEvent != null) {
70+
cd.elements.push({ x: 100, y: 90, xValue: 6, yValue: 7 });
71+
setCount(cd.elements.length);
72+
}
73+
}
74+
/// Stops the animation when Pause button is clicked
75+
function stopAnimation() {
76+
cd.stopAnimation();
77+
if (cd.myEvent != undefined && cd.myEvent != null) {
78+
cd.myEvent = undefined;
79+
}
80+
}
81+
function setCount(elementCount) {
82+
document.getElementById("lblTotal").innerHTML = elementCount;
83+
}

‎Animation.ts

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
class CanvasDrawer {
2+
elements: { x: number; y: number; xValue: number; yValue: number }[] = [];
3+
4+
private readonly context: CanvasRenderingContext2D;
5+
6+
myEvent: any;
7+
8+
constructor(private readonly canvas: HTMLCanvasElement) {
9+
this.context = this.canvas.getContext("2d");
10+
setCount(this.elements.length | 0);
11+
this.initializeCanvasElements();
12+
}
13+
14+
/// Add default elements
15+
private initializeCanvasElements() {
16+
this.elements = [
17+
{ x: 20, y: 20, xValue: 3, yValue: 4 },
18+
{ x: 60, y: 40, xValue: 4, yValue: 6 },
19+
{ x: 100, y: 90, xValue: 6, yValue: 7 }
20+
];
21+
}
22+
23+
24+
/// Performs rendering for all the elements presents in elements array
25+
renderBouncingBalls(): void {
26+
this.context.clearRect(0, 0, canvas.width, canvas.height);
27+
this.elements.forEach(e => {
28+
this.drawIndividualCircle(e);
29+
});
30+
}
31+
32+
33+
/// Draws one element at a time on Canvas
34+
private drawIndividualCircle(e: {
35+
x: number;
36+
y: number;
37+
xValue: number;
38+
yValue: number;
39+
}) {
40+
this.context.fillStyle = "#D40000";
41+
this.context.beginPath();
42+
this.context.arc(e.x, e.y, 15, 0, 2 * Math.PI);
43+
this.context.fill();
44+
if (e.y >= canvas.height - 15) {
45+
e.yValue = -4;
46+
}
47+
if (e.y <= 15) {
48+
e.yValue = 4;
49+
}
50+
if (e.x <= 15) {
51+
e.xValue = 3;
52+
}
53+
if (e.x >= canvas.width - 15) {
54+
e.xValue = -3;
55+
}
56+
e.x = e.x + e.xValue;
57+
e.y = e.y + e.yValue;
58+
}
59+
60+
/// Triggers the animation and fixes the refresh rate for rendering
61+
startAnimation(): void {
62+
stopAnimation();
63+
setCount(this.elements.length);
64+
window.requestAnimationFrame(() => this.renderBouncingBalls());
65+
this.myEvent = setInterval(
66+
() => window.requestAnimationFrame(() => this.renderBouncingBalls()),
67+
50
68+
);
69+
}
70+
71+
/// Stops the animation
72+
stopAnimation(): void {
73+
if (this.myEvent != undefined) clearInterval(this.myEvent);
74+
}
75+
}
76+
77+
const canvas = <HTMLCanvasElement>document.getElementById("canvas");
78+
let cd = new CanvasDrawer(canvas);
79+
80+
/// Starts the animation when Start button is clicked
81+
function startAnimation() {
82+
cd.startAnimation();
83+
}
84+
85+
/// Push new element when add button is clicked
86+
function addMoreElements() {
87+
if (cd.myEvent != undefined && cd.myEvent != null) {
88+
cd.elements.push({ x: 100, y: 90, xValue: 6, yValue: 7 });
89+
setCount(cd.elements.length);
90+
}
91+
}
92+
93+
/// Stops the animation when Pause button is clicked
94+
function stopAnimation() {
95+
cd.stopAnimation();
96+
if (cd.myEvent != undefined && cd.myEvent != null) {
97+
cd.myEvent = undefined;
98+
}
99+
}
100+
101+
function setCount(elementCount) {
102+
document.getElementById("lblTotal").innerHTML = elementCount;
103+
}

‎add-icon.png

5.25 KB
Loading

‎index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<html>
2+
<head>
3+
<title>
4+
HTML5 Canvas Bouncing Balls
5+
</title>
6+
<style>
7+
button {
8+
width: 53px;
9+
}
10+
11+
img{
12+
width:25px;
13+
height: 25px;
14+
}
15+
</style>
16+
</head>
17+
<bod>
18+
<canvas
19+
id="canvas"
20+
width="160px;"
21+
height="150px;"
22+
style="border: 3px solid green;background-color: orange"
23+
></canvas>
24+
<br />
25+
<div style="width:169px;">
26+
<button onclick="startAnimation();"> <img src="play.png" /></button><button onclick="stopAnimation();" style="margin-left: 2.5px;margin-right: 2.5px;" > <img src="pause.svg" /></button><button onclick="addMoreElements();"><img src="add-icon.png" /></button>
27+
</div>
28+
<div>
29+
<h3>Total : <label id="lblTotal"></label> </h3>
30+
</div>
31+
<script type="text/javascript" src="Animation.js"></script>
32+
</bod>
33+
</html>

‎pause.svg

Lines changed: 1 addition & 0 deletions
Loading

‎play.png

2.15 KB
Loading

0 commit comments

Comments
 (0)