kasper.space
[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas
canvas-experiments.kasper.space
canvas
html5-canvas
website
5. circles bounce off of each other
author
KH
date
(Jun 15, 2017, 7:26 PM +0200)
commit
740bce23
740bce233be38d8798ec7fbf27b7af94fd0b9c2e
parent
2385ba11
2385ba11ea83e06020d7741da0ea6e591f66d387
+177
-1
+19
-1
4/main.js
+19
-1
4/main.js
···
41
41
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); //draw the actual circle
42
42
c.fill();
43
43
}
44
-
44
+
// var justStarted = true;
45
45
this.update = function() {
46
46
47
47
// bounce on edges
···
49
49
if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
50
50
if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
51
51
if (this.y <= this.radius) this.dy = (Math.random()+1)*3;
52
+
53
+
// // stop on hover
54
+
// var closeness = 50;
55
+
// if (this.x-this.radius < mouse.x && this.x+this.radius > mouse.x
56
+
// && this.y-this.radius < mouse.y && this.y+this.radius > mouse.y) {
57
+
// if (justStarted) {
58
+
// this.dxOriginal = this.dx;
59
+
// this.dyOriginal = this.dy;
60
+
// justStarted = false;
61
+
// }
62
+
// this.dx = 0;
63
+
// this.dy = 0;
64
+
// firstTime = false;
65
+
// } else if (!justStarted ) {
66
+
// this.dx = this.dxOriginal;
67
+
// this.dy = this.dyOriginal;
68
+
// justStarted = true;
69
+
// }
52
70
53
71
this.x += this.dx;
54
72
this.y += this.dy;
+19
5/index.html
+19
5/index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body>
13
+
<section class="main">
14
+
<canvas></canvas>
15
+
</section>
16
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
+
<script src="main.js"></script>
18
+
</body>
19
+
</html>
+19
5/index.php
+19
5/index.php
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body>
13
+
<section class="main">
14
+
<canvas></canvas>
15
+
</section>
16
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
+
<script src="main.js?r=<?=rand(0,999)?>"></script>
18
+
</body>
19
+
</html>
+118
5/main.js
+118
5/main.js
···
1
+
// window.onload = draw;
2
+
var canvas = document.querySelector("canvas");
3
+
canvas.width = window.innerWidth;
4
+
canvas.height = window.innerHeight;
5
+
var c = canvas.getContext("2d");
6
+
7
+
window.addEventListener("resize", function() {
8
+
canvas.width = window.innerWidth;
9
+
canvas.height = window.innerHeight;
10
+
});
11
+
var mouse = {
12
+
x: undefined,
13
+
y: undefined
14
+
};
15
+
window.addEventListener("mousemove", function(event) {
16
+
mouse.x = event.x;
17
+
mouse.y = event.y;
18
+
});
19
+
20
+
var circlesAmount = 20;
21
+
colors = [
22
+
"#070F4E",
23
+
"#2772DB",
24
+
"#3AB1C8",
25
+
"#F5EBEB"
26
+
];
27
+
28
+
function Circle(x, y, dx, dy, radius, color) {
29
+
this.radius = radius;
30
+
this.x = x;
31
+
this.y = y;
32
+
this.dx = dx;
33
+
this.dy = dy;
34
+
this.color = color;
35
+
36
+
this.draw = function() {
37
+
// draw circle
38
+
c.beginPath();
39
+
c.fillStyle = this.color;
40
+
c.lineWidth = 2
41
+
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); //draw the actual circle
42
+
c.fill();
43
+
}
44
+
// var justStarted = true;
45
+
this.update = function(currentCircleIndex) {
46
+
47
+
this.left = this.x - this.radius;
48
+
this.right = this.x + this.radius;
49
+
this.top = this.y - this.radius;
50
+
this.bottom = this.y + this.radius;
51
+
52
+
for (var i = 0; i < circles.length; i++) {
53
+
if (
54
+
circles[i].left < this.right && this.left < circles[i].right &&
55
+
circles[i].top < this.bottom && this.top < circles[i].bottom &&
56
+
i != currentCircleIndex
57
+
) {
58
+
this.dx = -this.dx;
59
+
this.dy = -this.dy;
60
+
}
61
+
}
62
+
63
+
// bounce on edges
64
+
if (this.x >= canvas.width-this.radius) this.dx = -(Math.random()+1)*3;
65
+
if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
66
+
if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
67
+
if (this.y <= this.radius) this.dy = (Math.random()+1)*3;
68
+
69
+
// // stop on hover
70
+
// var closeness = 50;
71
+
// if (this.x-this.radius < mouse.x && this.x+this.radius > mouse.x
72
+
// && this.y-this.radius < mouse.y && this.y+this.radius > mouse.y) {
73
+
// if (justStarted) {
74
+
// this.dxOriginal = this.dx;
75
+
// this.dyOriginal = this.dy;
76
+
// justStarted = false;
77
+
// }
78
+
// this.dx = 0;
79
+
// this.dy = 0;
80
+
// firstTime = false;
81
+
// } else if (!justStarted ) {
82
+
// this.dx = this.dxOriginal;
83
+
// this.dy = this.dyOriginal;
84
+
// justStarted = true;
85
+
// }
86
+
87
+
// this.dx = 0;
88
+
// this.dy = 0;
89
+
90
+
this.x += this.dx;
91
+
this.y += this.dy;
92
+
this.draw();
93
+
}
94
+
}
95
+
96
+
var circles = [];
97
+
for (var i = 0; i < 2; i++) {
98
+
var radius = (Math.random()+0.25)*50;
99
+
var x = Math.random()*(canvas.width-radius*2)+radius;
100
+
var y = Math.random()*(canvas.height-radius*2)+radius;
101
+
var dx = (Math.random()+1)*3;
102
+
var dy = (Math.random()+1)*3;
103
+
if (Math.random() < 0.5) dx = -dx;
104
+
if (Math.random() < 0.5) dy = -dy;
105
+
var color = this.fillStyle = colors[Math.floor(Math.random()*colors.length)]
106
+
circles.push(new Circle(x, y, dx, dy, radius, color));
107
+
circles[i].draw();
108
+
}
109
+
110
+
function animate() {
111
+
requestAnimationFrame(animate); // initiate animation
112
+
c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
113
+
114
+
for (var i = 0; i < circles.length; i++) {
115
+
circles[i].update(i);
116
+
}
117
+
}
118
+
animate();
+1
index.html
+1
index.html
···
10
10
</head>
11
11
12
12
<body>
13
+
<a href="5">5. and now they bounce off of each other</a>
13
14
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>
14
15
<a href="3">3. circle bouncing on canvas borders</a>
15
16
<a href="2">2. squares, a line and randomly positioned circles</a>
+1
index.php
+1
index.php
···
10
10
</head>
11
11
12
12
<body>
13
+
<a href="5">5. and now they bounce off of each other</a>
13
14
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>
14
15
<a href="3">3. circle bouncing on canvas borders</a>
15
16
<a href="2">2. squares, a line and randomly positioned circles</a>