Disintegration/perish effect in p5.js

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:

  1. define your shape as a polygon
  2. scatter random points inside the polygon
  3. 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:

  1. a fluid simulation (for smoke)
  2. p5.js + matter.js (for the packed rigid bodies approach)

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.


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.