# Rotate a Sphere to have a point on the surface be centered on screen

**URL:** <https://discourse.processing.org/t/rotate-a-sphere-to-have-a-point-on-the-surface-be-centered-on-screen/5712>\
**Category:** Coding Questions\
**Created:** [November 19, 2018, 2:30pm UTC](https://discourse.processing.org/t/rotate-a-sphere-to-have-a-point-on-the-surface-be-centered-on-screen/5712 "2018-11-19T14:30:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![FedFod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fedfod/32/2312_2.png) [@FedFod](https://discourse.processing.org/u/FedFod)\
**Post date:** [November 19, 2018, 2:30pm UTC](https://discourse.processing.org/t/rotate-a-sphere-to-have-a-point-on-the-surface-be-centered-on-screen/5712/1 "2018-11-19T14:30:26Z")

</div>

Hi all,  
this is the scenario: I have a sphere made up of an array of vec3 vertices.  
When I click a button, I want that the whole sphere rotates in a way that the vertex I selected gets positioned in the center of the screen, so in world coordinates x and y should be 0. I cannot use the rotate function built in P5, so I made my own rotate functions for the 3 axis.

This is what I have until now, but clearly doesn’t work:

```auto
  m4.rotateTowardPoint = function(vertices, index) {
    let point = vertices[index];
    let normal = p5.Vector.sub(point, m4.createVector(0,0,0));
    let upVector = m4.createVector(0,0,-1);

    let n = normal.normalize();

    let angleOfRotation = n.angleBetween(upVector);
    let axisOfRotation = p5.Vector.cross(n, upVector);
    m4.verticesRotated = vertices.slice(0);

    rotateX3D(angleOfRotation*axisOfRotation.x, m4.verticesRotated);
    rotateY3D(angleOfRotation*axisOfRotation.y, m4.verticesRotated);
}

```

My rotate funcions:

```auto
  function rotateZ3D(t, xyz) {
      const c = Math.cos(t), s = Math.sin(t), len = xyz.length;
      for (let i = 0; i < len; i += 1) {
        const x = xyz[i].x, y = xyz[i].y;
        xyz[i].x = x*c - y*s;
        xyz[i].y = y*c + x*s;
      }
    }

    function rotateY3D(t, xyz) {
      const c = Math.cos(t), s = Math.sin(t), len = xyz.length;
      for (let i = 0; i < len; i += 1) {
        const x = xyz[i].x, z = xyz[i].z;
        xyz[i].x = x*c - z*s;
        xyz[i].z = z*c + x*s;
      }
    }

    function rotateX3D(t, xyz) {
      const c = Math.cos(t), s = Math.sin(t), len = xyz.length;
      for (let i = 0; i < len; i += 1) {
        const y = xyz[i].y, z = xyz[i].z;
        xyz[i].y = y*c - z*s;
        xyz[i].z = z*c + y*s;
      }
    }

```

Thank you for any help!

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 20, 2018, 4:32am UTC](https://discourse.processing.org/t/rotate-a-sphere-to-have-a-point-on-the-surface-be-centered-on-screen/5712/2 "2018-11-20T04:32:03Z")

</div>

I’ll assume that your general rotate function works, but the vertex specific one doesn’t. In that case you can just subtract the position of the vertex that you selected from all other vertices and then rotate the sphere. You can also add to all vertices a specific amount so that the selected vector will be in the center. Note that this will rotate the sphere around that vector, so the sphere will be offcentered depending on the rotation.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 20, 2018, 4:50am UTC](https://discourse.processing.org/t/rotate-a-sphere-to-have-a-point-on-the-surface-be-centered-on-screen/5712/3 "2018-11-20T04:50:25Z")

</div>

Those 3 rotate functions seem to come from this sketch, right? 🕶

> **[Rotating Cube](https://bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267)**
>
> GoSubRoutine’s Block a117ecb16a8b0f939a190f87d3a13267

Notice though that sketch is using: `angleMode(DEGREES)`: ❗  
[p5js.org/reference/#/p5/angleMode](http://p5js.org/reference/#/p5/angleMode)

Otherwise, you’re gonna need to convert all angle arguments passed to parameter _t_ to **radians()**: 💱  
[p5js.org/reference/#/p5/radians](http://p5js.org/reference/#/p5/radians)

That’s exactly what the Java Mode version does inside **mouseDragged()** btW: ☕

> **[Rotating Cube - OpenProcessing](https://www.openprocessing.org/sketch/421281)**
>
> PeterCollingridge.AppSpot.com/3D-tutorial