p5+React Sphere Visualiser

Live demo here

This a demonstration of mixing p5.js and React together. It's built on top of my previous simpler project. The p5 sketch is controlled by a react components and recieves "props" from it. Some cool stuff in this project:

• No classes: all the react components use hooks
  • Uses the useRef() hook to have something like an instance variable that is only updated if specific pieces of state are updated
  • Uses the useEffect() hook for side effects in functional components
• The React component controls the animation of the p5.js sketch, so the animation state is preserved even when the sketch is unmounted and remounted
• Uses styled-components a great library that allows me style components from inside .jsx files using actual css code
• Use React.lazy and Suspense to lazy load components (for some reason it messes with the sketch a little, something to look into for future refactoring)