Combine p5 with react

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

Combine p5 with react

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;

Similar codes

0 vote378 views1 answer
Yarn react-native-async-storage
Javascript React
0 vote488 views1 answer
No unuseds varsnreactjs
Javascript React
5 votes408 views2 answers
React js download file
Javascript React
0 vote381 views1 answer
React hooks link to external site
Javascript React
15 votes457 views3 answers
Create react app and tailwind
Javascript React
32 votes396 views1 answer
Install react router in react app
Javascript React
0 vote343 views2 answers
Undo npm run eject react
Javascript React
0 vote389 views1 answer
How to resolve cors in production react
Javascript React
1 vote399 views2 answers
React-native-screens
Javascript React
3 votes404 views1 answer
React pass props to children
Javascript React