[p5.js 2.0+ Bug Report]: ReferenceError: p5 is not defined when calling loadPixels/get/copy/mask on p5.MediaElement in ESM

[Pcmhacker-piro]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

v2.3.3 (also affects v2.0.0 through v2.3.2)

Web browser and version

All modern browsers (Chrome 128+, Firefox 129+, Safari 17+) in ESM environments

Operating system

macOS / Linux / Windows

Steps to reproduce this

Steps:

1. Create a modern web project using Vite/Webpack or native ES module imports (import p5 from 'p5').
2. Create a p5.MediaElement (for example using createCapture(VIDEO) or createVideo()).
3. Call video.loadPixels(), video.get(), video.copy(), or video.mask().
4. Observe an uncaught ReferenceError: p5 is not defined thrown in console, breaking the animation/render loop.

Snippet:

import p5 from 'p5';

new p5((sketch) => {
  let video;

  sketch.setup = () => {
    sketch.noCanvas();
    video = sketch.createCapture(sketch.VIDEO);
    video.size(160, 120);
  };

  sketch.draw = () => {
    // Throws Uncaught ReferenceError: p5 is not defined
    video.loadPixels();
  };
});

Errors

p5.MediaElement.js:776:5
Uncaught (in promise) ReferenceError: p5 is not defined
    at loadPixels (p5.MediaElement.js:776:12)
    at sketch.draw (sketch.js:14:11)

Additional Notes

Root Cause:

In src/dom/p5.MediaElement.js:

• p5 is never imported at the top of the file.
• Lines 776, 782, 789, 793, 800, 806, 811 directly access p5 as a global identifier:
  • p5.Renderer2D.prototype.loadPixels.apply(this, args)
  • p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h)
  • p5.Renderer2D.prototype.get.apply(this, args)
  • p5.Renderer2D.prototype._getPixel.apply(this, args)
  • p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol)
  • p5.prototype.copy.apply(this, args)
  • p5.Image.prototype.mask.apply(this, args)

In standard ES module bundlers where window.p5 is not globally assigned, every one of these methods crashes immediately.

Minimal Node ESM Repro:

import p5Module from 'p5';
const p5 = p5Module.default;

const mockElement = {
  _ensureCanvas: () => {},
  setModified: () => {},
  loadPixels: p5.MediaElement.prototype.loadPixels
};

// Crashes with: ReferenceError: p5 is not defined
p5.MediaElement.prototype.loadPixels.call(mockElement);