# Ichthyarchy: The Domain of Fishes

**URL:** <https://discourse.processing.org/t/ichthyarchy-the-domain-of-fishes/38913>\
**Category:** Gallery\
**Created:** [September 21, 2022, 12:40pm UTC](https://discourse.processing.org/t/ichthyarchy-the-domain-of-fishes/38913 "2022-09-21T12:40:24Z")\
**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:** [September 21, 2022, 5:09pm UTC](https://discourse.processing.org/t/ichthyarchy-the-domain-of-fishes/38913/4 "2022-09-21T17:09:14Z")

</div>

> [@quark](#):
>
> The advantage of using instance mode is that you can have multiple sketches on the same webpage.

For completeness’ sake we can also have multiple global mode sketches as long as they live in separate `<iframe>`:  
[https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

> [@quark](#):
>
> Now the sketch will _only_ respond to mouse clicks on its _own canvas_…

Using a more p5js style, we can call [p5.Element](https://p5js.org/reference/#/p5.Element)::**[mousePressed()](https://p5js.org/reference/#/p5.Element/mousePressed)** method over the [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object returned by [**createCanvas()**](https://p5js.org/reference/#/p5/createCanvas), and then apply [**noLoop()**](https://p5js.org/reference/#/p5/noLoop) or [**loop()**](https://p5js.org/reference/#/p5/loop) to the sketch inside its callback:

* * *

## Global Mode Version:

```javascript
var paused;

function setup() {
  createCanvas(800, 600).mousePressed(togglePause);
  frameRate(2);
}

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

function togglePause() {
  if (paused ^= true) noLoop();
  else loop();
}

```

* * *

## Instance Mode Version:

```auto
new p5(p => {
  var paused;

  p.setup = function () {
    p.createCanvas(800, 600).mousePressed(togglePause);
    p.frameRate(2);
  };

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

  function togglePause() {
    if (paused ^= true) p.noLoop();
    else p.loop();
  }
});

```

* * *

---

_[View the full topic](https://discourse.processing.org/t/ichthyarchy-the-domain-of-fishes/38913)._