Trying to generate a sphere using an array of circles

p5.js Coding Questions
1

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.ringRadius = y;
    this.zPositionOffset = x;

2

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

3

Hello @lucienfradet,

Almost there!

image
image871×580 80.2 KB

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.

:)

4

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 :confused: Also, why did you devide the rad by two for the y variable?
Thanks so much :slight_smile:

2 Likes
5

Hello,

Does this help?

I used circle() to draw my circles.

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

diameter = 2*radius

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

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

image
image502×1143 48.5 KB

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.

:)

6

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
7

@lucienfradet ,

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

test

I added to the original code.

:)

1 Like