# Firework: Circle with cosine & sine but in 3D....?

**URL:** <https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670>\
**Category:** Coding Questions\
**Created:** [October 13, 2019, 6:50pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670 "2019-10-13T18:50:28Z")\
**Posts on this page:** 6\
**Page:** 1

<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:** [October 13, 2019, 6:50pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/1 "2019-10-13T18:50:28Z")

</div>

Hello all,

I made a fire work in 2D (its movement is 2D anyway) with a simple formula using cos and sin.

```auto
  void move() {

    // Spark move 

    // move 
    x = centerX+cos(angle)*radius;
    y = centerY+sin(angle)*radius;

    radius+=radius_Add; 

    if (radius>maxRadius)
      isDead=true;
  }// function 

```

My question is, how can I make it so that the movement would be 3D (sparks fly away forming a full sphere)

```auto
  void move() {

    // Spark move 

    // move 
    x = centerX+cos(angle)*radius;
    y = centerY+sin(angle)*radius;
    z = centerZ+????????????(angle)*radius;

    radius+=radius_Add; 

    if (radius>maxRadius)
      isDead=true;
  }// function 

```

(full 2D movement sketch [Some Movies I made](https://discourse.processing.org/t/some-movies-i-made/13306/7) )

Thanks all!

Chrisir

---

<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:** [October 13, 2019, 6:56pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/2 "2019-10-13T18:56:19Z")

</div>

One way is to rotateY before translating x,y – so different circles of sparks will fly in different directions. This won’t look like a sphere, though, more like a beachball.

Another option is to plot the point on a sphere, then scale it as it flies out. Multiple methods of doing that – one by you (!)…

- [https://forum.processing.org/two/discussion/20688/plotting-points-on-a-sphere](https://forum.processing.org/two/discussion/20688/plotting-points-on-a-sphere)

---

<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:** [October 13, 2019, 8:25pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/3 "2019-10-13T20:25:51Z")

</div>

Hello @Chrisir,

This was just me tinkering with formulas.  
There may be something useful in this for you; I know I will play with this some more!  
Thanks for inspiring me.

```auto
void draw()
  {
  translate(width/2, height/2);
  rotateX(TAU/4);
  
  for(float angle = 0; angle < TAU; angle += TAU/100)
   {
   move(angle, t, radius);
   strokeWeight(3);
   stroke(255, 255, 0);
   point(x, y, z);
   }
   
  radius += radius_Add;
  t += .1;
  }

void move(float angle, float t, float radius) 
  {
  x = radius*cos(angle);
  y = radius*sin(angle);
  z = 100*(1-pow(exp(1.0), 1-t/5));
  
  //radius += radius_Add;
  //t += .1;
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ec73fa2f8d616cfc55c151720e112ef00810d2df.png)

---

<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:** [October 13, 2019, 9:01pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/4 "2019-10-13T21:01:07Z")

</div>

```auto
float t, radius;
float x, y, z;
float radius_Add=2; 

float yadd=-9; 

float speed= 44; 

void setup() {
  size(1900, 900, P3D);
  background(0);
  y=height-533;
}

void draw() {
  // background(0); 
  translate(width/2, height/2);
  // rotateX(TAU/4);

  for (float angle = 0; angle < TAU; angle += TAU/speed) {
    move(angle, t, radius);
    strokeWeight(3);
    stroke(255, 255, 0);
    point(x, y, z);
  }

  radius += radius_Add;
  t += .1;

  y += yadd; 
  yadd += 0.09;

  speed+=1;
  if (speed>100)
    speed=100;
}

void move(float angle, float t, float radius) {

  x = radius*cos(angle);
  z = radius*sin(angle);

  // y = 4- 100*(1-pow(exp(1.0), 1-t/5));
  //radius += radius_Add;
  //t += .1;
}

```

---

<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:** [October 13, 2019, 9:28pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/5 "2019-10-13T21:28:44Z")

</div>

I like it!

I had the formula for capacitors charging on my mind and did not want the fireworks to end.

🙂

---

<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:** [October 20, 2019, 12:23pm UTC](https://discourse.processing.org/t/firework-circle-with-cosine-sine-but-in-3d/14670/6 "2019-10-20T12:23:52Z")

</div>

Thanks again!

[![](https://img.youtube.com/vi/46qwczx1jx8/maxresdefault.jpg "processing movie") ](https://www.youtube.com/watch?v=46qwczx1jx8)