如何使用p5.js

Question

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

所以我想要做的是: 1.创建-react app 2.使用p5.js呈现一个画布(我不需要p5.dom和p5.Music)

Answer 1

需要做的第一件事是安装创建反应-应用程序工具。一旦启动并运行了p5.js和反应-P5包装包，就可以包含；假设使用了npm这样的包管理器，就可以使用任何必要的标志来执行npm install p5 react-p5-wrapper。

react P5包装器是一个包装组件，它接收到对草图的引用(实例模式)，并使用一些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

react P5

这个组件允许您将p5草图集成到您的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之后，使用npm install p5安装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中。