react-meets-p5.js

import p5 from "p5";
import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return (
      <div>
        <p>Welcome! What is your favorite color?</p>
        <input
          type="text"
          value={this.props.color}
          onChange={(event) => this.props.setColor(event.target.value)}
        />
        <button onClick={() => this.props.showSketch()}>
          Go!
        </button>
      </div>
    );
  }
}

class SketchPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 250,
      y: 250
    }
  }

  render() {
    return <div>
        X <input 
              type="range" min="0" max="500" 
              value={this.state.x} 
              onChange={(event) => this.setState({x: Number(event.target.value)})}
            />
        <br />
        Y <input 
              type="range" min="0" max="500" 
              value={this.state.y} 
              onChange={(event) => this.setState({y: Number(event.target.value)})}
            />
        <br />
        <P5Sketch x={this.state.x} y={this.state.y} color={this.props.color} />
      </div>
  }
}

class P5Sketch extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  Sketch = (p) => {
    p.setup = () => {
      p.createCanvas(500, 500);
    }

    p.draw = () => {
      p.background(220);
      p.noStroke();
      p.fill(this.props.color);
      let xrange = p.map(this.props.x, 0, p.width, -5, 5);
      let yrange = p.map(this.props.y, 0, p.height, -5, 5);
      p.ellipse(this.props.x + p.random(-xrange, xrange), this.props.y + p.random(-yrange, yrange), 100);
    }
  }

  componentDidMount() {
    this.myP5 = new p5(this.Sketch, this.myRef.current);
  }

  render() {
    return <span ref={this.myRef} />
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showSketch: false,
      color: "darkblue"
    };
  }

  render() {
    if (this.state.showSketch == false) {
      return <div className="App">
          <StartPage 
              color={this.state.color} 
              setColor={(c) => this.setState({color: c})} 
              showSketch={() => this.setState({showSketch: true})}
            />
        </div>
    } else {
      return <div className="App">
          <SketchPage color={this.state.color} />
        </div>
    }
  }
}

export default App;