Why p5.js Instance Mode Beats Global Mode for Multi-Sketch Pages

The collision problem

Drop two p5.js sketches onto the same HTML page using the global setup() and draw() functions and you'll see only one of them run. The second sketch overwrites window.setup and window.draw, and both end up sharing a single canvas context. Event handlers like mouseMoved also collide. This isn't a bug—it's how global mode was designed for a single sketch per page.

How instance mode isolates state

Instance mode wraps each sketch in a closure. You pass a sketch function to the p5 constructor, and that function receives a p instance. Every p5 call becomes p.createCanvas(), p.background(), p.ellipse(), etc. The constructor also accepts a parent DOM element, so the canvas is appended exactly where you want it. Variables, callbacks, and the animation loop stay inside that closure—no window pollution.

Minimal two-sketch example

Save this as an HTML file and open it. Both sketches animate independently.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Two instance-mode sketches</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.min.js"></script>
</head>
<body>
  <div id="left" style="float:left; margin:10px"></div>
  <div id="right" style="float:left; margin:10px"></div>
  <script>
    const sketchA = (p) => {
      p.setup = () => p.createCanvas(200, 200).parent('left');
      p.draw = () => {
        p.background(220);
        p.ellipse(p.mouseX, p.mouseY, 20, 20);
      };
    };
    const sketchB = (p) => {
      p.setup = () => p.createCanvas(200, 200).parent('right');
      p.draw = () => {
        p.background(30);
        p.fill(255);
        p.rect(p.frameCount % 200, 50, 40, 40);
      };
    };
    new p5(sketchA);
    new p5(sketchB);
  </script>
</body>
</html>

Open DevTools and evaluate typeof window.setup and typeof window.draw—both are "undefined". In global mode they'd be functions.

Lifecycle control that matters

Each instance exposes p.noLoop(), p.loop(), p.frameRate(), and p.remove(). Call p.remove() in a React useEffect cleanup or a Vue onUnmounted hook to tear down the canvas and listeners without leaks. This is why instance mode is the default choice in component frameworks.

Trade-offs you'll feel

• Verbosity: Every call needs the p. prefix. Muscle memory from global-mode tutorials fights you at first.
• Translation tax: Most examples on the p5.js site and in books use global mode. You'll rewrite createCanvas() to p.createCanvas() every time you copy a snippet.
• One instance per sketch: Don't try to share a single p5 instance across multiple containers—that's not the intended pattern.

Verify before you ship

1. Load your page and confirm both sketches animate independently.
2. In the console, run console.log(p5.VERSION) and compare behavior against the release notes for that version.
3. Call p.remove() from a cleanup handler and watch the canvas and listeners disappear without errors.

If you're maintaining a page that already uses global mode, you can migrate sketch by sketch—just don't mix global callbacks and instance mode on the same page unless you know exactly which window hooks remain active.