DEV Community

Cover image for Matrix (and perlish) background effect in Javascript :)
Tib
Tib

Posted on

Matrix (and perlish) background effect in Javascript :)

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

My Matrix-perlish background! ๐Ÿ˜Ž ๐Ÿ˜Ž ๐Ÿ˜Ž

Perl Matrix

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
raigaurav profile image
Gaurav Rai • Edited

Time to use this and become hacker in front of non-technical person.
Good to have background as black and text in green for more feeling.

Hackerman

Collapse
 
thibaultduponchelle profile image
Tib

๐Ÿ˜‚

Your comment makes me think about hollywood

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary • Edited

Tip: You can use the character map app in windows to copy some extra-special characters and get a lot more variety than just standard keyboard characters

character map app is an app built-in to windows so you can types extra special charecters you normally woudn't be able to

also you can add a styles tag and say overflow: hidden; and press fn+f11 to get the full experience

Collapse
 
mjgardner profile image
Mark Gardner

Well, that's one way to confirm to people that Perl is just line noise. ๐Ÿ˜‰