[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
Testing new directions from circles bouncing into each other
+183
+19
6/index.html
+19
6/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
6/index.php
+19
6/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>
+145
6/main.js
+145
6/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 = window.innerWidth*window.innerHeight/100000;
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
+
this.update = function(currentCircleIndex) {
45
+
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;
50
+
51
+
for (var i = 0; i < circles.length; i++) {
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
+
// dir - 2 * dot(dir, normal) * normal
67
+
68
+
if (distanceBetweenCircles < 0) distanceBetweenCircles = -distanceBetweenCircles;
69
+
if (distanceBetweenCircles < distance) {
70
+
71
+
var normalx = (intersectionx - this.x) / this.radius;
72
+
var normaly = (intersectiony - this.y) / this.radius;
73
+
var newDirx = directionx - 2 * ( directionx * normalx + directiony * normaly ) * normalx;
74
+
var newDiry = directiony - 2 * ( directionx * normalx + directiony * normaly ) * normaly;
75
+
76
+
this.dx = newDirx;
77
+
this.dy = newDiry;
78
+
79
+
// this.dx = -directionx+(this.dx+this.dy)/2;
80
+
// this.dy = -directiony+(this.dx+this.dy)/2;
81
+
}
82
+
}
83
+
84
+
// var intersx = this.x + (circles[i].x - this.x) / (this.radius + circles[i].radius) * this.radius;
85
+
// // c1 + (c2 - c1 ) / (r1 + r2 ) * r1
86
+
//
87
+
// c1 + (c2-c1)/(r1+r2) * r1
88
+
//
89
+
// dist = r1+r2;
90
+
// dir = (c2-c1) / dist;
91
+
// inters = c1 + dir * r1
92
+
//
93
+
// if (
94
+
// circles[i].left <= this.right && this.left <= circles[i].right &&
95
+
// circles[i].top <= this.bottom && this.top <= circles[i].bottom &&
96
+
// i != currentCircleIndex
97
+
// ) {
98
+
// this.dx = -this.dx;
99
+
// this.dy = -this.dy;
100
+
// }
101
+
102
+
}
103
+
104
+
// bounce on edges
105
+
if (this.x >= canvas.width-this.radius) this.dx = -this.dx;
106
+
if (this.x <= this.radius) this.dx = -this.dx;
107
+
if (this.y >= canvas.height-this.radius) this.dy = -this.dy;
108
+
if (this.y <= this.radius) this.dy = -this.dy;
109
+
// if (this.x >= canvas.width-this.radius) this.dx = -(Math.random()+1)*3;
110
+
// if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
111
+
// if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
112
+
// if (this.y <= this.radius) this.dy = (Math.random()+1)*3;
113
+
114
+
// this.dx = 0;
115
+
// this.dy = 0;
116
+
117
+
this.x += this.dx;
118
+
this.y += this.dy;
119
+
this.draw();
120
+
}
121
+
}
122
+
123
+
var circles = [];
124
+
for (var i = 0; i < circlesAmount; i++) {
125
+
var radius = (Math.random()+0.25)*50;
126
+
var x = Math.random()*(canvas.width-radius*2)+radius;
127
+
var y = Math.random()*(canvas.height-radius*2)+radius;
128
+
var dx = (Math.random()+1)*3;
129
+
var dy = (Math.random()+1)*3;
130
+
if (Math.random() < 0.5) dx = -dx;
131
+
if (Math.random() < 0.5) dy = -dy;
132
+
var color = this.fillStyle = colors[Math.floor(Math.random()*colors.length)]
133
+
circles.push(new Circle(x, y, dx, dy, radius, color));
134
+
circles[i].draw();
135
+
}
136
+
137
+
function animate() {
138
+
requestAnimationFrame(animate); // initiate animation
139
+
c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
140
+
141
+
for (var i = 0; i < circles.length; i++) {
142
+
circles[i].update(i);
143
+
}
144
+
}
145
+
animate();