Instance Mode

q5 introduces a new namspaced instance mode that enables multiple sketches to run on one page. You can call the instance variable whatever you like.

let q = new Q5('namespace');
q.createCanvas(400);

q.draw = () => {
  q.background(100);
};

This example shows how you can avoid prefacing every q5 function and variable with q. by using a JS with statement.

let q = new Q5('namespace');

with (q) {
  createCanvas(400, 400);

  q.draw = () => {
    background(100);
  };
}

For backwards compatibility, the Q5 constructor also supports p5's function-scoped instance mode, which is deprecated.

let sketch = (q) => {
  with (q) {
    q.setup = () => {
      createCanvas(400, 400);
    };

    q.draw = () => {
      background(100);
    };
  }
};

let q = new Q5(sketch);