p5.js global mode versus instance mode for multiple sketches on one page

Direct Answer

Use instance mode for multiple independent p5.js sketches on one page. It scopes each sketch's variables, canvas, and draw loop to a dedicated p5 instance, preventing the window-level collisions that global mode causes. However, instance mode does not create a separate JavaScript realm—sketches still share the same p5 library, DOM, browser event loop, and GPU resources.

Why Instance Mode Is Preferable (Confirmed Behavior)

• Each sketch receives its own p5 object passed to a wrapper function (e.g., new p5(sketch, container)).
• Variables declared inside the wrapper (e.g., let x = 0;) stay local to that function closure; they never attach to window.
• Each instance creates its own canvas element inside the specified container, so background(), draw(), and mouse/keyboard handlers operate on that canvas only.
• Global mode, by contrast, runs setup() and draw() as properties of window, so a second sketch overwrites the first's functions and shares a single implicit canvas.

Shared-State Risks That Remain in Instance Mode

1. Prototype Mutations from Extensions

Third-party p5 add-ons that extend p5.prototype (e.g., p5.prototype.myEffect = ...) affect every instance on the page because all instances inherit from the same prototype.

2. Library-Wide Configuration

Calls like p5.disableFriendlyErrors() or p5._friendlyError = false are global; they cannot be scoped per instance.

3. WebGL Context Limits

Each WEBGL canvas consumes a GPU context. Browsers impose a hard limit (often 8–16 contexts). Running many WEBGL sketches simultaneously can exhaust this pool, causing later canvases to fall back to 2D or fail silently.

4. Ambiguous Input Events

If you attach raw window.addEventListener('mousemove', ...) or keyPressed() without scoping to the instance's canvas, events fire for every sketch. Use the instance's mouseX/mouseY (relative to its canvas) and bind listeners via instance.canvas.addEventListener(...).

Minimal Verification Steps

1. Create two instance-mode sketches, each in its own <div id="sketch1">/sketch2 container.
2. Inside each wrapper, declare a uniquely named variable (e.g., let sketch1Value = 42;).
3. Open DevTools console and confirm window.sketch1Value and window.sketch2Value are undefined.
4. Call background(255,0,0) in sketch1's draw() and background(0,0,255) in sketch2's; verify only the targeted canvas changes color.

One Diagnostic Detail That Could Change the Recommendation

Are any of your sketches using WEBGL and running simultaneously? If yes, count the concurrent WEBGL canvases and test against the browser's context limit (typically 8–16). Exceeding it forces fallback or failure, which no mode choice can avoid.