rickard
September 15, 2022, 7:32am
#1
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

mnse
September 15, 2022, 7:52am
#2
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

rickard
September 15, 2022, 9:21am
#3
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.

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

/r

glv
September 15, 2022, 9:59am
#4
Hello,

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

Hello,
Take a look here at the Cartesian Coordinates:
I used my original example for the random points, a translate, a rotate for phi and a rotate for theta and then drew a circle():
[image]
This approach was fresh in my head from a recent project.
A translate, a rotate for phi and a rotate for theta and then draw a circle():

`:)`

1 Like

rickard
September 15, 2022, 10:26am
#5
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

glv
September 15, 2022, 10:34am
#6
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

rickard
September 15, 2022, 11:36am
#7
@glv Thanks! Works like a charm (once I replaced the cylinder with circle).