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?
Advertisement
Answer
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); }; });