React and p5 integration demo

Live demo | Basic version live demo | Github repo | Basic version repo

I’ve made a little project that combines react and p5.js. I’m going to work on developing it a bit more and once I have something a bit more stable will release it as react component on npm so it can easily be used in projects.

The project is completely implemented with hooks, and no class components are used. I have tried to display some possibilities like the animation loop being completely controlled by the React component.

Right now I have a basic version, which just has a circle whose radius is controlled by a slider, and a more complex version which is the sphere visualiser. I think right now I will do most of the development on the sphere visualiser repo as the more complex project allows me to see areas of improvement more clearly, and will pull it out into its own component later on.

Let me know if you have any questions or ideas for improvements.

8 Likes