All Languages >> Javascript >> combine p5 with react

“combine p5 with react” Code Answer

You may not remember next time either, so install Grepper.

combine p5 with react

javascript by Black Capped Chickadee on Nov 21 2019 Donate

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

javascript by Black Capped Chickadee on Nov 21 2019 Donate

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;

Javascript queries related to “combine p5 with react”

Learn how Grepper helps you improve as a Developer!

INSTALL GREPPER FOR CHROME

“combine p5 with react” Code Answer

You may not remember next time either, so install Grepper.

Javascript queries related to “combine p5 with react”

Learn how Grepper helps you improve as a Developer!

All Javascript Answers

Grepper

Documentation

Social

Legal

Contact