[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
Potential bugfix with circle bounce
+15
-15
+15
-15
6/main.js
+15
-15
6/main.js
···
6
6
canvas.width = window.innerWidth;
7
7
canvas.height = window.innerHeight;
8
8
window.addEventListener("resize", function() {
9
-
canvas.width = window.innerWidth;
10
-
canvas.height = window.innerHeight;
9
+
canvas.width = window.innerWidth;
10
+
canvas.height = window.innerHeight;
11
11
});
12
12
13
13
// draw a circle
···
20
20
21
21
var circleAmount = window.innerWidth*window.innerHeight/100000;
22
22
colors = [
23
-
"#070F4E",
24
-
"#2772DB",
25
-
"#3AB1C8",
26
-
"#F5EBEB"
23
+
"#070F4E",
24
+
"#2772DB",
25
+
"#3AB1C8",
26
+
"#F5EBEB"
27
27
];
28
28
var circles = [], nc = []; // newCircles
29
29
for (var i = 0; i < circleAmount; i++) {
30
-
var radius = (Math.random()+0.25)*50;
31
-
var x = Math.random()*(canvas.width-radius*2)+radius;
32
-
var y = Math.random()*(canvas.height-radius*2)+radius;
33
-
var dx = (Math.random()+1)*3;
34
-
var dy = (Math.random()+1)*3;
30
+
var radius = (Math.random()+0.25)*50;
31
+
var x = Math.random()*(canvas.width-radius*2)+radius;
32
+
var y = Math.random()*(canvas.height-radius*2)+radius;
33
+
var dx = (Math.random()+1)*3;
34
+
var dy = (Math.random()+1)*3;
35
35
var color = colors[Math.floor(Math.random()*colors.length)];
36
-
if (Math.random() < 0.5) dx = -dx;
37
-
if (Math.random() < 0.5) dy = -dy;
36
+
if (Math.random() < 0.5) dx = -dx;
37
+
if (Math.random() < 0.5) dy = -dy;
38
38
circles[i] = {
39
39
radius: radius,
40
40
x: x,
···
87
87
requestAnimationFrame(animate); // init animation
88
88
c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
89
89
90
-
nc = circles;
90
+
nc = JSON.parse(JSON.stringify(circles));
91
91
for (var i = 0; i < circles.length; i++) { // update every circle
92
92
update(i);
93
93
}
94
-
circles = nc;
94
+
circles = JSON.parse(JSON.stringify(nc));
95
95
}
96
96
animate();