Addons

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

Using Addons with q5.js

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>

Developing Addons for q5.js

Consider as a first step, posting your idea for a q5 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.

You can 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 its 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). For example, q.frameCount++ updates the frame count number stored in $.frameCount and window.frameCount. For best performance, your addon should only use q to update the value of non-Objects.

To implement a method that uses q5 v3's preload system, make it add a Promise to the $._preloadPromises array. Since v3, q5 uses Promise.all to wait until all preload promises are no longer pending before running setup and draw.

Legacy p5.js v1 Addon Support

q5 is compatible with p5 Addons because it aliases Q5 to p5 and implements p5.prototype.registerMethod. 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
});

q5 also supports registering preload methods.

Q5.prototype.registerPreloadMethod("functionName", objectWithFnProperty);

Note that legacy preload methods are responsible for calling q._decrementPreload().