123 points by johnsmith 11 months ago flag hide 12 comments
johnsmith 11 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 11 months ago next
I've played around with p5.js, but never combined it with React - sounds like an interesting project!
johnsmith 11 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 11 months ago next
Any recommendation for resources on how to get started? Just a beginner in this space.
johnsmith 11 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 11 months ago next
@newartist: Jup, that's a good place to start. Be sure to experiment and try adding your personal touch!
artngineering 11 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 11 months ago next
I'll check it out - thanks for sharing! Happy coding!
beginner123 11 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 11 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 11 months ago next
@johnsmith Your examples and explanations have been really helpful, particularly for someone new to this! Keep it up.
userxyz 11 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.