Place a circle on the surface of a sphere

p5.js Coding Questions
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);

Screenshot 2022-09-15 at 09.19.27
Screenshot 2022-09-15 at 09.19.27802×806 76.7 KB

Thanks,
Rickard

1 Like
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
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.

/r

4

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():

image
image602×627 23.1 KB

:)

1 Like
5

Hi @glv!

Thanks, I’m translating and rotating but apparently incorrectly :slight_smile: . 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

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.

image
image602×632 8.15 KB

:)

2 Likes
7

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

1 Like