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 vote277 views1 answer
Text field drag and drop reactjs
Javascript React
14 votes280 views4 answers
React how to update state array
Javascript React
11 votes210 views5 answers
React router refresh page
Javascript React
0 vote203 views5 answers
Line 7:18: 'Section' is not defined react/jsx-no-undef
Javascript React
2 votes242 views1 answer
React check if focused
Javascript React
13 votes277 views3 answers
React native conditional rendering
Javascript React
157 votes807 views6 answers
Create new react app
Javascript React
0 vote208 views1 answer
React native run real device
Javascript React
0 vote216 views1 answer
React map gl
Javascript React
1 vote214 views2 answers
React js class component
Javascript React