-
Notifications
You must be signed in to change notification settings - Fork 0
/
snowfall.js
114 lines (104 loc) · 2.31 KB
/
snowfall.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
112
113
114
let canvas, ctx, w, h, snows, snows2;
function init() {
canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
resizeReset();
animationLoop();
}
function resizeReset() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
snows = [];
for (let i = 0; i < 500; i++) {
snows.push(new Snow());
}
snows2 = [];
for (let i = 0; i < 500; i++) {
snows2.push(new Snow2());
}
}
function animationLoop() {
ctx.clearRect(0, 0, w, h);
drawScene();
requestAnimationFrame(animationLoop);
}
function drawScene() {
for (let i = 0; i < snows.length; i++) {
snows[i].update();
snows[i].draw();
}
for (let i = 0; i < snows2.length; i++) {
snows2[i].update();
snows2[i].draw();
}
}
function getRandomInt(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
class Snow {
constructor() {
this.reset();
this.rgb = "243, 243, 243";
}
reset() {
this.x = getRandomInt(0, w);
this.xc = ((this.x - (w / 2)) / (w / 2)) / 2;
this.y = getRandomInt(-(h * 0.3), h);
this.yc = getRandomInt(10, 15) / 10;
this.size = getRandomInt(10, 20) / 10;
this.a = getRandomInt(-10, 0) / 10;
this.ac = getRandomInt(3, 5) / 100;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.rgb}, ${this.a})`;
ctx.strokeStyle = `rgba(${this.rgb}, ${this.a})`;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
update() {
this.x += this.xc;
this.y += this.yc;
this.a += this.ac;
if (this.a > 2) {
this.ac *= -1;
} else if (this.a < 0 && this.ac < 0) {
this.reset();
}
}
}
class Snow2 {
constructor() {
this.reset();
this.rgb = "243, 243, 243";
}
reset() {
this.x = getRandomInt(0, w);
this.y = getRandomInt(0, h);
this.size = getRandomInt(0, 5) / 10;
this.a = getRandomInt(-10, 0) / 10;
this.ac = 0.01;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.rgb}, ${this.a})`;
ctx.strokeStyle = `rgba(${this.rgb}, ${this.a})`;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
update() {
this.y -= 0.1;
this.a += this.ac;
if (this.a > 1.5) {
this.ac *= -1;
} else if (this.a < 0 && this.ac < 0) {
this.reset();
}
}
}
window.addEventListener("DOMContentLoaded", init);
window.addEventListener("resize", resizeReset);