[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
Made circle bouncing into each other less trashy
+44
-32
+44
-32
5/main.js
+44
-32
5/main.js
···
17
17
mouse.y = event.y;
18
18
});
19
19
20
-
var circlesAmount = 5
20
+
var circlesAmount = window.innerWidth*window.innerHeight/100000;
21
21
colors = [
22
22
"#070F4E",
23
23
"#2772DB",
···
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
-
// var justStarted = true;
45
44
this.update = function(currentCircleIndex) {
46
45
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;
46
+
// this.left = this.x - this.radius;
47
+
// this.right = this.x + this.radius;
48
+
// this.top = this.y - this.radius;
49
+
// this.bottom = this.y + this.radius;
51
50
52
51
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
-
}
52
+
53
+
if (i != currentCircleIndex) {
54
+
var distancex = circles[i].x - this.x;
55
+
var distancey = circles[i].y - this.y;
56
+
var distanceBetweenCircles = Math.sqrt( distancex*distancex + distancey*distancey );
57
+
// console.log(distancex + " " + circles[i].x + " " + this.x + " " + i);
58
+
// cat^2 + cat^2 = hyp^2
59
+
60
+
var distance = this.radius + circles[i].radius;
61
+
var directionx = (circles[i].x - this.x) / distance;
62
+
var directiony = (circles[i].y - this.y) / distance;
63
+
var intersectionx = this.x + directionx * this.radius;
64
+
var intersectiony = this.y + directiony * this.radius;
65
+
66
+
if (distanceBetweenCircles < 0) distanceBetweenCircles = -distanceBetweenCircles;
67
+
if (distanceBetweenCircles < distance) {
68
+
this.dx = -directionx+(this.dx+this.dy)/2;
69
+
this.dy = -directiony+(this.dx+this.dy)/2;
70
+
}
71
+
}
72
+
73
+
// var intersx = this.x + (circles[i].x - this.x) / (this.radius + circles[i].radius) * this.radius;
74
+
// // c1 + (c2 - c1 ) / (r1 + r2 ) * r1
75
+
//
76
+
// c1 + (c2-c1)/(r1+r2) * r1
77
+
//
78
+
// dist = r1+r2;
79
+
// dir = (c2-c1) / dist;
80
+
// inters = c1 + dir * r1
81
+
//
82
+
// if (
83
+
// circles[i].left <= this.right && this.left <= circles[i].right &&
84
+
// circles[i].top <= this.bottom && this.top <= circles[i].bottom &&
85
+
// i != currentCircleIndex
86
+
// ) {
87
+
// this.dx = -this.dx;
88
+
// this.dy = -this.dy;
89
+
// }
90
+
61
91
}
62
92
63
93
// bounce on edges
···
65
95
if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
66
96
if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
67
97
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
98
87
99
// this.dx = 0;
88
100
// this.dy = 0;