P5.js is actually where I started with coding and data visualization and a lot of love goes out to Daniel Shiffman and his channel The Coding Train where I learnt most of my initial understanding of Javascript, APIs, even Firebase.

Its been a while since I last used P5.js and since then have moved much more into React and Typescript so will need to see how the two play with each other. If this is sucessful then I'll start to have a look at some simple algorythms and build some fun little programs with P5.js and then try impliment them in D3.js as well.

Basic Setup

That took a lot of tweaking and swaering, but I got it working. It seemed there is a problem with implimenting the p5 instance when using either useEffect() on a functional component or componentDidMount() on a class component. In the end it turned out I had to require the p5 library inside the componentDiDMount which kind of screwed up the type for it and set it to any, but did let it render. Not sure if this is a good solution, but at least I can now make things.

Something I quite like about this thought is that I can now break up the sketches into seperate files and import them as needed. This I think will be super useful for experimenting and forking different sketches and seeing how they might work in varous areas of a site.