# 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:** 1\
**Showing post:** 4

<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();
  }
});

```

---

_[View the full topic](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222)._