HTML5-Matrix/the-matrix-2.htm at master · DavidGarciaCat/HTML5-Matrix · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Matrix Rain</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: black;
    }
    #q {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<canvas id="q"></canvas>

<script>
(function() {
  let canvas = document.getElementById('q');
  let ctx = canvas.getContext('2d');
  let drops = [];
  let width, height, columns;

  function init() {
    // Set canvas to full window size
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;

    // Each column is 10px wide, so figure out how many columns fit
    columns = Math.floor(width / 10);
    // Reset the drop array so there's one "drop" per column
    drops = Array(columns).fill(1);
  }

  function draw() {
    // Slightly clear the canvas with a black rectangle at some transparency
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.fillRect(0, 0, width, height);

    // Set the color to a bright green
    ctx.fillStyle = '#0F0';

    // Loop over drops
    for (let i = 0; i < drops.length; i++) {
      // Random character
      let text = String.fromCharCode(0x30A0 + Math.floor(Math.random() * 33));
      ctx.fillText(text, i * 10, drops[i] * 10);

      // Send drop down one line
      drops[i]++;

      // If drop is off screen, reset to the top randomly
      if (drops[i] * 10 > height && Math.random() > 0.975) {
        drops[i] = 0;
      }
    }
  }

  // Re-init on resize so it covers new window size
  window.addEventListener('resize', init);

  // Start everything up
  init();
  setInterval(draw, 33);
})();
</script>

</body>
</html>