Is there any way to make any shape in p5.js disintegrate into particles or turn into ashes? Or is there any sample code that shows a similar effect where the original object or image perish? Alternatively any libraries that can achieve similar effect?
I don’t have a starter code as I was struggling to start. I was thinking along the line of forming shapes using packed particles, which would allow one to disperse them, but there might be better ways. I can explain further if the question is vague.Thanks.
One approach:
- define your shape as a polygon
- scatter random points inside the polygon
- create fragment shapes with a voronoi diagram:
Now replace your polygon with a list of fragment polygons based on voronoi coordinates, and drift and fade them.
Other approaches:
- a fluid simulation (for smoke)
-
p5.js + matter.js (for the packed rigid bodies approach)
2 Likes
This might not be 100% what you’re looking for but it might be close enough for you to get started on your project till you find a solution you like.
https://editor.p5js.org/ZachMcMkay/sketches/TNYg2LIpB
or if you’re wanting it to be slower and not so uniform, I think you’d have to somehow get all the pixels of the shape then possibly use something like perlin noise to erase the pixels randomly.