如何在p5.js中使用React

时间:2019-02-25 14:49:47

标签: reactjs p5.js

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

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

2 个答案:

答案 0 :(得分:1)

首先需要做的是安装create-react-app工具。一旦启动并运行,便可以包含p5.js和react-p5-wrapper软件包;假设正在使用像 npm 这样的软件包管理器,可以通过执行npm install p5 react-p5-wrapper并使用任何必要的标志来完成。

react-p5-wrapper是一个包装器组件,它接收对草图的引用(instance mode),并使用一些react组件“生命周期方法”来相应地对其进行操作,主要是通过执行称为{ {1}}需要在所述草图中定义。

要尝试运行它,请修改 App.js 文件的内容:

myCustomRedrawAccordingToNewPropsHandler(props)

sketch.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; 的位置,该文​​件位于另一个文件夹中,在本例中为 sketches :< / p>

sketch

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

应注意,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); } } 函数在包装器的myCustomRedrawAccordingToNewPropsHandlercomponentDidMount“生命周期方法”中被调用,后者目前被归类为unsafe

答案 1 :(得分:-2)

反应-p5

该组件可让您将p5草图集成到React App中。 DEMODocumentation

安装

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} />
  }
}