# Disintegration/perish effect in p5.js

**URL:** <https://discourse.processing.org/t/disintegration-perish-effect-in-p5-js/9744>\
**Category:** Coding Questions\
**Created:** [March 29, 2019, 4:28am UTC](https://discourse.processing.org/t/disintegration-perish-effect-in-p5-js/9744 "2019-03-29T04:28:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 29, 2019, 4:28am UTC](https://discourse.processing.org/t/disintegration-perish-effect-in-p5-js/9744/1 "2019-03-29T04:28:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 30, 2019, 5:17pm UTC](https://discourse.processing.org/t/disintegration-perish-effect-in-p5-js/9744/2 "2019-03-30T17:17:51Z")

</div>

One approach:

1. define your shape as a polygon
2. scatter random points inside the polygon
3. create fragment shapes with a voronoi diagram:

> **[Dozed12/p5.voronoi](https://github.com/Dozed12/p5.voronoi)**
>
> A Voronoi library for p5.js. Contribute to Dozed12/p5.voronoi development by creating an account on GitHub.

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](https://www.google.com/search?q=p5.js+%2B+matter.js) (for the packed rigid bodies approach)

---

<div class="post-metadata">

**Author:** ![ZachMcMkay](https://avatars.discourse-cdn.com/v4/letter/z/8e7dd6/32.png) [@ZachMcMkay](https://discourse.processing.org/u/ZachMcMkay)\
**Post date:** [March 31, 2019, 12:36pm UTC](https://discourse.processing.org/t/disintegration-perish-effect-in-p5-js/9744/3 "2019-03-31T12:36:09Z")

</div>

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](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.