Embedding Matrix - PenguiniVogel/Matrix GitHub Wiki

Basics

To get started embedding, head over to the release section and get the most recent stable build.

After you have done that, you can include the JavaScript file matrix.min.js into your website by either including it in the <head> or <body>

<html>
  <head>
    <!-- either put it here -->
    <script src="matrix.min.js"></script>
  </head>
  <body>
    <div id="my_canvas_container"></div>
    <!-- or here -->
    <script src="matrix.min.js"></script>
  </body>
</html>

I recommend putting it at the end of the body, as by then all DOM has loaded.

Adding your Custom FX

Want to make Custom FX? Read more here

Custom FX HAS to be added AFTER the core script.

<script src="matrix.min.js"></script>
<!-- Add Custom FX -->
<script src="customfx.js"></script>
Starting the Matrix!

In order to get the matrix to actually display, we have to create and start it.
Remeber: The Matrix HAS to be started AFTER you added the core and all your Custom FX!

<script src="matrix.min.js"></script>
<!-- Add Custom FX -->
<script src="customfx.js"></script>
<!-- Start Matrix -->
<script>
  // Create a Matrix with default options
  Matrix.create('#my_canvas_container');

  Matrix.start();
</script>

You can make a TypeScript starting script in order to utilize the typing it provides, especially for the settings.

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

Matrix.create('#my_canvas_container', {
  width: '100px',
  height: '100px'
});

Matrix.Settings.setColor('#9e34eb');

Matrix.start();

You can view all settings here

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