I'm trying to convert some code I wrote for processing.js to use p5.js. In the existing code, I create an object with a statement like processing = new Processing(canvas, p => (p.draw = draw_frame))
with the canvas defined in HTML as <canvas id="canvas"></canvas>
, and any Processing functions and properties are attached to the processing object. For example, to draw a triangle, I would write code like self.processing.triangle(...)
. In p5.js, all of the common functions seem to be defined globally. Is there a way to use p5.js in a way that doesn't pollute the global scope?
Sounds like you're looking for instance mode.
Here's an example from that page:
let myp5 = new p5(( sketch ) => {
let x = 100;
let y = 100;
sketch.setup = () => {
sketch.createCanvas(200, 200);
};
sketch.draw = () => {
sketch.background(0);
sketch.fill(255);
sketch.rect(x,y,50,50);
};
});