Best strategy to run multiple p5 sketches on a page

p5.js Project Guidance
1

I’m doing a project which is about creating an environment in which teachers can use interactive simulations made with p5.js for teaching. Here is the prototype.

http://test.anybodycanlearn.org/

In this, it is only possible to load one simulation at a time. I’m trying to find a way to bring more than one simulations in a page. From what I’ve found by going through many discussions in the past, the best way (Please tell me if you are aware of any bettter methods) to implement this as far as I searched is Iframes (Without the difficulties of writing sketch in instance mode), an Iframe for each sketch. I’m also trying to combine my project with online p5 text editor. Since it has an option for exporting Iframes, teachers can design and develop simulations in online text editor and export the iframe to my app. But there are some challenges which are

  1. Adjusting the size of the iframe according to the inner sketch.

  2. I want the teachers to be able to use a library called quicksettings which has some basic ui (sliders, checkboxes) which can be used by the them for adjusting the parameters in the simulation. But quicksettings produces a modal box. I need to be able to bring the modal box out of the Iframe.

The first problem I’m planning to solve is by accepting the size of the simulation from the user to adjust the size of the iframe accordingly.

I don’t have any idea if the second problem is solvable.

I need some guidance in this. Thanks

1 Like
2

Very cool site concept of a whiteboard-plus-app-dashboard. If I’m understanding the concept right, the main area idea reminds me a bit of the macOS dashboard area – although I’m not clear on how multiple apps would know which shared controls affect them.

I’m not sure if you have already considered this or how this might meet your requirements, but an alternative to the iframe approach is to use instanceMode and namespace the sketches.

2 Likes
3

Still researching the responsive canvas topic. :sweat:

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

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

And its corresponding repo too: :warning:

2 Likes
4

I have looked about name spacing and instance mode. But the whole idea is making the coding for teachers as easy as possible. The global mode of p5 sketches have this very beautiful structure

function setup(){
…
}

function draw(){
…
}

I don’t want the teachers to go through the difficulties of writing sketches in the instance mode. That’s the reason why I chose iframes.

5

The solution that you gave, the document in the iframe has to have the same domain as the page on which it is embedded? Isn’t it?

6

Most certainly is! It’d be some kinda Internet hecatombe if an iframe from some remote site could freely access the parent DOM of our local site! :scream:

Seems like there are some complicated workarounds for it. :v:
Indeed I’ve found out some links about it. But haven’t read any of them yet: :see_no_evil:


http://www.dyn-web.com/tutorials/iframes/postmessage/

1 Like