How to use classes in instance mode?

josephcscarpa · March 19, 2020, 5:10pm

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.

GoToLoop · March 19, 2020, 5:48pm

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:

gist.github.com

https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22

.block

height: 650
scrolling: no
border: yes
license: cc-by-4.0

adjustFrameSize.js

'use strict';

p5.prototype.adjustFrameSize = function () {
  if (frameElement) {
    frameElement.height = frameElement.frameBorder = 0;
    frameElement.height = this.getDocHeight() + 'px';
    frameElement.width  = this.getDocWidth()  + 'px';
  }
};

This file has been truncated. 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:

Glitch :･ﾟ✧

josephcscarpa · March 23, 2020, 2:00pm

Thank you! This is exactly what I needed.

Topic		Replies	Views
Combining classes and instance mode in p5js? Coding Questions	1	280	July 17, 2022
Help with instance mode? Coding Questions	1	391	December 16, 2018
Instance mode creating two canvas Coding Questions	8	3211	October 7, 2019
Switch Between Multiple p5.js Sketches in Single Webpage Project Guidance	4	2602	April 6, 2019
How to adapt a library for Instance Mode (P5JS) Development	7	1834	June 3, 2019

How to use classes in instance mode?

Related topics