From what I've gathered, using global mode in p5 is discouraged because it pollutes the global namespace. I have used instance mode for a while, but creating dependencies is always frustrating. In order to use p5 functions, all of my functions in other files have to have the whole p5 instance passed into them. If I'm creating a bunch of entities in a project, I'm wasting a whole bunch of resources by having each of them contain the whole p5 library essentially. Is there any better way to approach this?
2 Answers
A clean option is to use browser modules. Export your sketch from its module and import it in any other modules that need access to it.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
</head>
<body>
<script src="main.mjs" type="module"></script>
</body>
</html>
main.mjs:
import sketch from "./sketch.mjs";
sketch.draw = () => {
sketch.background("yellow");
sketch.text(sketch.frameCount, sketch.width / 2, sketch.height / 2);
};
sketch.mjs:
const sketch = new p5(p => {
p.frameRate(2);
p.setup = () => {
p.background("green");
p.textAlign(p.CENTER)
};
});
export default sketch;
To run this locally, you'll need to run a web server so that the .mjs files can be served to your index.html page.
You can also build in Node.js with Parcel or Webpack, giving you all the typical design options of a multi-file environment.
Note that you don't need to export the whole p5 instance as shown above--you can expose an interface that hides the p5 instance as an internal property and exposes a series of custom functions that let clients operate on the sketch as fits your use case.
Modules simply provide a basic isolation mechanism (you don't have to attach p5 or your custom state to the window for other files to see it) and standard export/import syntax; the design you create with it is flexible.
Comments
In my understanding, you don't have to "pass" the p5 instance into your functions in other files. The p5 instance should be declared global. This should not use more resources than in the global mode case.
So rather than having all the p5 functions attached to the global window object (the global mode), now we have all of them attached to the global p5 instance object (the instance mode). It's just a matter of namespace.
Consider the example below, which is a modified version of an example on p5 website:
//sketch.js
let sketch = function(p) {
let x = 100;
let y = 100;
p.setup = function() {
p.createCanvas(700, 410);
p.background(0);
};
p.draw = function() {
p.fill(255);
p.rect(x, y, 50, 50);
};
};
var myp5 = new p5(sketch);
And you can manipulate the global myp5 instance in other files. For example, in your other.js:
//other.js
function randomBackgroundColor() {
myp5.background(myp5.random(0, 255));
}
setInterval(randomBackgroundColor, 1000); //change background color every 1000 milliseconds
Including these two js files (with sketch.js first) in your html file results in a canvas with a changing background and a rectangle.
