-
Notifications
You must be signed in to change notification settings - Fork 0
/
matrix.html
103 lines (83 loc) · 2.54 KB
/
matrix.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
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
<style>
body {
background-color: black;
}
p {
font-family: 'VT323';
font-size : 12px;
color: green;
}
</style>
</head>
<body>
<p class="matrix"></p>
</body>
<script type="text/javascript">
xDist = 12;
yDist = 12;
colourPhases = 40;
maxRainThreads = 300;
rainSpeed = 50;
windowWidth = 0;
dropMatrix = [];
function addRain() {
newX = Math.floor((Math.random() * windowWidth + 1));
newY = Math.floor((Math.random() * 800 + 1));
dropMatrix.push({
x: newX,
y: newY,
i: 0,
d: [{x: newX, y: newY}]
});
}
function removeOldestParent(rain) {
oldest = rain.d[0];
$("#drop-" + oldest.x + "-" + oldest.y).remove();
rain.d.shift();
}
function addNewDrop(rain) {
oldest = rain.d[rain.d.length-1];
newXPos = oldest.x;
newYPos = oldest.y + yDist;
//randomLetter = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0,1);
randomLetter = String.fromCharCode(Math.floor((Math.random() * 1000)+65393));
rain.i++;
rain.d.push(
{
x: newXPos,
y: newYPos
}
);
newPosString = newXPos.toString() + "-" + newYPos.toString();
$(".matrix").append("<p id='drop-" + newPosString + "'>" + randomLetter + "</p>");
$('#drop-' + newPosString).css('color', function() {
return (rain.i === colourPhases ? 'rgb(255,255,255)' : 'rgb(0,' + Math.floor(255 * (rain.i)/colourPhases) + ',0)');
});
$('#drop-' + newPosString).css({
position : 'absolute',
top : newYPos,
left : newXPos
});
}
function nextDrop() {
dropMatrix.forEach(function(rain, idx) {
if (rain.i === colourPhases) {
rain.d.length === 0 ? dropMatrix.splice(idx, 1) : removeOldestParent(rain);
} else {
addNewDrop(rain);
}
});
}
$(document).ready(function () {
windowWidth = $( window ).width();
setInterval(function() {
if (dropMatrix.length < maxRainThreads) {
addRain();
}
nextDrop();
}, rainSpeed);
});
</script>