Using React with p5.js (React Hooks and Context)

p5.js
1

Using React with p5.js

alt application screenshot

This project demonstrates how to combine React (including the latest features such as hooks and context) and p5.js:

  • Multiple p5 sketches on a same screen;
  • Multiple instances of one sketch mounted in a same component;
  • Mount sketches in different points of the DOM tree;
  • Dynamically switch on/off sketches;
  • Bidirectional communication between the main React app and sketches;
  • Using the latest React features:
    • memo()
    • useContext()
    • useEffect()
    • useReducer()
  • Hot Module Replacement (HMR): exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:
    • Retain application state which is lost during a full reload;
    • Save valuable development time by only updating what’s changed;
  • This project supports a superset of the latest JavaScript standard;
  • React Router and Redux can easily be added to the project.

Github repository [https://github.com/atorov/react-hooks-p5js).

Online demo here.

The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application.

8 Likes
2

UPDATE 2019-06-02

p5.sound example
screencast-2

3

@atoro I’m looking at this example, https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_124_Flocking_Boids/P5

I wonder how you would use your method to make it work with React?
There’s a JS class and I’m not sure how to make use it in React.

4

@venn A quick reimplementation of this Coding Train example should be something like this:
https://github.com/atorov/react-p5js-flocking-boids-demo

screencast

Here is the online demo:
http://react-p5js-flocking-boids-demo.surge.sh/

PS :thinking:
This probably is a good project if you are trying to understand the basic concept of combining p5js and React. But if you don’t want more sophisticated application you don’t need React or any other advanced library/framework for building a modern web apps. All of them just increase the complexity of the project and introduce tons of boilerplate code.

1 Like
5

@atoro this is awesome! you should totally do a tutorial to school newbie like myself or write some comments in your code. Thanks!

1 Like
6

Hello @Atoro I try to reimplement your code in a Gatsby context… but I’ve a big problem with a TypeError: _useContext is undefined I’ve a suspicion about the index.htmlbut not sure. It’s just a supposition because I see in your code you write

    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>

    <div id="app-root">
        Loading...
    </div>
</body>

My question why is necessary to enable Javascript ? And the problem with Gatsby you cannot easily access to this part. If you have any suggestion or idea about that, that’s can be great.

7

Hi @Stanlepunk ! The problem you have is not related to the “noscript” tag in index.html. This tag is used to handle browsers which do recognize “script” tag but DO NOT support scripting. It is used to display an info message in such cases. This is a standard practice. This is not something specific to P5js, React, Gatsby or any other JS framework/library you use to build your app.

Check again your imports, seems you are trying to use React.useContext() without importing it first. Unfortunately, I cannot give you any other particular suggestions without seeing some code snippets/links to the code repo.

8

hmmm… i don’t saw your answer, just see now :). I found the problem from time. thx for your lights about the code pratice !

9

You’re welcome, it wasn’t a problem at all :slightly_smiling_face: