Multiple sketches in instance mode

p5.js Coding Questions
1

I am quite new to p5 and am struggling to achieve multiple canvases on a single webpage. I can manage to to get two running, using two instance functions, but I can’t figure out how to position them off their default position. Is there a way to do this from in the sketch itself or is it better to use the html file?

Ideally, I want to have 8 sketches, whose size and positioning is based on the width of the display, and ideally only run fully when they are visible on the page (i.e. as you scroll down the page). I’ve looked for similar examples, but cannot seem to find any, so any advice about the best way to achieve this would be really appreciated!

Thanks so much.

1 Like
2
3 Likes
3

Hi there,

In my blog math-os.com, some posts include multiple P5 sketches. For instance :

I guess that more and more sketches in a single post consume more and more ressources. Does anyone know how to “activate” a sketch only if it is visible ? Or only if one explicitly asks for it to be active (by pressing a button) ?

René

1 Like
4

Indeed it is so. But we can try to mitigate some of it.

If you have a sketch which just displays a static drawing you can call noLoop() to halt the sketch:

'use strict';

function setup() {
  createCanvas(500, 400);
  noLoop();
}

Or if you have a sketch which only needs to update the canvas after a user input such as moving the mouse, besides using noLoop() you also call redraw() within the user input event callback:

'use strict';

function setup() {
  createCanvas(500, 400).mouseMoved(mouseMovedEvent);
  noLoop();
}

function draw() {
  background('#' + hex(~~random(0x1000), 3));
}

function mouseMovedEvent() {
  redraw();
}

For a more general approach you can attach the noLoop() & loop() functions to the canvas onmouseout() & onmouseover() listeners:

'use strict';

function setup() {
  createCanvas(500, 400);
  noLoop();

  canvas.onmouseout  = () => this.noLoop();
  canvas.onmouseover = () => this.loop();
}

function draw() {
  background('#' + hex(~~random(0x1000), 3));
}

Check it out the example above running online on the link below:

BtW, I also made an instance mode for the “Mouse Loop Toggle Events” example sketch:

/**
 * Mouse Loop Toggle Events (v1.0.0)
 * GoToLoop (2021-Aug-21)
 *
 * Discourse.Processing.org/t/multiple-sketches-in-instance-mode/11222/4
 * Bl.ocks.org/GoSubRoutine/ed99264642c99e34919e5a6921ec1760
 *
 * Bl.ocks.org/GoSubRoutine/raw/
 * ed99264642c99e34919e5a6921ec1760/index.instance.html
 */

'use strict';

new p5(p => {
  p.setup = function () {
    p.createCanvas(500, 400)//.mouseMoved(mouseMovedEvent);
    p.noLoop();

    p.canvas.onmouseout  = () => p.noLoop();
    p.canvas.onmouseover = () => p.loop();
  };

  p.draw = function () {
    p.background('#' + p.hex(~~p.random(0x1000), 3));
  };

  function mouseMovedEvent() {
    p.redraw();
  }
});