# Place a circle on the surface of a sphere

**URL:** <https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770>\
**Category:** Coding Questions\
**Created:** [September 15, 2022, 7:32am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770 "2022-09-15T07:32:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rickard](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@rickard](https://discourse.processing.org/u/rickard)\
**Post date:** [September 15, 2022, 7:32am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/1 "2022-09-15T07:32:45Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/3/f3747601cf6284f69ffc61439b1e0284c18ddbdf.png)

Thanks,  
Rickard

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 15, 2022, 7:52am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/2 "2022-09-15T07:52:07Z")

</div>

Hi @rickard,

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

```auto
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

---

<div class="post-metadata">

**Author:** ![rickard](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@rickard](https://discourse.processing.org/u/rickard)\
**Post date:** [September 15, 2022, 9:21am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/3 "2022-09-15T09:21:32Z")

</div>

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.

> **[p5.js Web Editor](https://editor.p5js.org/rickard/sketches/wJp5yVwm-)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

/r

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 15, 2022, 9:59am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/4 "2022-09-15T09:59:05Z")

</div>

Hello,

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

> [@Points on the surface of a Sphere using beginShape(POINTS or QUADS)](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/6):
>
> 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(): This approach was fresh in my head from a recent project. slight_smile

A translate, a rotate for _phi_ and a rotate for _theta_ and then draw a circle():

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6dfcaab3de671b84659e642078afc1424e323b49.png)

`:)`

---

<div class="post-metadata">

**Author:** ![rickard](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@rickard](https://discourse.processing.org/u/rickard)\
**Post date:** [September 15, 2022, 10:26am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/5 "2022-09-15T10:26:12Z")

</div>

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.

> [@glv](#):
>
> A translate, a rotate for _phi_ and a rotate for _theta_ and then draw a circle():

Could you clarify this a bit? _phi_ for X and _theta_ for Y?

/r

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 15, 2022, 10:34am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/6 "2022-09-15T10:34:13Z")

</div>

> [@rickard](#):
>
> Could you clarify this a bit? _phi_ for X and _theta_ for Y?

This is a Processing example:

```auto
// 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/8/18c9634cc9757215e4188ba535ce81c3806ae6cf.png)

`:)`

---

<div class="post-metadata">

**Author:** ![rickard](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@rickard](https://discourse.processing.org/u/rickard)\
**Post date:** [September 15, 2022, 11:36am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770/7 "2022-09-15T11:36:05Z")

</div>

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