# Trying to generate a sphere using an array of circles

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.

``````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.zPositionOffset = x;
``````

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

Almost there!

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.

`:)`

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 2 Likes

Hello,

Does this help?

I used circle() to draw my circles.

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

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

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

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.

`:)`

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.

so that the sphere is round and not ellipsoid

1 Like

An animated gif sweeping from -PI/2 to PI/2 and drawing the circles: I added to the original code.

`:)`

1 Like