p5.js Instance Mode Migration Without Stopping Global Draw Loop

Answer the exact question first

Removing setup() and draw() from the global scope does not automatically stop the animation frame that p5 was driving. The requestAnimationFrame loop continues until you explicitly halt it with noLoop() or by canceling the frame. Likewise, p.remove() only destroys the canvas and internal listeners; it does not clear timers or external DOM references that the sketch may have created.

Confirmed facts (based on p5.js 1.6.x behavior)

• Calling noLoop() on the global instance stops the draw() cycle.
• Timers started with setTimeout or setInterval are not automatically cleared when the sketch is removed.
• Event listeners attached to DOM elements outside the canvas persist after p.remove().
• Instance mode gives the new sketch full access to global p5 functions and window, so any lingering global references can still affect the page.

Steps needed for this case

1. Stop the global draw loop:

   // In the global sketch
   noLoop(); // halts requestAnimationFrame
   

2. Clear user‑created timers:

   // Keep a list of timer IDs when you create them
   const timers = [];
   timers.push(setInterval(myFunc, 1000));
   // Later, before migration
   timers.forEach(clearInterval);
   

3. Remove external event listeners that were added outside the p5 canvas (e.g., document.addEventListener).
4. Destroy the old global instance:

   oldP5Instance.remove(); // removes canvas and internal listeners
   

5. Create the new instance in the target element:

   const sketch = (p) => {
     p.setup = () => { p.createCanvas(400, 400); };
     p.draw = () => { p.background(200); };
   };
   const newP5 = new p5(sketch, document.getElementById('sketchContainer'));
   

6. Verify no lingering animation frames by checking DevTools’ “Performance” or “Timeline” panels for pending requestAnimationFrame callbacks.
7. Confirm timers and listeners are cleared by inspecting timer IDs and attached listeners before switching.

Missing diagnostic detail that could change the recommendation

Do you keep any global references to the old p5 instance (e.g., window.mySketch = new p5()) that might keep the animation loop alive? If so, you need to delete those references after calling noLoop() and remove().