# 'Exploding' or 'dissolving' an ellipse?

**URL:** <https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205>\
**Category:** Coding Questions\
**Created:** [April 8, 2021, 12:29am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205 "2021-04-08T00:29:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gctwnl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gctwnl/32/12751_2.png) [@gctwnl](https://discourse.processing.org/u/gctwnl)\
**Post date:** [April 8, 2021, 12:29am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/1 "2021-04-08T00:29:01Z")

</div>

I am new to p5.js (and to Javascript to be honest) and I was wondering if I can (with the help of other libraries if need be) have an ellipse object either explode, go up in smoke, implode, or visually disappear-in-place in some other interesting/funny way. How would people go about it? Doable at all?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [April 8, 2021, 7:54am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/2 "2021-04-08T07:54:35Z")

</div>

Very do-able. But for most of those effects you’re going to need a particle system of some kind. That is, some code that can keep track of the tiny bits of the effect.

Do you know how classes work? It’s MUCH easier to write these kind of effects if you do.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 8, 2021, 7:57am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/3 "2021-04-08T07:57:57Z")

</div>

possible starting points

> **[Circle Morphing - Part 1](https://thecodingtrain.com/CodingChallenges/081.1-circle-morphing-part-1.html)**
>
> In this video, I implement one possible solution to Golan Levin’s Circle Morphing challenge.

> **[2D Supershapes](https://thecodingtrain.com/CodingChallenges/023-supershape2d.html)**
>
> In this coding challenge, I show you how to make 2D supershapes in p5.js.

> **[Steering Behaviors](https://thecodingtrain.com/CodingChallenges/059-steering-text-paths.html)**
>
> In this coding challenge, I look at extracting font path points from text in p5.js with p5.Font.textToPoints(). I render the text as particles with steering behaviors that react to the mouse.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 10, 2021, 11:07am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/4 "2021-04-10T11:07:52Z")

</div>

I’d like the idea of arcs (see arc() command) that fly apart.

But again, best when you use a class ArcMy or whatever

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 11, 2021, 10:56am UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/5 "2021-04-11T10:56:01Z")

</div>

Hello,

Check out:

- [examples | p5.js](https://p5js.org/examples/)

The _Simulate_ section may have some examples of interest.

It certainly got me interested!

`:)`

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [April 12, 2021, 12:06pm UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205/6 "2021-04-12T12:06:35Z")

</div>

This (10 years old!) Processing sketch by @amnon (a former “regular”, active on the first P5 forums) could be a good starter:

https://player.vimeo.com/video/22772055

The library used here (toxiclibs) has been [ported to Javascript](http://haptic-data.com/toxiclibsjs) so you can import it in your p5.js sketch.

The full original code is available on this [blog post](https://amnonp5.wordpress.com/2011/04/23/working-with-toxiclibs/).

[![](https://amnonp5.files.wordpress.com/2011/04/toxiclibs-03.jpg) ](https://amnonp5.files.wordpress.com/2011/04/toxiclibs-03.jpg)