Matrix (and perlish) background effect in Javascript :)

Published at

3/3/2021

Categories

3 categories in total

Author

19 person written this

thibaultduponchelle

open

Matrix (and perlish) background effect in Javascript :)

Today I have something useless-but-cool to show.

My Matrix-perlish background! 😎 😎 😎

Check out my github page to see a live preview 😀

It's only a couple of lines of javascript derivated from the work that you can find here or here so I deserve absolutely zero credit but I simply modified it to make it appear more perlish! 👍

(or p@r]i$% if you prefer 😀)

Below the full code:

<html>
  <head>
  </head>
  <body>
    <!-- background animations -->
    <div class="div_bg">
      <canvas id="c"></canvas>
    </div>
    <script>
      var c = document.getElementById("c");
      var ctx = c.getContext("2d");
      c.height = window.innerHeight;
      c.width = window.innerWidth;
      var txts = "~!@#$%^&*)(_-=+;:{}[]|\/<>,.";
      txts = txts.split("");
      var font_size = 12;
      var columns = c.width / font_size;
      var drops = [];
      for (var x = 0; x < columns; x++) drops[x] = 1;

      function draw() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.fillStyle = "#000";
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
          var text = txts[Math.floor(Math.random() * txts.length)];
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
          drops[i]++;
        }
      }
      setInterval(draw, 20);
    </script>
  </body>
</html>

dev-resources.site

Matrix (and perlish) background effect in Javascript :)