I have two sketches that I would like to run on a single page and the only way this is possible with instance mode. I am just not sure how to incorporate classes used in those sketches in instance mode. Has anyone done this successfully and wouldn’t mind sharing their code? Really any help at all is appreciated.
We can put extra sketches in their own <iframe> tag, regardless if they’re global or instance mode.
Some example sketch using both modes + class:
.block
height: 650
scrolling: no
border: yes
license: cc-by-4.0adjustFrameSize.js
'use strict';
p5.prototype.adjustFrameSize = function () {
if (frameElement) {
frameElement.height = frameElement.frameBorder = 0;
frameElement.height = this.getDocHeight() + 'px';
frameElement.width = this.getDocWidth() + 'px';
}
};
show original
all.html
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>
<script defer src=global.js></script>
<iframe src=global.html></iframe>
<script defer src=instance.js></script>
<script defer src=instance.js></script>
There are more than three files. show original
Same sketch but also using a 3rd-party library + import & export:
Thank you! This is exactly what I needed.