-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
111 lines (95 loc) · 2.68 KB
/
script.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
(() => {
const cnv = document.querySelector(`canvas`);
const ctx = cnv.getContext(`2d`);
let cw, ch, cx, cy;
function resizeCanvas() {
cw = cnv.width = innerWidth;
ch = cnv.height = innerHeight;
cx = cw / 2;
cy = ch / 2;
}
resizeCanvas();
window.addEventListener(`resize`, resizeCanvas);
const cfg = {
hue : 0,
bgFillColor : `rgba(50, 50 ,50, .1)`,
dirsCount : 6,
stepsToTurn : 12,
dotSize : 4,
dotsCount : 300,
dotVelocity : 2,
distance : 70,
gradientLen : 5,
}
function drawRect(color, x, y, w, h, shadowColor, shadowBlur) {
ctx.shadowColor = shadowColor || `black`;
ctx.shadowBlur = shadowBlur || 1;
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
class Dot {
constructor() {
this.pos = {x: cx, y: cy};
this.dir = (Math.random() * 3 | 0) * 2;
this.step = 0;
}
redrawDot() {
let xy = Math.abs(this.pos.x - cx) + Math.abs(this.pos.y - cy);
let makeHue = (cfg.hue + xy / cfg.gradientLen) % 360;
let color = `hsl(${ makeHue }, 100%, 50%)`;
let size = cfg.dotSize - Math.sin(xy / 9) * 2 + Math.sin(xy / 2);
let blur = cfg.dotSize - Math.sin(xy / 8) * 2;
let x = this.pos.x - size / 2;
let y = this.pos.y - size / 2;
drawRect(color, x, y, size, size, color, blur);
}
moveDot() {
this.step++;
this.pos.x += dirsList[this.dir].x * cfg.dotVelocity;
this.pos.y += dirsList[this.dir].y * cfg.dotVelocity;
}
changeDir() {
if (this.step % cfg.stepsToTurn === 0) {
this.dir = Math.random() > .5 ? (this.dir + 1) % cfg.dirsCount : (this.dir + cfg.dirsCount - 1) % cfg.dirsCount;
}
}
killDot(id) {
let precent = Math.random() * Math.exp(this.step / cfg.distance);
if (precent > 100) {
dotsList.splice(id, 1);
}
}
}
let dirsList = [];
function createDirs() {
for (let i = 0; i < 360; i += 360 / cfg.dirsCount) {
let x = Math.cos(i * Math.PI / 180);
let y = Math.sin(i * Math.PI / 180);
dirsList.push({x: x, y: y});
}
}
createDirs();
let dotsList = [];
function addDot() {
if (dotsList.length < cfg.dotsCount && Math.random() > .8) {
dotsList.push(new Dot());
cfg.hue = (cfg.hue + 1) % 360;
}
}
function refreshDots() {
dotsList.forEach((i, id) => {
i.moveDot();
i.redrawDot();
i.changeDir();
i.killDot(id);
})
}
let dot = new Dot();
function loop() {
drawRect(cfg.bgFillColor, 0, 0, cw, ch, 0, 0);
addDot();
refreshDots();
requestAnimationFrame(loop);
}
loop();
})();