-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
matrix.js
125 lines (110 loc) · 2.03 KB
/
matrix.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
115
116
117
118
119
120
121
122
123
124
125
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = window.innerWidth;
let ch = window.innerHeight;
let charArr = [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"А",
"В",
"Г",
"Д",
"Є",
"Ѕ",
"З",
"И",
"Ѳ",
"І",
"К",
"Л",
"М",
"Н",
"Ѯ",
"Ѻ",
"П",
"Ч",
"Р",
"С",
"Т",
"Ѵ",
"Ф",
"Х",
"Ѱ",
"Ѿ",
"Ц",
];
let maxCharCount = 150;
let fallingCharArr = [];
let fontSize = 13;
let maxColumns = cw/fontSize;
canvas.width = cw;
canvas.height = ch;
let frames = 0;
class FallingChar {
constructor(x, y)
{
this.x = x;
this.y = y;
}
draw(ctx)
{
this.value = charArr[Math.floor(Math.random() * (charArr.length - 1))].toUpperCase()
this.speed = Math.random() * fontSize * 2/4 + fontSize * 1/4
ctx.fillStyle = "rgba(0,255,0)";
ctx.font = fontSize + "px san-serif";
ctx.fillText(this.value, this.x, this.y);
this.y += this.speed;
if(this.y > ch) {
this.y = Math.random() * ch/2 - 50
this.x = Math.floor(Math.random() * maxColumns) * fontSize
this.speed = - Math.random() * fontSize * 3/4 + fontSize * 3/4;
}
}
}
let update = () => {
if(fallingCharArr.length < maxCharCount)
{
let fallingChar = new FallingChar(Math.floor(Math.random() * maxColumns) * fontSize, Math.random() * ch/2 - 50)
fallingCharArr.push(fallingChar);
}
ctx.fillStyle = "rgba(0,0,0,0.05";
ctx.fillRect(0,0,cw,ch);
for(let i = 0; i < fallingCharArr.length && frames % 2 == 0; i++) {
fallingCharArr[i].draw(ctx);
}
requestAnimationFrame(update);
frames++;
};
update();