Matrix Digital Rain Effect In JavaScript – matrixrain.js

Category: Animation , Javascript , Recommended | January 28, 2022
Author:jordanbkatz
Views Total:479 views
Official Page:Go to website
Last Update:January 28, 2022
License:MIT

Preview:

Matrix Digital Rain Effect In JavaScript – matrixrain.js

Description:

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);
});

You Might Be Interested In:


Leave a Reply