#9189·p5.js

[p5.js 2.0+臭虫报告]:参考 Error: p5在p5上调用负载像素/get/copy/mask时没有定义. 无害环境管理中的媒介内容

作者: Pcmhacker-piro创建于 2026年9月17日更新于 2026年9月17日
标签Area:DOMArea:Core

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:

javascript
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:

javascript
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);

内容来源: processing/p5.js