-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (94 loc) · 4.31 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'Matrix'; /* Nom de la police personnalisée */
src: url('mtx.ttf') format('truetype'); /* Chemin vers le fichier de police */
/* Autres propriétés de la police si nécessaire, comme font-weight, font-style, etc. */
}
body {
margin: 0;
font-family: 'Matrix';
overflow: hidden; /* Masquer tout ce qui dépasse de la fenêtre */
}
canvas {
display: block;
position:absolute;
top:0;
left:0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<canvas id="canvas2">Canvas is not supported in your browser.</canvas>
<script>
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
canvas2 = document.getElementById( 'canvas2' ),
ctx2 = canvas2.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
charArr = [
" ","ú","ù","_",".","-",",","`",";",":","+","/","'","=","a","~","^","x","v","s","*",">","<","n","ø","÷","\"","Ö","È","Ê","e","|","Ä","r","Ã","±","i","É","z","m",")","(","¹","l","¡","»","·","ã","I","}","{","]","[","ý","Ù","Ð","§","1","j","Ô","Í","¾","Â","æ","t","L","!","Ì","Á","À","º","¸","´","Ë","y","?","Ò","þ","¶","q","g","¨","p","2","Ñ","Ï","¼","²","T","f","C","J","ä","Ý","7","Ó","ü","×","©","3","Y","Ø","Î","°","Õ","½","«","5","Z","ó","õ","¿","Ç","£","ô","í","S","Æ","µ","6","¬","¢","k","d","û","b","î","à","ª","F","4","ò","X","h","Ú","¯","9","ê","P","$","#","G","á","ß","E","Û","A","¤","V","ð","ï","U","&","é","O","Þ","å","K","D","®","8","â","H","Ü","ì","R","B","ë","Q","W","¦","0","@","ñ","M","è","N","ç","¥"
],
maxCharCount = 100,
fallingCharArr = [],
fontSize = 15,
maxColums = cw / (fontSize);
canvas.width = canvas2.width = cw;
canvas.height = canvas2.height = ch;
var isFirstWave = true;
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function Point(x, y, speed) {
this.x = x;
this.y = y;
this.speed = speed;
}
Point.prototype.draw = function(ctx) {
this.value = charArr[randomInt(0, charArr.length - 1)].toUpperCase();
ctx2.fillStyle = "rgba(255,255,255,0.8)";
ctx2.font = fontSize + "px Matrix";
ctx2.fillText(this.value, this.x, this.y);
ctx.fillStyle = "#0F0";
ctx.font = fontSize + "px Matrix";
ctx.fillText(this.value, this.x, this.y);
this.y += this.speed;
if (this.y > ch) {
if (isFirstWave) {
isFirstWave = false;
}
this.y = isFirstWave ? -250 : randomFloat(-100, 0);
this.speed = isFirstWave ? fontSize : randomFloat(fontSize * 0.5, fontSize * 2);
}
}
for (var i = 0; i < maxColums; i++) {
var startX = i * fontSize;
var startY = isFirstWave ? -250 : randomFloat(-500, 0);
var speed = isFirstWave ? fontSize : randomFloat(fontSize * 0.5, fontSize * 2);
fallingCharArr.push(new Point(startX, startY, speed));
}
var update = function() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, cw, ch);
ctx2.clearRect(0, 0, cw, ch);
var i = fallingCharArr.length;
while (i--) {
fallingCharArr[i].draw(ctx);
var v = fallingCharArr[i];
}
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>