Need help with jcubic/cmatrix?

There is 1 helper available for jcubic/cmatrix on our platform. If you're new to LTH, please see our FAQ for more information on what it is we do.

Qualified Helpers
jcubic
owner From $50 / 30 mins
Get help from jcubic

jcubic/cmatrix

CMatrix - Matrix effect in JavaScript

npm version LICENSE MIT jsDelivr CDN download counter

Matrix animation effect in JavaScript using Canvas

Screenshot of a browser window with Matrix rain effect, green letters that look like Japanese on black background

Installation

npm install cmatrix

Demos

Usage

You can use CDN:

<script src="https://cdn.jsdelivr.net/npm/cmatrix"></script>

and intialize the effect.

matrix(canvasElement, {
  chars: ['0', '1'],
  font_size: 16
}).
matrix(canvasElement, {
  chars: matrix.range(0x30A1, 0x30F6).concat(matrix.range(0x0030, 0x0039)),
  font_size: 16
}).

The matrix function return a Promise that is resolved when exit. By default, q and ESC exit from the effect. Use exit: false to disable ending of the animation.

Repo Link

Options

  • chars - array of single character strings, by default Katagana and Hiragana (Japanese characters are used).
  • exit - by default matrix return a promise that resolves when it ends (when someone press q or ESC) this option when set to false will disable this and the function return undefined.
  • color - default color - default is #0f0.
  • width - width of the Canvas, default full screen.
  • height - height of the Canvas, default full screen.
  • resize - if the size is constant (you specify the width and height options) you should set it to false.
  • background - by default it's set rgba(0, 0, 0, 0.05) alpha is required for the effect to look good.
  • font_size - number the default is 14.
  • mount: (matrix) => void - callback function which is executed with single argument that is instance of internal Matrix object when initializing.
  • unmount: (matrix) => void - callback function which is executed when Matrix effect is destroyed.
  • font - name of the font (default monospace).

Matrix instance methods

  • start() - start the animation
  • stop() - stop the animation
  • resize(width, height) - resize the canvas to the given width and height
  • clear() - clear the canvas
  • reset() - reset the internal state the effect
  • fullscreen() - toggle fullscreen
  • render() - render single frame using internal state

Static methods

  • matrix.range(start_number, end_number) - returns characters created from given range. Use matrix.range(0x30A1, 0x30F6) for Katagana characters and matrix.range(0x3041, 0x3096) for Hiragana, they look nice as matrix rain.
  • matrix.custom_chars - array containing all characters for custom matrix font in this repository.

Changelog

0.5.0

  • add width, heigth, resize options
  • add matrix.custom_chars that contains all characters for for custom matrix font.

0.4.0

  • add fullscreen() method
  • add mount and unmount option
  • expose Matrix class instance
  • fix flash of distorted rain when changing orientation on mobile

0.3.1

  • fix clearing state on subsequent calls to matrix #2

0.3.0

  • add support for custom font

0.2.0

  • add exit/color/background options

0.1.1 / 0.1.0

  • Initial version

Acknowledge

License

Copyright (C) 2021-2023 Jakub T. Jankiewicz Released under MIT License

Our Mission

We want to make open source more sustainable. The entire platform was born from this and everything we do is in aid of this.

Interesting Articles

Thank you for checking out LiveTechHelper |
2024 © lth-dev incorporated

p-72edd34b