Addons - q5js/q5.js GitHub Wiki

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

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

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

<script type="module" src="https://q5js.org/q5.js"></script>

<!-- load addons after q5 -->

<script type="importmap">
  { "imports": {
    "box2d3-wasm": "https://q5play.org/Box2D.deluxe.mjs"
  } }
</script>
<script type="module" src="https://q5play.org/q5play.js"></script>

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

Here's a simple example of how to add a lifecycle hook to q5 that runs before the user's draw function.

/* addon.js */

Q5.addHook('predraw', function () {
  const $ = this;
  $.background('pink');
});

/* sketch.js */

function draw() {
  circle(mouseX, mouseY, 50);
}

There are 6 lifecycle hooks:

• "init" (legacy hook, runs before preload)
• "presetup"
• "postsetup"
• "predraw"
• "postdraw"
• "remove"

q5 can load addons made for p5 because it supports p5.registerAddon from v2 and p5.prototype.registerMethod from v1. q5 also adds p5 to the global scope as an alias for Q5.

More info: https://dev.to/limzykenneth/designing-an-addon-library-system-for-p5js-20-3d4p

In q5 an input param, q, is passed to lifecycle hook functions. Note that this feature is not available in p5.

q is a JS Proxy between the q5 instance and copies of non-Object properties in the global scope (if global mode is enabled). It's faster than the getter/setters that p5 uses for properties set on window. For example, q.frameCount++ updates the frame count number stored in $.frameCount and window.frameCount literally. For best performance, your addon should only use q to update the value of non-Objects.