# Multiple sketches in instance mode

**URL:** <https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222>\
**Category:** Coding Questions\
**Created:** [May 14, 2019, 12:28pm UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222 "2019-05-14T12:28:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cnie](https://avatars.discourse-cdn.com/v4/letter/c/71e660/32.png) [@cnie](https://discourse.processing.org/u/cnie)\
**Post date:** [May 14, 2019, 12:28pm UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222/1 "2019-05-14T12:28:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 14, 2019, 2:23pm UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222/2 "2019-05-14T14:23:10Z")

</div>

> [@Best strategy to run multiple p5 sketches on a page](https://discourse.processing.org/t/best-strategy-to-run-multiple-p5-sketches-on-a-page/216/3):
>
> Still researching the responsive canvas topic. sweat For now I’ve got this gist which attempts to adjust the current iframe element to fit document’s body size: radioactive And an online sketch example using that running as 2 iframes: sparkles[https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/](https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/) And its corresponding repo too: warning

---

<div class="post-metadata">

**Author:** ![adren13](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/adren13/32/14243_2.png) [@adren13](https://discourse.processing.org/u/adren13)\
**Post date:** [August 21, 2021, 10:51am UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222/3 "2021-08-21T10:51:02Z")

</div>

Hi there,

In my blog [math-os.com](http://math-os.com), some posts include multiple P5 sketches. For instance :

> **[La lemniscate de Bernoulli - Math-OS](https://math-os.com/lemniscate/)**
>
> Cet article propose de (re)découvrir la célèbre lemniscate de Bernoulli en la présentant sous toutes ses coutures (ou presque).

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é

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 21, 2021, 9:46pm UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222/4 "2021-08-21T21:46:48Z")

</div>

> [@adren13](#):
>
> I guess that more and more sketches in a single post consume more and more resources.

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:

- [reference | p5.js](http://p5js.org/reference/#/p5/noLoop)

```auto
'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:

- [reference | p5.js](http://p5js.org/reference/#/p5/redraw)
- [reference | p5.js](http://p5js.org/reference/#/p5.Element/mouseMoved)

```auto
'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:

- [reference | p5.js](http://p5js.org/reference/#/p5/loop)

> **[Element: mouseout event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event)**
>
> The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.

> **[Element: mouseover event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)**
>
> The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.

```auto
'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:

> <https://gist.github.com/GoSubRoutine/ed99264642c99e34919e5a6921ec1760>
>
> There are more than three files. show original

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

- [Bl.ocks.org/GoSubRoutine/raw/ed99264642c99e34919e5a6921ec1760/index.instance.html](http://Bl.ocks.org/GoSubRoutine/raw/ed99264642c99e34919e5a6921ec1760/index.instance.html)

```auto
/**
 * 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();
  }
});

```