# Euler angles, while working on a flight simulator

**URL:** <https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441>\
**Category:** Coding Questions\
**Created:** [September 10, 2018, 5:59pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441 "2018-09-10T17:59:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![EMJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emj/32/1475_2.png) [@EMJ](https://discourse.processing.org/u/EMJ)\
**Post date:** [September 10, 2018, 5:59pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/1 "2018-09-10T17:59:41Z")

</div>

Hi all, i’m quite a beginner, more in 3d level math than in coding (i’m not so confident in my english too), and i’m trying to build from scratch a working flight simulator, not with amazing graphics, just for now a 3d model of a plane and pitch black background…but the first problem i have to solve, and on which i’m spending weeks, are the controls. i have 3 angles for the plane, and i’m applying the rotation in this order, Z, X, Y, the equivalent to roll, pitch and yaw, i already tryied yaw, pitch and roll, but still nothing…i want that whenever i press one of the 6 control keys (2 for each axis) the angle of that axis changes relative to the already changed others, if i move one and then reset all works, but if i want to change multiple angles at once, the all thing go crazy! I just wanted relative rotations…

Here is my code for the plane object, full with commented failed attempts!

function Plane(x, y, z) {  
this.x = x;  
this.y = y;  
this.z = z;  
this.upX = 0;  
this.upY = 0;  
this.rot = 0;  
this.dim = 50;  
this.color = color(255, 255, 255);

```
this.show = function () {
  push();
  ambientMaterial(this.color);
  translate(this.x, this.y, this.z);
  rotateZ(this.rot); //never works if not centered
  rotateX(this.upY); //works only after roll-rotateZ-this.rot
  rotateY(this.upX); //works
  ///rotateX(this.upY);
  ///rotateY(this.upX);
  ///rotateZ(this.rot);
  //rotateY(this.upX);
  //rotateX(this.upY);
  //rotateZ(this.rot);
  ellipsoid(this.dim/2, this.dim/5, this.dim, 10, 10);
  translate(0, -20, 40);
  ellipsoid(2, 20, 15, 5, 5);
  pop();
}

this.move = function () {
  this.x += cos(-this.upY)*cos(this.upX);
  this.y += sin(-this.upY);
  this.z += cos(-this.upY)*sin(this.upX);
}

this.update = function () {
  if(keyIsDown(65)) {
    this.rot -= QUARTER_PI / 32;
  }
  if(keyIsDown(68)) {
    this.rot += QUARTER_PI / 32;

  }
  if(keyIsDown(69)) {
    this.upX -= (QUARTER_PI / 32);
    //this.upY += (QUARTER_PI / 32)*sin(this.rot);
    //this.upX -= (QUARTER_PI / 32)*cos(this.upY)*cos(this.rot);
  }
  if(keyIsDown(81)) {
    this.upX += (QUARTER_PI / 32);
    //this.upY += (QUARTER_PI / 32)*sin(this.rot);
    //this.upX += (QUARTER_PI / 32)*cos(this.upY)*cos(this.rot);
  }
  if(keyIsDown(83)) {
    this.upY -= (QUARTER_PI / 32); //relative somehow to upX!
    //this.upY += (QUARTER_PI / 32)*cos(this.upX)*cos(this.rot);
    //this.upX -= (QUARTER_PI / 32)*sin(this.rot)*cos(this.upY);
    //this.rot += (QUARTER_PI / 32)*sin(this.upX)*sin(this.upY);
  }
  if(keyIsDown(87)) {
    this.upY += (QUARTER_PI / 32)*cos(this.upX); //relative somehow to upX!
    this.rot -= (QUARTER_PI / 32)*sin(this.upX);
  }
}
if(this.upY <= 0)
  this.upY = TWO_PI;
else if(this.upY >= TWO_PI)
  this.upY = 0;
if(this.upX <= 0)
  this.upX = TWO_PI;
else if(this.upX >= TWO_PI)
  this.upX = 0;
if(this.rot <= 0)
  this.rot = TWO_PI;
else if(this.rot >= TWO_PI)
  this.rot = 0;

```

}

NB: upX is the angle moving on X and Z axis, used for the Y axis rotation, usually called PHI, upY is THETA, the elevation above the XZ plane, which rotate on X axis, and i think should do so also on the Z one…and in the end rot is the angle moving on the XY plane which cause the Z axis rotation!  
If you want to correlate them to yaw, pitch and roll:  
upX -\> yaw  
upY -\> pitch  
rot -\> roll

Help pleas!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 10, 2018, 8:54pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/2 "2018-09-10T20:54:32Z")

</div>

Can I ask you to provide your complete code?

---

<div class="post-metadata">

**Author:** ![EMJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emj/32/1475_2.png) [@EMJ](https://discourse.processing.org/u/EMJ)\
**Post date:** [September 11, 2018, 8:56pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/3 "2018-09-11T20:56:33Z")

</div>

Sure, here is the Sketch.js:

> **Sketch.js**
>
> ```auto
> let plane;
> 
> function setup() {
> createCanvas(windowWidth, windowHeight, WEBGL);
> strokeWeight(0.8);
> plane = new Plane(0, 0, 600);
> }
> 
> function draw() {
> background(0);
> ambientLight(255);
> 
> plane.update();
> //plane.move();
> plane.show();
> }
> 
> function windowResized() {
> resizeCanvas(windowWidth, windowHeight);
> }
> 
> ```

This is Plane.js

> **Plane.js**
>
> ```auto
> function Plane(x, y, z) {
> this.x = x;
> this.y = y;
> this.z = z;
> this.upX = 0;
> this.upY = 0;
> this.rot = 0;
> this.dim = 50;
> this.color = color(255, 255, 255);
> 
> this.show = function () {
> push();
> ambientMaterial(this.color);
> translate(this.x, this.y, this.z);
> rotateZ(this.rot); //never works if not centered
> rotateX(this.upY); //works only after roll-rotateZ-this.rot
> rotateY(this.upX); //works
> ///rotateX(this.upY);
> ///rotateY(this.upX);
> ///rotateZ(this.rot);
> //rotateY(this.upX);
> //rotateX(this.upY);
> //rotateZ(this.rot);
> ellipsoid(this.dim/2, this.dim/5, this.dim, 10, 10);
> translate(0, -20, 40);
> ellipsoid(2, 20, 15, 5, 5);
> pop();
> }
> 
> this.move = function () {
> this.x += cos(-this.upY)*cos(this.upX);
> this.y += sin(-this.upY);
> this.z += cos(-this.upY)*sin(this.upX);
> }
> 
> this.update = function () {
> if(keyIsDown(65)) {
> this.rot -= QUARTER_PI / 32;
> }
> if(keyIsDown(68)) {
> this.rot += QUARTER_PI / 32;
> 
> }
> if(keyIsDown(69)) {
> this.upX -= (QUARTER_PI / 32);
> //this.upY += (QUARTER_PI / 32)*sin(this.rot);
> //this.upX -= (QUARTER_PI / 32)*cos(this.upY)*cos(this.rot);
> }
> if(keyIsDown(81)) {
> this.upX += (QUARTER_PI / 32);
> //this.upY += (QUARTER_PI / 32)*sin(this.rot);
> //this.upX += (QUARTER_PI / 32)*cos(this.upY)*cos(this.rot);
> }
> if(keyIsDown(83)) {
> this.upY -= (QUARTER_PI / 32); //relative somehow to upX!
> //this.upY += (QUARTER_PI / 32)*cos(this.upX)*cos(this.rot);
> //this.upX -= (QUARTER_PI / 32)*sin(this.rot)*cos(this.upY);
> //this.rot += (QUARTER_PI / 32)*sin(this.upX)*sin(this.upY);
> }
> if(keyIsDown(87)) {
> this.upY += (QUARTER_PI / 32)*cos(this.upX); //relative somehow to upX!
> this.rot -= (QUARTER_PI / 32)*sin(this.upX);
> }
> }
> if(this.upY <= 0)
> this.upY = TWO_PI;
> else if(this.upY >= TWO_PI)
> this.upY = 0;
> if(this.upX <= 0)
> this.upX = TWO_PI;
> else if(this.upX >= TWO_PI)
> this.upX = 0;
> if(this.rot <= 0)
> this.rot = TWO_PI;
> else if(this.rot >= TWO_PI)
> this.rot = 0;
> }
> 
> ```

Here is the HTML index:

> **Index**
>
> ```auto
> <!DOCTYPE html>
> <html>
> <div>
> <p style="font-size:32pt" id="score"></p>
> </div>
> <head>
> <meta charset="UTF-8">
> <title>Motion engine game 3D</title>
> <script src="p5.js" type="text/javascript"></script>
> <script src="p5.dom.js" type="text/javascript"></script>
> <script src="Sketch.js" type="text/javascript"></script>
> <script src="Plane.js" type="text/javascript"></script>
> </head>
> <style>
> body {
> padding: 0px;
> margin: 0px;
> }
> canvas {
> vertical-align: top;
> position: absolute;
> z-index: -1;
> }
> div {
> position: absolute;
> left: 50px;
> top: 0px;
> text-align: center;
> color: green;
> }
> </style>
> <body>
> </body>
> </html>
> 
> ```

I hope this will be usefull!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 12, 2018, 6:26am UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/4 "2018-09-12T06:26:11Z")

</div>

> [@EMJ](#):
>
> I just wanted relative rotations…

I tested your code, all seems to work as intended, so this seems more of an issue with expectations vs reality. If I understand correctly, you want the yaw-keys to always make the plane rotate “left-to-right”; in other words you want the rotations to always move the plane the same way from the viewers perspective, is that correct?

---

<div class="post-metadata">

**Author:** ![EMJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emj/32/1475_2.png) [@EMJ](https://discourse.processing.org/u/EMJ)\
**Post date:** [September 12, 2018, 2:58pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/5 "2018-09-12T14:58:56Z")

</div>

No, right the opposite ahah, i want it to move correctly from the plane’s prospective…so for example:  
if i at first set upX, the yaw, at QUARTER\_PI, and then press W, the key to move down the plane’s head, the plane must move down his head on his before rotated X axis (or ZY plane of rotation), but id doesn’s, instead it rotate onto the original YZ plane (x axis), moving in a strange way, not so phiscally acceptable…what i want is to have the camera in place, and the plane flying around (with the plane.move function enable) just like a plane in the sky seen by a man on the ground, which is controlling it!

(As a debug system, maybe you shuld draw 3 torus with similar internal and external radius simulating the 3 rotation axis, that should help you understand…or look at this [http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/](http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/), it doesn’t work as i want because the roll works every time as i imagine it, but if i first roll and than pitch or yaw, they doesn’t work anymore realive to the plane’s shaft…if i yaw and then pitch it works, but the reverse thing doesn’t…)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 12, 2018, 5:26pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/6 "2018-09-12T17:26:50Z")

</div>

> [@EMJ](#):
>
> (As a debug system, maybe you shuld draw 3 torus with similar internal and external radius simulating the 3 rotation axis, that should help you understand…or look at this [http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/](http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/), it doesn’t work as i want because the roll works every time as i imagine it, but if i first roll and than pitch or yaw, they doesn’t work anymore realive to the plane’s shaft…if i yaw and then pitch it works, but the reverse thing doesn’t…)

Ah, that really helps to visualize what you want!

I fiddled around with it and put some sliders on an openprocessing sketch, to help visualize it.  
I’m going to admit, this is territory I’m not that familiar with, but maybe this sketch will help.

> **[Euler Angle Problem - Tony - OpenProcessing](https://openprocessing.org/sketch/588837)**

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 12, 2018, 5:35pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/7 "2018-09-12T17:35:22Z")

</div>

I did some googling and [ran across this article](https://gamedev.stackexchange.com/questions/136174/im-rotating-an-object-on-two-axes-so-why-does-it-keep-twisting-around-the-thir) I learned something new!

---

<div class="post-metadata">

**Author:** ![EMJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emj/32/1475_2.png) [@EMJ](https://discourse.processing.org/u/EMJ)\
**Post date:** [September 12, 2018, 7:31pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/8 "2018-09-12T19:31:36Z")

</div>

Amazing, that thing work as i wanted almost in everything, i only noticed that after a yaw or pitch, the roll gets messy…but still a great improvement on mine one! I also am reading the article you attached, and i think is what i was looking for!  
This isn’t my usual cup o tee too ahah, but a satysfaing thing when works, thank you far all your help, i’ll post again if i’ll discover something new, or developing a full working thing, just in order to remain in touch!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 12, 2018, 7:43pm UTC](https://discourse.processing.org/t/euler-angles-while-working-on-a-flight-simulator/3441/9 "2018-09-12T19:43:33Z")

</div>

> [@EMJ](#):
>
> just like a plane in the sky seen by a man on the ground, which is controlling it!

I can’t believe missed this part! I thought you wanted something completely different 🤦‍♂️

> [@EMJ](#):
>
> Amazing, that thing work as i wanted almost in everything, i only noticed that after a yaw or pitch, the roll gets messy…but still a great improvement on mine one! I also am reading the article you attached, and i think is what i was looking for!

Haha, I’m so glad I could help, because I’ve been trying to get it to work [like the example you linked](http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/).

Definitely update the thread when you get it working 😄