Creating Custom FX - PenguiniVogel/Matrix GitHub Wiki

If you haven't already, I would suggest you reading Embedding Matrix first in order to get to know the base!

Creating Custom FX is pretty straightforward (if you have used TypeScript before and you know how to use the HTML canvas)

TypeScript:

Don't forget to include the reference path to matrix.d.ts to make your life easier!

///<reference path="matrix.d.ts"/>

class MyCustomFX extends MatrixFX.FX {
  
  private mona_lisa: HTMLImageElement;  

  // you could define your own canvas in the constructor, but if you don't one is provided
  constructor() {
    super();

    mona_lisa = document.createElement('img');
    mona_lisa.src = '../..';
  }

  public resize(width: number, height: number) {
    // This gets called when the matrix container is resized
    this.ctx.drawImage(this.mona_lisa, 0, 0, width, height);
  }

  public draw() {
    // This gets called every FX update
  }

}

You can view a demo of this specific FX example here

source

Remember, your FX does not directly affect the matrix behaviour, in short, all your FX does is coloring the matrix canvas.
You can view my builtin FX:

⚠️ **GitHub.com Fallback** ⚠️