Isolate p5.js sketches with instance mode for reusable web components

The problem with global mode in apps

Global mode puts setup, draw, and all p5 helpers on the window object. This works for a single standalone sketch, but in a modern web application it causes collisions with other libraries, multiple sketches on the same page, and frameworks that manage the DOM. Instance mode removes this global dependency by giving each sketch its own independent p5 object.

The useful takeaway is a self-contained sketch function that receives a p5 instance, keeps state inside a closure, and can be mounted into a chosen parent element without leaking names into the global scope.

Desired outcome

A reusable sketch module that:

• runs without touching the global namespace
• can be instantiated multiple times with independent state and draw loops
• mounts its canvas into a specific DOM container you control
• can be created and destroyed programmatically during a component lifecycle

Prerequisites

You need a page with a designated mount point (an HTML element) and a way to load p5 as an ES module. Verify the import shape for your p5.js version before assuming a specific API.

HTML mount points:

<div id="sketch-a"></div>\n<div id="sketch-b"></div>

No special permissions are required. The sketch runs in the browser main thread.

Focused procedure

Create an instance sketch

Define a function that receives a p5 instance, commonly named p. All sketch code references use p instead of global names to ensure encapsulation.

// sketch.js\nexport function makeSketch() {\n  return function sketch(p) {\n    let x = 0;\n\n    p.setup = function() {\n      const c = p.createCanvas(300, 200);\n      // canvas is created by the instance, not globally\n      p.background(240);\n    };\n\n    p.draw = function() {\n      p.background(240);\n      p.circle(x, 100, 50);\n      x = (x + 2) % p.width;\n    };\n  };\n}

Instantiate with a parent

To run the sketch, use the p5 constructor passing the sketch function and the target DOM element. This ensures the canvas is appended where you want it.

import p5 from 'p5';\nimport { makeSketch } from './sketch.js';\n\nconst containerA = document.getElementById('sketch-a');\nconst containerB = document.getElementById('sketch-b');\n\nconst instanceA = new p5(makeSketch(), containerA);\nconst instanceB = new p5(makeSketch(), containerB);\n

Expected checks

To verify the implementation is working correctly, check the following:

• Confirm the canvas is appended to the chosen parent element and does not appear in document.body by default.
• Create two separate instances with different sketches and verify they run independently without interfering with variables or draw loops.
• Check that global p5 functions (like rect()) are not available outside the sketch closure when running in strict module mode.

Recovery and cleanup

If you need to remove a sketch when a component unmounts, you must explicitly call the remove() method on the instance to stop the draw loop and clear the canvas from the DOM.

instanceA.remove();\ninstanceA = null;\n

Limitations to plan for

Instance mode does not automatically handle window resizing. If you need a responsive canvas, you must implement explicit resize logic within the sketch using p.windowWidth and p.resizeCanvas.