The issue actually seems to be that the p5.js library, which is the core of our doesn't work properly with importing modules.

I googled around and found some old advice:

At the bottom of the module, you have to expose the method using to the browser. Like this:

function setup() { createCanvas(800, 400); }

function draw() { background(55); }

function keyPressed() { console.log("presseed"); }

window.setup = setup;

window.draw = draw;

window.keyPressed = keyPressed;

For some reason you don't have to do that to all functions, like background(). Don't know why yet, but am looking into it.

• -----------

P5 functions that are looked up by P5 itself are in global scope. But p5 can't see into the module. Thus they have to be exposed to the window in the module itself.

This refers to setup, draw, keyPressed/released, mouse and such. Haven't looked up all functions, that P5 looks up at the time the site is loaded.

Functions that are called don't need to be specified like this, as they are all in global scope and the module has access to this already.

I'm not sure if I should follow this advice, but otherwise what could be done, if it's performant - because we're using real time serial communication data, is import all the pages that have functions to be run with the script tag on index.html, and then call the methods inside the SpiralScene directly on the class from the main setup and draw functions.

An example that works with the method above is:

let engine;

let mousyBodies = [];

let ground;

function setup() {

createCanvas(400, 400);

engine = Engine.create();

ground = new Ground(200, 390, 400, 20);

}

function draw() {

background(115, 0, 58);

Engine.update(engine);

for (let i=0; i<mousyBodies.length; i++){

mousyBodies[i].display();

}

ground.display();

}

And then having an external file imported into index.html:

class Ground {

constructor(x, y, w, h) {

this.w = w;

this.h = h;

this.body = Bodies.rectangle(x, y, this.w, this.h, {isStatic: true});

Composite.add(engine.world, this.body);

}

display() {

push(); // push() and pop() = drawing group where transformations apply

rectMode(CENTER);

let x = this.body.position.x;

let y = this.body.position.y;

translate(x, y);

noStroke();

fill(60, 21, 78); // color fill

rect(0, 0, this.w, this.h);

pop();

}

}

Solution

// Under draw function & existing code:

// Expose functions to the global scope
window.preload = preload;
window.setup = setup;
window.draw = draw;