Question

我正在使用npm，webpack，babel环境来编写一个带有p5.js的应用程序。为了能够将草图作为模块，我在instance mode中有草图并将库和附加组件导入为模块：

import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';

然后我将它们加载到我的草图中的窗口：

const sketch = (p5) => {
   window.p5 = p5;
   ...
}
new p5(sketch);

当我尝试使用时：

amp = new p5.Amplitude()

我得到了一个＆＃39; p5.Amplitude不是构造函数＆＃39;错误。我的预测是在窗口上命名库p5和使用p5之类的库中的构造函数之间存在冲突，例如p5.Amplitude，p5.Vector，p5.Soundfile。我无法找到在实例模式下使用这些对象或构造函数的变通方法。然而，我可以使用这些objects中不需要构造函数的方法。例如，loadSound()是p5.Soundfile的方法。以下作品：

sound = p5.loadSound('assets/sound.wav)

但是当我尝试console.log(p5.SoundFile)时，我得到了未定义。

我迷路了！

Answer 1

我不是JavaScript专家，但您的语法与instance mode页面上的语法不匹配。

具体来说，你在这做什么？

const sketch = (p5) => {
   window.p5 = p5;
   ...
}
new p5(sketch);

将其与实例模式页面上的语法进行比较：

var sketch = function (p) {
  var gray = 0; 

  p.setup = function () {
    p.createCanvas(600, 400);
  };

  p.draw = function () {
    p.background(gray);
    p.rect(p.width/2, p.height/2, 200, 200);
  };

  p.mousePressed = function () {
    gray = (gray + 16) % 256;
  };
};

new p5(sketch);

您的代码似乎正在重新定义p5变量，这会导致您遇到的各种问题。我会重写您的代码，不再重新定义p5变量，而是使用实例模式页面中的语法：

var sketch = function(p) {
   //your code here
   //but don't change the p5 variable!
}
new p5(sketch);

Answer 2

您是否正确覆盖了库提供的p5 类，其中实例是在构建时提供给您的代码的。

这应该有效：

import p5 from 'p5';
import 'p5/lib/addons/p5.sound';

const sketch = (p5) => {
   window.myp5 = p5;

   p5.setup = () => {
     //whatever
   };

   p5.draw = draw;
}

function draw() {
  //methods hang off the instance:
  const mysound = myp5.loadSound("/path/to/sound.mp3");
  //constructors hang off the class:
  const amp = new p5.Amplitude()
}
new p5(sketch);

请注意，由于myp5函数开头的赋值，sketch可用于绘制函数。另请注意，您不需要导入插件。

Answer 3

我想我已经解决了我们的问题。您需要使用0.9.0版之前的p5.sound库并将其放置在项目目录中。我在这里的回答中会更详细地说明：

How to import and utilize P5.Sound in Vue?

在实例模式下使用p5.sound.js：＆＃39; p5.Amplitude（）不是构造函数＆＃39;

3 个答案: