文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript - p5.FFT不适用于p5-react

问Javascript - p5.FFT不适用于p5-react
EN

Stack Overflow用户

提问于 2021-07-22 22:21:16

回答 1查看 121关注 0票数 0

我尝试将我的项目从p5.js编辑器转移到react应用程序，我将代码更改为以下文档格式：https://www.npmjs.com/package/react-p5。

我将"p5/lib/addons/p5.sound.js“(FFT在其中)添加到App.js中，但它仍然给我这个错误：

“未处理的拒绝(TypeError)：p5.FFT不是构造函数”

p5网站中的代码是：

let fft_bins = 64;
function setup() {
    let cnv = createCanvas(screen_size[0], screen_size[1]);
    fft = new p5.FFT(0.9, fft_bins);
}

我的react应用程序中的代码是：

import "p5/lib/addons/p5.sound.js"

let fft_bins = 64;
const setup = (p5, canvasParentRef) => {
    let cnv = p5.createCanvas(screen_size[0], screen_size[1]).parent(canvasParentRef);
    fft = new p5.FFT(0.9, fft_bins);
};

javascript

reactjs

p5.js

回答 1

Stack Overflow用户

发布于 2021-07-24 10:47:12

这里的问题是，您试图访问react-p5传递给setup函数的p5 实例上的类型构造函数，而不是通过静态p5对象(恰好是p5实例的构造函数)访问它。有两种方法可以访问它: 1)由于react-p5可以方便地初始化window.p5，因此您可以全局访问它，您只需更改设置函数声明中的参数名称，因为您当前正在隐藏变量名称；或者2)您可以使用Object.getPrototypeOf(p).constructor.FFT，其中p是传递给设置函数的第一个参数：

const setup = (p5, canvasParentRef) => {
    let cnv = p5.createCanvas(screen_size[0], screen_size[1]).parent(canvasParentRef);
    fft = new Object.getPrototypeOf(p).constructor.FFT(0.9, fft_bins);
};

下面是一个使用Oscillator而不是FFT的简单示例

// // In a project consisting of multiple modules compiled with webpack
// // or browserify would use import statements:
// import React from 'react';
// import Sketch from 'react-p5';
const Sketch = reactP5;

function Example(props) {
  let osc, playing;

  const setup = (p, canvasParentRef) => {
    // use parent to render the canvas in this ref
    // (without that p5 will render the canvas outside of your component)
    p.createCanvas(300, 300).parent(canvasParentRef);
    osc = new p5.Oscillator('sine');
    
    // This would not work:
    // console.log(new p.Vector(1, 2, 3));
    // But this does:
    const Vector = Object.getPrototypeOf(p).constructor.Vector;
    console.log(new Vector(1, 2, 3));
  };

  const draw = (p) => {
    p.background(0);
    p.fill(props.color || 'blue');
    p.ellipse(
      p.width / 2 + 100 * p.sin(p.frameCount / 100 * p.PI),
      p.height / 2 - 100 * p.cos(p.frameCount / 100 * p.PI),
      70,
      70
    );


    let freq = p.map(p.sin(p.frameCount / 200 * p.PI), -1, 1, 100, 500);
    osc.freq(freq, 0.1);
    if (playing) {
      let amp = p.map(p.cos(p.frameCount / 100 * p.PI), -1, 1, 0.1, 0.3);
      // smooth the transitions by 0.1 seconds
      osc.amp(amp, 0.1);
    }
  };

  const mousePressed = (p) => {
    osc.start();
    playing = true;
  };

  const mouseReleased = (p) => {
    osc.amp(0, 0.5);
    playing = false;
  };

  return <Sketch setup={setup} draw={draw} mousePressed={mousePressed} mouseReleased={mouseReleased} />;
};

ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
  <!-- react-p5 bundles p5.js v1.1.9 and sets window.p5 -->
  <script src="https://cdn.jsdelivr.net/npm/react-p5@1.3.19/build/index.min.js"></script>
  <!-- we need to manually include p5.sound -->
  <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/addons/p5.sound.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68486542

复制

相似问题

问Javascript - p5.FFT不适用于p5-react
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript - p5.FFT不适用于p5-reactEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript - p5.FFT不适用于p5-react
EN