Addons - q5js/q5.js GitHub Wiki

An addon is software that adds on functionality to an existing software system.

q5 is compatible with popular p5.js Addon Libraries, such as p5.sound, ml5.js, and p5play.

To use addons, simply load them after q5.js:

<script src="https://q5js.org/q5.js"></script>
<!-- load p5 addons after q5 -->
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script>

Consider as a first step, posting your idea for a q5.js addon in the #dev channel of the q5 Discord Server. Check if other people would be interested in using it. For your addon to be featured on q5js.org, it needs to have broad appeal and good documentation.

q5 is compatible with p5 Addons because it aliases Q5 to p5 and also implements the p5.prototype.registerMethod function, so you can develop addons for q5 the same way you would for p5.js v1.

Q5.prototype.registerMethod('init', function() {
  // runs upon the initialization of an instance of Q5, before `preload`
});

Q5.prototype.registerMethod('pre', function() {
  // runs before each `draw` call
});

Q5.prototype.registerMethod('post', function() {
  // runs after each `draw` call
});

You can also get q5-core to load your addon the same way it loads q5's source modules. See the "Modular Use" wiki page for more info.

Q5.modules.yourAddon = ($, q) => {
  // your addon code
};

Note the parameter $ is the instance of q5. When global mode is enabled, all q5 instance variables are made available in the global scope. If you'd like to keep a q5 instance property "private", prefix it's name with an underscore.

q is a proxy between the q5 instance and copies of non-Object properties in the global scope (if global mode is enabled). Only use q to update the value of non-Object properties.

Look at q5's source code as examples of how to make addons for q5.