# Multiple instances of the same p5js sketch?

**URL:** <https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765>\
**Category:** Beginners\
**Created:** [February 12, 2020, 5:53am UTC](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765 "2020-02-12T05:53:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![89apt89](https://avatars.discourse-cdn.com/v4/letter/8/b2d939/32.png) [@89apt89](https://discourse.processing.org/u/89apt89)\
**Post date:** [February 12, 2020, 5:53am UTC](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765/1 "2020-02-12T05:53:47Z")

</div>

Hello. I’m looking for a way to put multiple instances of the same p5js sketch on my site. I know the obvious method is copy-and-pasting my sketch.js and changing the IDs for each, but I want to have a dynamic amount of instances of the sketch. Thank you for any help!

This is my sketch: [https://hastebin.com/zuhenivaba.js](https://hastebin.com/zuhenivaba.js)

---

<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:** [February 12, 2020, 6:21am UTC](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765/2 "2020-02-12T06:21:32Z")

</div>

B/c it’s a global mode sketch, you can have at most 1 per page.

As a workaround, you can place other global mode instances of it inside their own `<iframe>` tag:

- [Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

Or simply convert it to instance mode, so you can have multiples of it on the same page context:

- [GitHub.com/processing/p5.js/wiki/Global-and-instance-mode](http://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode)

Here’s an example of 4 instances of the same sketch running on the same page:

- [Matter-js-Bouncing-Colorful-Balls.Glitch.me/all.html](http://Matter-js-Bouncing-Colorful-Balls.Glitch.me/all.html)

Go to the link below for its full source code:

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Check out ~matter-js-bouncing-colorful-balls on Glitch, the friendly community where everyone can discover & create the best apps on the web.

Just click the button “View Source”.