# Rotate vectors in 3D

**URL:** <https://discourse.processing.org/t/rotate-vectors-in-3d/18660>\
**Category:** Coding Questions\
**Created:** [March 14, 2020, 6:08pm UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660 "2020-03-14T18:08:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![OrSarfati](https://avatars.discourse-cdn.com/v4/letter/o/43a26b/32.png) [@OrSarfati](https://discourse.processing.org/u/OrSarfati)\
**Post date:** [March 14, 2020, 6:08pm UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/1 "2020-03-14T18:08:42Z")

</div>

Hi there!

I did some research about this topic on this forum and in general. The subject was discussed here before but with no-code solutions for **3D**. I like to address that topic again with the hope to find an easy solution that can help me and the following to come.

Let’s say I like to create a Box between two 3D vectors, therefore i have to rotate it according to the angle between V1 to V2. This thread has the same issue in 2D - [WEBGL cylinder between two points](https://discourse.processing.org/t/webgl-cylinder-between-two-points/13806).  
Following that i manage to rotate the **XY** positions accordingly, but still not for **Z**.

**XY rotations are correct, still missing Z rotation.**

 ![DawnSystem_871772](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/36215f6305a2100171b47bd8e09b59d4dba19555.jpeg)

**current use:**

```auto
				PVector heading = new PVector(position2.x - position.x, position2.y - position.y,
						position2.z - position.z);
				PVector midpoint = PVector.lerp(position, position2, 0.5f);

				canvas.strokeWeight(2);
				canvas.noFill();
				canvas.stroke(0, 255, 0);
				canvas.line(p1.pos.x, p1.pos.y, p1.pos.z, p2.pos.x, p2.pos.y, p2.pos.z);

				canvas.stroke(255);
				canvas.pushMatrix();

				canvas.translate(midpoint.x, midpoint.y, midpoint.z);
				canvas.rotate(heading.heading() + PApplet.PI / 1.0f);
				canvas.box(heading.mag(), 5, 5);
				canvas.popMatrix();

```

I was also trying to play with **getRotatedAroundAxis** of Toxiclibs.

As noted - Any pointers will be greatly appreciated 😉  
Thanks!

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [March 14, 2020, 8:48pm UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/2 "2020-03-14T20:48:40Z")

</div>

Hello, I may not have the exact solution, but you may find a simple workaround using these few lines of code:

Say you want to rotate something to face a normalized vector, v

```auto
rotateY(atan2(-v.x,-v.z));
rotateX(asin(-v.y));

```

works great for images that always face the camera

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 23, 2020, 3:34am UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/3 "2020-03-23T03:34:43Z")

</div>

For very limited cases, you can hack 3D rotation using PVector and hope that you don’t run into gimbal lock.

As soon as you need something general-purpose, though, representing rotation state in terms of xyz has lots of known problems. Instead, use quaternions. They are complicated and it is a pain – but they actually work. The PeasyCam library has a great reference implementation.

---

<div class="post-metadata">

**Author:** ![alfrandell](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@alfrandell](https://discourse.processing.org/u/alfrandell)\
**Post date:** [May 5, 2020, 12:41am UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/4 "2020-05-05T00:41:24Z")

</div>

Thankyou for the good answer, jeremy! I intend to study the suggested peasycam example. For now, i have aimed my predatory cone using bennyhackers code. I had to use acos instead of asin.  
I have so much to learn, as i would like to work with vr.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 5, 2020, 7:46am UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/5 "2020-05-05T07:46:02Z")

</div>

As @jeremydouglass points out the _best solution_ is to use quaternions because they are flexible, powerful and don’t exhibit gimbol lock. Now having said that there are a number of caveats with using quaternions and using them with Processing.

Creating your own quaternion class is a possibility provided you are seriously good at maths and matrices, the alternative is to find a library implementation.

Both PeasyCam and Shapes3D libraries use the Apache Commons Maths Library which provides an easy to use Rotation class. This class is a wrapper for quaternions but concentrates on providing methods for rotating vectors which is what you want.

Sounds too good to be true? Here is the downside, the library uses the `double` data type throughout and Processing uses the `float`. The library also has its own vector class (Vector3D) and cannot (unsurprisingly) use Processing’s PVector class.

Just to prove we can all make mistakes, when I decided to incorporate this library into Shapes3D I spent days hacking the library code to provide a Rotation class that used `float` and the PVector class, i.e. compatible with Processing. I did a load of static tests comparing the output of Apache and my float version and they looked good. The problem came when using it for real, I got some very unexpected visual rotations and when I debugged the code I found a lot of Float.NaN values (NaN - not a number). It was obvious the `float` data type lacked the precision for some of the intermediate calculations. What a waste of time LOL.

PeasyCam and Shapes3D use slightly different approaches to using the library:

- PeasyCam a beautiful library, has created a separate jar file (peasy-math.jar) for the maths and links to that.
- Shapes3D is different because it needs a more intimate link with the Processing sketch and uses the PVector class. I have actually copied the source code of the relevant Maths library classes into Shapes3D and created a utility class to convert between PVector and Vector3D objects.

I suggest that you install Shapes3D because it exposes all of the Apche Maths library you need for rotations and the Util class in Shapes3D provided useful methods for converting between Vector3D and PVector objects.

Try some simple experiments first because it will take awhile to get to understand the Rotation class and how to use it, at least it did for me.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 5, 2020, 3:36pm UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/6 "2020-05-05T15:36:30Z")

</div>

Wow, what a great answer, @quark. Sharing this kind of in-depth project experience is invaluable.

---

<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:** [May 6, 2020, 1:11am UTC](https://discourse.processing.org/t/rotate-vectors-in-3d/18660/7 "2020-05-06T01:11:59Z")

</div>

Hello,

Some additional resources:

> **[3D Rotations in Processing (Vectors, Matrices, Quaternions)](https://medium.com/@behreajj/3d-rotations-in-processing-vectors-matrices-quaternions-10e2fed5f0a3)**
>
> This tutorial introduces how to rotate objects in 3D beyond Euler angles; to do this, it looks at the basics of matrices and quaternions…

  

> **[3D Transformations in Processing](https://medium.com/@behreajj/3d-transformations-in-processing-de11acdd1fbc)**
>
> This tutorial explores how translation, rotation and scale — taken together under the umbrella term affine transformations — work in…

  

> **[Cameras in Processing (2D and 3D)](https://medium.com/@behreajj/cameras-in-processing-2d-and-3d-dc45fd03662c)**
>
> This tutorial introduces moving virtual cameras for 2D and 3D Processing sketches. First it looks at strategies for wrapping screen…

  

> **[Comparing Pixels, Vectors & Colors In Processing](https://medium.com/@behreajj/comparing-pixels-vectors-colors-in-processing-7fad26aa126c)**
>
> The Pixel Array

[https://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/](https://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/)

`:)`