Instance mode creating two canvas

GoToLoop · October 6, 2019, 10:30pm

You could simply use global mode!

If you need to have more than 1 sketch in the same page you can place the others within their own <iframe>.

Bl.ocks.org/GoSubRoutine/raw/60b154e52336f7fee7c5f1fe817ceb22/

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

ball.js

class Ball {
  constructor(p = p5.instance) {
    this.p = p;
    this.pos = p.createVector();
    this.vel = p.createVector();
    this.reset();
  }

  reset() {
    const { p, pos, vel, VEL, MIN_RAD, MAX_RAD, ALL_COLORS } = this,

This file has been truncated. show original

There are more than three files. show original

Topic		Replies	Views
Multiple canvas class Development	6	1670	August 3, 2020
Multiple p5 sketches on one page Beginners	2	1135	February 24, 2021
Multiple sketches in instance mode Coding Questions	3	609	August 21, 2021
How do you combine canvases in p5j weather you overlap or organise them Coding Questions	8	1506	April 20, 2019
Switch Between Multiple p5.js Sketches in Single Webpage Project Guidance	4	2524	April 6, 2019

Instance mode creating two canvas

Related Topics