Search code examples
javascriptp5.jsprocessing.js

How can I use p5.js without it polluting the global scope?

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?

Solution

  • 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);
  };
});