Best strategy to run multiple p5 sketches on a page

GoToLoop · May 22, 2018, 1:36am

Still researching the responsive canvas topic.

For now I’ve got this gist which attempts to adjust the current iframe element to fit document’s body size:

gist.github.com

https://gist.github.com/GoToLoop/9eeb3ea918e9e149ba3c6c717cfb16e1

adjustFrame.js

'use strict';

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

This file has been truncated. show original

frameResize.coffee

'use strict'

adjustFrameSize = ->
  if frameElement
    frameElement.height = frameElement.frameBorder = 0
    frameElement.height = getDocHeight() + 'px'
    frameElement.width  = getDocWidth()  + 'px'


getDocWidth = ->

This file has been truncated. show original

frameResize.js

// @ts-check

"use strict";

function adjustFrameSize() {
  /** @type {HTMLIFrameElement} */
  const frame = frameElement;

  if (frame) {
    frame.height = frame.frameBorder = '0';

This file has been truncated. show original

There are more than three files. show original

And an online sketch example using that running as 2 iframes:
https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/

And its corresponding repo too:

Topic		Replies	Views
Multiple sketches in instance mode Coding Questions	3	654	August 21, 2021
Multiple p5 sketches on one page Beginners	2	1179	February 24, 2021
Iframes + multiple sketches + webstorage api p5.js	4	1336	June 22, 2018
Multiple instances of the same p5js sketch? Beginners	1	885	February 12, 2020
Switch Between Multiple p5.js Sketches in Single Webpage Project Guidance	4	2603	April 6, 2019

Best strategy to run multiple p5 sketches on a page

Related topics