React p5: So how do you pass a value generated in p5 back to a React component?

p5.js Libraries
1

Hi there, so I’m using https://github.com/and-who/react-p5-wrapper

I’m wondering if there’s a way to pass a value from the p5 Sketch file back into React? For example. I want to keep track of the label value generated in p5 Sketch and use that somewhere later. How can I store that value globally?

export default function sketch(p5) {

    function modelReady() {
        console.log("Model is ready!!!")
        mobilenet.predict(gotResults)
    }

    function gotResults(error, results) {
        if (error) {
            console.error(error)
        } else {
            **label = results[0].label**
            mobilenet.predict(gotResults)
        }
    }

The thing that I’m building https://codesandbox.io/s/dark-wave-dgrlg (it’s a machine learning cam that will detect what the camera is seeing) As you can see the label is updating in the p5 sketch but not the React component itself.

My fix: I have done something like setInterval(setLabel, 0) in my code but that doesn’t seem to be the correct pattern? Is there a better way?

2

Hello, have you find a solution for your problem ? Because I have a same need, catch data from P5 to React.

3

I don’t use react but when I work with other frameworks, I attach a callback to the p5 object after instantiation

let myp5 = new p5(s);
myp5.reactCallback = (label) => {
  ...
}

this function will be accessible as

const s = ( sketch ) => {
  sketch.setup = () => {
    sketch.reactCallback(...);
  };
};

I think this is a general strategy but I haven’t tested it and not sure if it works in your case.

1 Like
4

Perfect, I try that tomorrow. I give the feedback. Thx for the trick. I begin on React, Javascript and on P5.JS… so there is a lot of stuff to understand in same time :).

5

Hmmm @micuat I try to create a code to make your idea in application, but I cannot figure how to code it. With react the idea is use component But I don’t find idea to export the argument from the sketch maybe need use useState() or useContext() but my React knowledge is too weak. Below my try to understand how do that ?

script:

import React from 'react';
import P5Wrapper from './P5Wrapper';

export default function () {
  return (
    <div>
      <div style={{ position: 'absolute' }}>
        <P5Wrapper sketch={my_sketch} data={props.label}/>
      </div>
      <div>
        {/* GOAL : catch data from my_sketch to pass to other script */}
      </div>
    </div>
  );
}


function my_sketch(p) {
  let data = null;
  p.setup = function () {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.windowResized = () => {
      p.resizeCanvas(p.windowWidth, p.windowHeight);
    };
  };

  p.draw = function () {
    // my code
  };

  p.callback = function () {
    // my code
  };

  p.set_data = function (props) {
    if (props.data) {
      data = props.data;
    }
  };

  p.callback = function () {
    // these callback need to send data to all component
    // need to pass react State and use useState() ?
    // need to use useContext() ? 
    // but how ??????
  };
}

component wrapper

import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import p5 from 'p5';

const P5Wrapper = props => {
  let canvas = null;
  function set_data() {}
  function callback() {}
  const sketch_ref = useRef();

  useEffect(() => {
    canvas = new p5(props.sketch, sketch_ref.current);
    if (canvas.set_data) {
      canvas.set_data(props);
    }
    if (canvas.callback) {
      canvas.callback(props);
    }
  }, []);
  return <div ref={sketch_ref} />;
};

P5Wrapper.propTypes = {
  sketch: PropTypes.func.isRequired,
};

export default P5Wrapper;
6

I see. As I wrote I don’t use React (I only have a bit of experience in vue and I mostly use choo.io for fun) and I know that this forum is not so web-front-end framework oriented so maybe contacting the author of the library would be quicker. Also in their README they explain a handler:

7

No roblem… I just use the same name P5Wrapper. But and-who library don’t provide to opportunity to dialogue between React and P5.JS. An other guy GitHub - atorov/react-hooks-p5js make something cool, and maybe it’s possible with his code but… it’s just a nightmare to understand the code :frowning: But I’m pretty sure to find the solution with useState() and useContext(). If I found it ; I post it !