1export default function sketch(p){
2 let canvas;
3
4 p.setup = () => {
5 canvas = p.createCanvas(300, 200);
6 p.noStroke();
7 }
8
9 p.draw = () => {
10 p.background('orangered');
11 p.ellipse(150, 100, 100, 100);
12 }
13
14 p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
15 if(canvas) //Make sure the canvas has been created
16 p.fill(newProps.color);
17 }
18}
1import React, { Component } from 'react';
2import P5Wrapper from 'react-p5-wrapper';
3import sketch from './sketches/sketch';
4import './App.css';
5
6class App extends Component {
7 constructor(){
8 super();
9 this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
10 this.randomColor = this.randomColor.bind(this);
11 }
12
13 randomColor(){
14 this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
15 )
16 }
17
18 render() {
19 return (
20 <div>
21 <button onClick={this.randomColor}>Random Color</button>
22 <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
23 </div>
24 );
25 }
26}
27
28export default App;