Html_Graphics/matrix2.html at main · mertuarez/Html_Graphics · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix</title>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
 body {
  background: black;
 }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
/* fork of: https://codepen.io/t3h2mas/pen/EKYOWO/
 */
var drawer, c, ctx, speed, rainColor, mtrx2, test,font_size,drops;

function draw() {
  //Black BG for the canvas
  //translucent BG to show trail
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);

  ctx.fillStyle = rainColor; //green text
  ctx.font = font_size + "px arial";
  //looping over drops
  for (var i = 0; i < c.width; i = i + font_size) {
    // send to get rand character
    test = mtrx2[Math.floor(Math.random() * mtrx2.length)];

    ctx.fillText(test, i, drops[i]);

    if (Math.random() > 0.277)
      drops[i] = ((drops[i] || 0) + font_size) % c.height;
  }

  ctx.beginPath();
  ctx.lineWidth = "1";
  ctx.strokeStyle = "#50FF50";
  ctx.fillStyle = "black";
  ctx.rect(c.width/2 - 50, c.height/2 - 20, 150, 40);
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle = rainColor;
  ctx.fillText("System Offline", c.width/2 - 10, c.height/2 + 3);
}

function init() {
  speed = 40;
  rainColor = "#50FF50";
  mtrx2 = "0123456789".split("");
  font_size = 10;
  drops = [];

  clearInterval(drawer);
  $("#c").remove();
  $(
    '<canvas id="c" style="position:fixed;top:0;left:0;z-index:9999999">'
  ).appendTo($("body"));
  c = document.getElementById("c");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.weight);

  drawer = setInterval(draw, speed);
}
/* --------------------------------- */


window.onclick = function (e) {
  clearInterval(drawer);
  $("#c").remove();
};

window.onload = init;
window.onresize = init;
</script>
</head>
<body>
<p>
<a href="javascript:init()">Knock knock neo...</a>
</p>
</body>
</html>