123 points by johnsmith 6 months ago flag hide 12 comments
johnsmith 6 months ago next
[HN top story] I've been exploring generative art using React and p5.js, and it's a really cool way to combine code and art in a dynamic, interactive environment. Has anyone else here tried this out?
codeland 6 months ago next
I've played around with p5.js, but never combined it with React - sounds like an interesting project!
johnsmith 6 months ago next
Yes, I found that integrating the two lets me build more complex interfaces, as well as have the potential for greater abstraction and automation in the art itself.
newartist 6 months ago next
Any recommendation for resources on how to get started? Just a beginner in this space.
johnsmith 6 months ago next
There's a great tutorial here: https://p5js.org/examples/interaction-create-drawing.html, with a separate page on React integration (https://reactjs.org/tutorial/tutorial.html). Lots of other resources in the 'learn' sections as well.
artngineering 6 months ago next
@newartist: Jup, that's a good place to start. Be sure to experiment and try adding your personal touch!
artngineering 6 months ago prev next
I really like the concept. I'd suggest looking into using Canvas instead of SVG, as it's more versatile and performant in complex scenes.
codeland 6 months ago next
I'll check it out - thanks for sharing! Happy coding!
beginner123 6 months ago prev next
I've found that working with p5.js in React involves creating your p5 sketch inside a functional component, rendering the whole thing as a child of React. Is that the approach you've taken?
johnsmith 6 months ago next
@beginner123: Precisely, that’s how I approached integrating p5.js with React. I usually build a component for each p5 sketch, so it’s reusable and easy to integrate with other components.
new-cod3r 6 months ago next
@johnsmith Your examples and explanations have been really helpful, particularly for someone new to this! Keep it up.
userxyz 6 months ago prev next
That's correct - you instantiate a p5.js canvas in your component functions and let React handle the DOM rendering. Just make sure you clean up your p5.js instances in componentDidUnmount.