# Trying to generate a sphere using an array of circles

**URL:** <https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321>\
**Category:** Coding Questions\
**Created:** [December 27, 2021, 6:24pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321 "2021-12-27T18:24:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucienfradet](https://avatars.discourse-cdn.com/v4/letter/l/ba8739/32.png) [@lucienfradet](https://discourse.processing.org/u/lucienfradet)\
**Post date:** [December 27, 2021, 6:24pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/1 "2021-12-27T18:24:59Z")

</div>

Hello! I’m trying to generate a sphere using circles of different sizes. I want it to be adapt if I change the NUM\_RING variable. Right now, the my code creates overlapping circles, and I don’t get why. Maybe it’s somthing I don’t understand about the map function.

```auto
angleMode(RADIANS);
    let i = map(this.layer, 0, this.NUM_RING, 0, TWO_PI);
    let x = sin(i) * this.ballRadius;
    let y = cos(i) * this.ballRadius;

    this.ringRadius = y;
    this.zPositionOffset = x;

```

[![](http://puu.sh/IyQV0/96c635952c.jpg) ](http://puu.sh/IyQV0/96c635952c.jpg)

---

<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:** [December 27, 2021, 6:34pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/2 "2021-12-27T18:34:51Z")

</div>

In a 2D circle x has cos, y has sin, not vice versa

Not sure here tho

Maybe you should use separate i‘s for x and y because your z (derived from x) should go only from 0 to PI and not TWO\_PI

---

<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:** [December 27, 2021, 7:21pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/3 "2021-12-27T19:21:28Z")

</div>

Hello @lucienfradet,

Almost there!

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

You may want to change variable names to better represent what they are used for.

This was a very quick morning exercise and I recycled some variables.

Use the code as a “hint” only.

`:)`

---

<div class="post-metadata">

**Author:** ![lucienfradet](https://avatars.discourse-cdn.com/v4/letter/l/ba8739/32.png) [@lucienfradet](https://discourse.processing.org/u/lucienfradet)\
**Post date:** [December 27, 2021, 7:30pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/4 "2021-12-27T19:30:55Z")

</div>

Oh wow that works! thank you so much! I’m still having a hard time figuring out why the angle should not be from 0 to TWO\_PI though 😕 Also, why did you devide the rad by two for the y variable?  
Thanks so much 🙂

---

<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:** [December 27, 2021, 9:44pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/5 "2021-12-27T21:44:44Z")

</div>

Hello,

Does this help?

I used circle() to draw my circles.

The circle() function uses diameter:  
[https://p5js.org/reference/#/p5/circle](https://p5js.org/reference/#/p5/circle)

diameter = 2\*radius

```auto
let x = cos(angle) * 2*ballRad;
let y = sin(angle) * ballRad;

```

It is helpful to use print() statements to understand code:

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

I use them all the time in development!

I suggest you find a good tutorial on trigonometry.  
Do some experimenting and then apply that to your code.

`:)`

---

<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:** [December 27, 2021, 10:21pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/6 "2021-12-27T22:21:53Z")

</div>

> [@lucienfradet](#):
>
> why the angle should not be from 0 to TWO\_PI though

Yeah, when you look at the cos curve, for a full circle (aka TWO\_PI) it goes up and down again (hence you had the double lines!). Using -PI/2 (or HALF\_PI) to HALF\_PI avoids this. In this segment of the cos graph it’s straight in one direction.

> [@lucienfradet](#):
>
> why did you divide the rad by two for the y variable?

so that the sphere is round and not ellipsoid

---

<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:** [December 28, 2021, 8:36pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321/7 "2021-12-28T20:36:57Z")

</div>

@lucienfradet ,

An animated gif sweeping from -PI/2 to PI/2 and drawing the circles:

![test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f610e0d31c7f8c19f95f7d778696bee35b8cf504.gif)

I added to the original code.

`:)`