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('instance');

q.setup = () => {
  q.createCanvas(400, 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('instance');

with (q) {
  q.setup = () => {
    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);