# Place a circle on the surface of a sphere

Hi,

I’m trying to place a circle on the surface of a sphere. I’ve already have the coordinates but i’m struggling a bit with the rotation (see screenshots).

I’ve tried using the theta and phi values used when creating the point but i’m probably doing something wrong.

``````translate(target.x, target.y, target.z);
rotateX(sin(phi) * cos(theta));
rotateY(sin(phi) * sin(theta));
rotateZ(cos(phi));
cylinder(20, 1);
``````

Thanks,
Rickard

1 Like

Hi @rickard,

Hard to say without seeing how you calculating the other parameters from you code.
But try this …

``````translate(target.x, target.y, target.z);
rotateX(cos(phi) * cos(theta));
rotateY(cos(phi) * sin(theta));
rotateZ(sin(phi));
cylinder(20, 1);
``````

Cheers
— mnse

1 Like

Hi @mnse,

Thanks! Unfortunately it’s still a bit off. I’ve put together a demo, hopefully is should make it easier to get an overview.

/r

Hello,

You should be able to adapt this to p5.js:

A translate, a rotate for phi and a rotate for theta and then draw a circle():

`:)`

1 Like

Hi @glv!

Thanks, I’m translating and rotating but apparently incorrectly . Had a look at wiki-link but unsure how to apply the rotation based on that.

Could you clarify this a bit? phi for X and theta for Y?

/r

This is a Processing example:

``````// Spherical Coordinates
// v1.0.0
// GLV 2022-09-15

// Reference:
// https://en.wikipedia.org/wiki/Spherical_coordinate_system

PVector v;

void setup()
{
size(600, 600, P3D);
background(0);
v = new PVector(0, 0, 0);
noLoop();
}

void draw()
{
background(0);
translate(width/2, height/2);
rotateY(frameCount*(TAU/1000));

for(int i = 0; i<100; i++)
{
v.set(randomGaussian(), randomGaussian(), randomGaussian());
v.normalize();
v.mult(200);
//point(v.x, v.y, v.z);

float theta = acos(v.z/200);
float phi = atan2(v.x, v.y);

push();
translate(v.x, v.y, v.z);
rotateZ(TAU/4-phi);
rotateY(theta);
fill(255);
circle(0, 0, 10);
pop();
}
}

void keyPressed()
{
redraw();
}
``````

You will have to look at the Wikipedia page and adapt to the co-ordinate system you are using.

This is just one approach to this using spherical co-ordinates… they are other ways to do this.

`:)`

2 Likes

@glv Thanks! Works like a charm (once I replaced the cylinder with circle).