如何在 p5.js 中使用 React

Question

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

所以我想要做的是： 1. create-react-app 2.render a canvas using p5.js (我不需要 p5.dom 和 p5.sound)

Answer 1

需要做的第一件事是安装create-react-app工具。一旦它启动并运行 p5.js， 就可以包含react-p5-wrapper包；假设正在使用像npm这样的包管理器，这可以通过执行npm install p5 react-p5-wrapper任何认为必要的标志来完成。

react-p5-wrapper 是一个包装器组件，它接收对草图的引用（实例模式），并使用一些 react 组件“生命周期方法”来相应地操作它，主要是通过执行myCustomRedrawAccordingToNewPropsHandler(props)需要在所述草图。

要试一试并查看它的运行情况，可以像这样修改App.js文件的内容：

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它位于另一个文件夹，在这种情况下，所谓的草图：

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

如果一切正常，屏幕上应该有一个按钮和一个草图，每次按下按钮时，草图中的圆圈都会随机改变颜色。

应该注意的是，该myCustomRedrawAccordingToNewPropsHandler函数在包装器的componentDidMount和componentWillReceiveProps“生命周期方法”中被调用，后者目前被归类为不安全的。

Answer 2

反应-p5

该组件可让您将 p5 Sketches 集成到您的 React 应用程序中。 演示, 文档

对于高级用法，请阅读此博客文章

安装

npm i react-p5

用法

import React, { Component } from "react";
import Sketch from "react-p5";

export default class App extends Component {
  x = 50
  y = 50

  setup = (p5, parent) => {
    p5.createCanvas(500, 500).parent(parent)
  }
  draw = p5 => {
    p5.background(0)
    p5.ellipse(this.x, this.y, 70, 70)
    this.x++
  }

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />
  }
}

Answer 3

这也可以在没有任何第三方库和功能组件的情况下完成。

安装 ：

运行后create-react-app，使用安装p5包npm install p5。

代码 ：

在App.js文件中

import './App.css';
import { useEffect, useRef } from 'react';
import p5 from 'p5';

function sketch(p) {
    // p is a reference to the p5 instance this sketch is attached to
    p.setup = function() {
        p.createCanvas(400, 400);
        p.background(0);
        p.circle(200, 200, 400);
    }

    p.draw = function() {
        // your draw code here
    }
}

function App() {
    // create a reference to the container in which the p5 instance should place the canvas
    const p5ContainerRef = useRef();

    useEffect(() => {
        // On component creation, instantiate a p5 object with the sketch and container reference 
        const p5Instance = new p5(sketch, p5ContainerRef.current);

        // On component destruction, delete the p5 instance
        return () => {
            p5Instance.remove();
        }
    }, []);

    return (
        <div className="App" ref={p5ContainerRef} />
    );
}

export default App;

进一步说明：

当组件被创建时，它会设置对其自身的App引用。p5ContainerRef.current该useEffect钩子运行并创建一个新的 p5 实例p5Instance，并将sketch该函数和包含节点p5ContainerRef.current作为参数。通过返回一个运行的函数p5Instance.remove()，当组件被销毁或重新渲染p5Instance时， 也会被销毁。App这可以防止多个 p5 实例拥有自己的画布。

这段代码展示了类似库的react-p5核心功能。他们确保 p5 实例附加到包装器容器，并且当其包装器组件被销毁或重新渲染时，p5 实例也会被销毁。

边注 ：

您可以将该App组件重命名为类似名称P5Component并将其导入到任何现有的 React 应用程序中。