[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
experiment 4: many boucning circles with random colors, radiuses and window resize support
+133
-10
+11
-8
3/main.js
+11
-8
3/main.js
···
4
4
canvas.height = window.innerHeight-20;
5
5
var c = canvas.getContext("2d");
6
6
7
-
8
7
var radius = 50;
9
-
8
+
// random start position in canvas
10
9
var x = Math.random()*(canvas.width-radius*2)+radius;
11
-
dx = (Math.random()+1)*3;
12
-
if (dx > 4.5) dx = -dx;
13
-
14
10
var y = Math.random()*(canvas.height-radius*2)+radius;
11
+
// start position incrementor
12
+
dx = (Math.random()+1)*3;
15
13
dy = (Math.random()+1)*3;
14
+
// maybe make position negative
15
+
if (dx > 4.5) dx = -dx;
16
16
if (dy > 4.5) dy = -dy;
17
17
18
18
function animate() {
19
-
requestAnimationFrame(animate);
20
-
c.clearRect(0, 0, innerWidth, innerHeight);
19
+
requestAnimationFrame(animate); // initiate animation
20
+
c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
21
21
22
+
// draw circle
22
23
c.beginPath();
23
24
c.strokeStyle = "#00C8A4";
24
25
c.lineWidth = 2
25
-
c.arc(x, y, radius, 0, Math.PI*2, false);
26
+
c.arc(x, y, radius, 0, Math.PI*2, false); //draw the actual circle
26
27
c.stroke();
27
28
29
+
// bounce on edges
28
30
if (x >= canvas.width-50) dx = -(Math.random()+1)*3;
29
31
if (x <= radius) dx = (Math.random()+1)*3;
30
32
if (y >= canvas.height-50) dy = -(Math.random()+1)*3;
31
33
if (y <= radius) dy = (Math.random()+1)*3;
32
34
35
+
// increment x/y positions
33
36
x += dx;
34
37
y += dy;
35
38
}
+19
4/index.html
+19
4/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
4/index.php
+19
4/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>
+81
4/main.js
+81
4/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
+
45
+
this.update = function() {
46
+
47
+
// bounce on edges
48
+
if (this.x >= canvas.width-this.radius) this.dx = -(Math.random()+1)*3;
49
+
if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
50
+
if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
51
+
if (this.y <= this.radius) this.dy = (Math.random()+1)*3;
52
+
53
+
this.x += this.dx;
54
+
this.y += this.dy;
55
+
this.draw();
56
+
}
57
+
}
58
+
59
+
var circles = [];
60
+
for (var i = 0; i < circlesAmount; i++) {
61
+
var x = Math.random()*(canvas.width-radius*2)+radius;
62
+
var y = Math.random()*(canvas.height-radius*2)+radius;
63
+
var dx = (Math.random()+1)*3;
64
+
var dy = (Math.random()+1)*3;
65
+
if (Math.random() < 0.5) dx = -dx;
66
+
if (Math.random() < 0.5) dy = -dy;
67
+
var radius = (Math.random()+0.25)*50;
68
+
var color = this.fillStyle = colors[Math.floor(Math.random()*colors.length)]
69
+
circles[i] = new Circle(x, y, dx, dy, radius, color);
70
+
circles[i].draw();
71
+
}
72
+
73
+
function animate() {
74
+
requestAnimationFrame(animate); // initiate animation
75
+
c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
76
+
77
+
for (var i = 0; i < circles.length; i++) {
78
+
circles[i].update();
79
+
}
80
+
}
81
+
animate();
+1
-1
css/home.css
+1
-1
css/home.css
···
4
4
5
5
section { position: absolute; width: 100%; height: 100%; display: block; }
6
6
7
-
section canvas { position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%; border: 1px solid #000000; display: block; }
7
+
section canvas { position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%; display: block; }
-1
css/home.sass
-1
css/home.sass
+1
index.html
+1
index.html
···
10
10
</head>
11
11
12
12
<body>
13
+
<a href="3">4. many boucning circles with random colors, radiuses and window resiza support</a>
13
14
<a href="3">3. circle bouncing on canvas borders</a>
14
15
<a href="2">2. squares, a line and randomly positioned circles</a>
15
16
<a href="1">1. two squares</a>
+1
index.php
+1
index.php
···
10
10
</head>
11
11
12
12
<body>
13
+
<a href="3">4. many boucning circles with random colors, radiuses and window resiza support</a>
13
14
<a href="3">3. circle bouncing on canvas borders</a>
14
15
<a href="2">2. squares, a line and randomly positioned circles</a>
15
16
<a href="1">1. two squares</a>