[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:
- Create a modern web project using Vite/Webpack or native ES module imports (
import p5 from 'p5') - Create a
p5.MediaElement(for example usingcreateCapture(VIDEO)orcreateVideo()) - Call
video.loadPixels(),video.get(),video.copy(), orvideo.mask(). - Observe an uncaught
ReferenceError: p5 is not definedthrown 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:
p5is never imported at the top of the file.- Lines 776, 782, 789, 793, 800, 806, 811 directly access
p5as 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 wherewindow.p5is 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);内容来源: processing/p5.js