p5.js global mode versus instance mode for multiple sketches on one page
0 reputation · 23 May 2023, 10:19 UTC
Goal: run multiple independent p5.js sketches on a single HTML page without variable name collisions or shared canvas interference.
In p5.js 1.x, global mode attaches sketch logic to the window object, which is convenient for one sketch but risks collisions when several sketches share a page. Instance mode wraps each sketch in a function that receives a p5 object, scoping variables and canvas elements to that instance.
Instance mode does not create a separate JavaScript realm, so all sketches still share the same global p5 library and browser environment. Shared globals and third-party extensions may still conflict regardless of mode.
Which mode better supports multiple independent sketches on one page, and what shared-state risks remain after choosing instance mode?