Matrix Digital Rain Effect In JavaScript – matrixrain.js

matrixrain.js is a JavaScript library for creating a matrix digital rain effect featured in The Matrix series.

How to use it:

1. Load the matrixrain.js JavaScript in the document.

<script src="matrixrain.js"></script>

2. Create an HTML5 canvas on which the library renders the Matrix Digital Rain Effect.

<canvas id="canvas"></canvas>

3. Initialize the library and done.

const matrixRain = new MatrixRain(
      element = document.getElementById("canvas"),
      // fullscreen
      width = window.innerWidth,
      height = window.innerHeight,
);

4. Override the default characters used for the falling green code.

const matrixRain = new MatrixRain(
      element = document.getElementById("canvas"),
      width = window.innerWidth,
      height = window.innerHeight,
      charList = [
        '0','1','2','3','4','5','6','7','8','9',
        'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
        '+','-','*','=','<','>',':','.',
        'ﾊ','ﾐ','ﾋ','ｰ','ｳ','ｼ','ﾅ','ﾓ','ﾆ','ｻ','ﾜ','ﾂ','ｵ','ﾘ','ｱ','ﾎ','ﾃ','ﾏ','ｹ','ﾒ','ｴ','ｶ','ｷ','ﾑ','ﾕ','ﾗ','ｾ','ﾈ','ｽ','ﾀ','ﾇ','ﾍ'
      ],
);

5. Customize the appearance of the Matrix Digital Rain Effect.

const matrixRain = new MatrixRain(
      element = document.getElementById("canvas"),
      width = window.innerWidth,
      height = window.innerHeight,
      red = 0, 
      green = 255, 
      blue = 0,
      randomColors = false,
      flowRate = 1,
      fps = 15,
);

6. Re-calculate the canvas size on window resize.

window.addEventListener("resize", () => {
  matrixRain.setCanvasDimensions(window.innerWidth, window.innerHeight);
});