-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
97 lines (75 loc) · 2.54 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const mouse = {
x: undefined,
y: undefined
}
class Circle {
constructor(x, y, dx, dy, radius, color, width){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = color;
this.width = width;
this.originalRadius = radius;
this.filled = Math.random();
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
ctx.lineWidth = this.width;
ctx.strokeStyle = this.color;
ctx.stroke();
ctx.fillStyle = this.color;
if (this.filled >= 0.55){
ctx.fill();
}
}
update() {
if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0){
this.dx = -this.dx;
}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0){
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
if (Math.sqrt(Math.abs(this.x - mouse.x)*Math.abs(this.x - mouse.x) + Math.abs(this.y - mouse.y)*Math.abs(this.y - mouse.y)) < this.originalRadius && this.radius > 10){
this.radius = this.radius-10;
}
else if (this.radius < this.originalRadius){
this.radius++;
}
this.draw();
}
}
let circleArray = [];
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
for (circle of circleArray){
circle.update();
}
}
function init(){
circleArray = [];
let amount = Math.random() * Math.floor(((window.innerWidth/10)+(window.innerHeight/7))/2);
for (let i = 0; i < amount; i++){
let radius = Math.random() * 150;
let x = Math.random() * (innerWidth - 2*radius) + radius;
let y = Math.random() * (innerHeight - 2*radius) + radius;
let dx = (Math.random() - .5)*.5;
let dy = (Math.random() - .5)*.5;
let color = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random() + 0.2})`;
let width = Math.random() * 30;
circleArray.push(new Circle(x, y, dx, dy, radius, color, width));
}
}
init();
animate();
window.addEventListener('mousemove', (e)=>{mouse.x = e.x; mouse.y = e.y;});
window.addEventListener('resize', ()=>{canvas.width = innerWidth; canvas.height = innerHeight; init();});