如何在p5.js中使用React [英] How to use React with p5.js

问题描述

我真的很喜欢p5.js和react.js，所以我想知道如何将两者结合在一起，但是我做不到，所以我需要您的帮助. 我真的不能为您提供一些代码示例，因为我不知道如何开始.

I really like p5.js and react.js so i wondered how to combine these two together, and i was unable to do it so I need your help. I cant really provide you with some code samples because I have no clue how to start.

所以我想做的是: 1.创建反应应用程序 2.使用p5.js渲染画布(我不需要p5.dom和p5.sound)

So what I want to do : 1. create-react-app 2.render a canvas using p5.js (i dont need the p5.dom and p5.sound)

推荐答案

需要做的第一件事是安装创建反应应用工具.一旦启动并运行p5.js和 react-p5-wrapper 程序包可以包括在内；假设正在使用像 npm 这样的软件包管理器，可以通过执行npm install p5 react-p5-wrapper并使用任何必要的标志来实现.

First thing that needs to be done is install the create-react-app tool. Once it's up and running the p5.js and the react-p5-wrapper packages can be included; assuming a package manager like npm is being used, this can be done by executing npm install p5 react-p5-wrapper with whatever flags are considered necessary.

react-p5-wrapper是一个接收引用的包装器组件(myCustomRedrawAccordingToNewPropsHandler(props)的方法.

The react-p5-wrapper is a wrapper component that receives a reference (instance mode) to the sketch and uses some of the react component "lifecycle methods" to manipulate it accordingly, mainly by executing a method called myCustomRedrawAccordingToNewPropsHandler(props) that needs to be defined within said sketch.

要尝试一下并使其运行，可以按如下所示修改 App.js 文件的内容:

To give it a try and see it running, the contents of the App.js file could be modified like this:

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
    this.randomColor = this.randomColor.bind(this);
  }

  randomColor(){
    this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.randomColor}>Random Color</button>
        <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
      </div>
    );
  }
}

export default App;

sketch 是从另一个文件夹中的 sketch.js 导入的，在本例中为 sketches :

Where sketch is imported from sketch.js which is located in another folder, in this case called sketches:

export default function sketch(p){
    let canvas;

    p.setup = () => {
      canvas = p.createCanvas(300, 200);
      p.noStroke();
    }

    p.draw = () => {
      p.background('orangered');
      p.ellipse(150, 100, 100, 100);
    }

    p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
      if(canvas) //Make sure the canvas has been created
        p.fill(newProps.color);
    }
}

如果一切正常，则应该在屏幕上显示一个按钮和一个草图，每次按下该按钮时，草图中的圆圈会随机更改颜色.

If everything is working, a button and a sketch should be on screen and every time the button is pressed the circle in the sketch changes colors randomly.

应注意，在包装的componentDidMount和componentWillReceiveProps生命周期方法"中调用了myCustomRedrawAccordingToNewPropsHandler函数，包装当前被分类为

It should be noted that the myCustomRedrawAccordingToNewPropsHandler function is called in the componentDidMount and the componentWillReceiveProps "lifecycle methods" of the wrapper, the latter being currently classified as unsafe.

这篇关于如何在p5.js中使用React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！