Jul 1, 2020
Learning to import P5.js into a React app
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.
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
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.