Math for Game Developers - Mouse Control (Euler Angles)

[@mattsYT42]

not knowing this channel while doing game dev was like chopping down trees in minecraft with your hand 😭

[@grimvian]

Although I left C++ for C, two years ago, I'm so fortunate, that can understand enough C++, so I can benefit from this fantastic video series. Your way of teaching and your pedagogical approach, is an example to follow for other KZbinr's. You are using the full screen and don't have irrelevant information and very important, no disturbing background music. I'm using Raylib graphics, that also are made for teaching and for games.

[@joelqrq]

These type of videos totally help me understand maths. I'm always having difficulties understanding math. Thanks for these playlist!

[@haxpor]

I found it useful to look at spherical coordinate to understand why it needs to multiply with cos(p) and overall in general. Thanks for great video.

[@wasiimo]

Some visuals on this combined with the graphs would be much appreciated.

[@JorgeVinoRodriguez]

C++ and OpenGL :) You can download the source code if you want to check it out, look in the description.

[@Digifan001]

So Roll would mean like when you tilt your head? But it looks like we don't need roll in this case if we are just wanting to see where the character is looking. Like tilting the character's head when is hiding and want to see the monster (or the enemy). But what would be the formula for that?

[@JorgeVinoRodriguez]

@@Digifan001 yes, roll is tilting your head. It doesn’t affect the “forward” vector of where the character/camera will be looking. It does affect the “right” and “up” vectors that describe what is to the side and above the character. The forward right and up vectors together form a rotation matrix. Keep watching the series for more info on that and if you still have trouble ask again :)

[@deltamish]

Great video. Really Awesome.Thanks for explaining in such detail . But the thing is i dont quite get why it was necessary to multiply the cos(yaw) with x and z vectors. Would you please explain it to me Thanks

[@macdeng7324]

First project Vxyz to xz plane in y direction,got Vxz, than project Vxz to x aixs in z direction, got Vx. Vxz=Vxyz*Cos(p), Vx=Vxz*Cos(y), so V(x)=Vxyz*Cos(y)*Cos(p).

[@maxqia]

Basically, the Yaw Triangle's Hypotenuse is cos(p)

[@droo3640]

Great video. I wondered for a bit about why pitch affects Vx and Vz while yaw doesn't affect Vy even though all three axes are mutually perpendicular and there isn't anything "special" about the vertical axis, but I realized (and correct me if I'm mistaken) that the reason is because pitch is defined as rotation AWAY from the plane formed by the other x and z axes. Whereas yaw is simply rotation along the xz axis which is effectively the same as rotating in a circle around the y-axis but remaining perpendicular at all times... thus never affecting Vy. I do have a question though. I understand the intuition behind why the pitch affects Vx and Vz (completely vertical means no displacement in either x and z directions, etc.) but why exactly is the result obtained via multiplication? I understand where the cosp comes from, but it's really just the multiplication part that has me scratching my head. Aside from the obvious cases of the pitch being 90deg or 0deg, why does multiplication give us the exact results for Vx and Vz that we are looking for?

[@JorgeVinoRodriguez]

It may help to write out some values to see how they work together. Get a few simple values for yaw and pitch and go through the math and see how v turns out. It may also help to try to derive the above equations. In the video (haven't watched it recently but I think) I just claim that multiplication is how it works, but I don't show proof. Deriving the equations might help you see why multiplication falls out. Draw a sphere and label pitch, yaw (might help to use theta and phi as opposed to p, y like i did in the video, to disambiguate yaw from y) and then use trig identities to solve for x y z. The multiplication comes from you favorite trig identities, sin = opposite/hypotenuse, cos = adjacent/hypotenuse.

[@JorgeVinoRodriguez]

To answer the more philosophical question "why multiplication and not addition or something else?" ... I don't know :P

[@droo3640]

I thought about it for a bit and I think it might be related to scalar projections. Without any pitch, the x-component is just the scalar projection onto the x-axis of the unit vector rotated by the yaw. Scalar projection is calculated as |b|cos(theta), where |b| is the magnitude of the vector being projected. Once you start factoring in a pitch, |b| itself becomes a scalar projection calculated by the same formula, which ends up being 1 * cos(pitch) since we're assuming a unit vector. So going back to the scalar projection formula of |b|cos(theta), the |b| is 1 * cos(pitch) and the cos(theta) is just cos(yaw). So you get cos(pitch)*cos(yaw).

[@JorgeVinoRodriguez]

That's a great way to think about it!

[@bemdav]

Can you explain why in the Normalize method you used IF for pitch but WHILE for yaw? Could you not you use IF for yaw as well?

[@JorgeVinoRodriguez]

Yea I suppose it should be fmod but I'm a bad programmer.

[@jeremyh9841]

great video but difficult to understand at the end because its fast

[@firefly9206]

Do x and y parameters in MouseMoution method represent coordinates of a mouse in pixels? I just can't understand how we can get angles with help of x and y params. (p.s. sorry for english)

[@ThePCxbox]

Ive enjoyed everything so far but your translation to a vector confuses me. Is the XYZ just a new point and the graphs are you selectively choosing to only consider pitch and yaw for the time being?

[@piyushslayer]

Excellent tutorial! I am so glad I found your math for game devs series! You have earned yourself new follower! :D

[@Moonz97]

what language do you use and what's the graphics package? Awesome video.. its rare to find these type of videos around here. subbed :)

[@minxythemerciless]

Why Euler Angles / Cartesian coordinates to represent a view direction in 3d space? Both are 3 dimensional. Alt-Azimuth (e.g. latitude & longitude) are only 2 dimensional (though with an implicit vector length of earth radius when using latitude and longitude)

[@JorgeVinoRodriguez]

Not sure what your question is so I'll just say a bunch of stuff and hopefully some of it answers the question. There are many different ways of representing rotations in 3d space. You need at least three values to do it, but you could use more. Using a vector pointing at a direction (cartesian coordinates) is one way to specify an angle, and using pitch/yaw/roll is another. A vector is 3 dimensional but doesn't specify as much information as pitch/yaw/roll since it doesn't specify the roll part. You can take a vector and get pitch/yaw out of it but you need more info to determine the roll. In other words, knowing alt/az or lat/long tells you where on the earth you are but it doesn't tell you your full rotation in 3d space because you're still facing some direction (N/S/E/W) so you need to know that too.

[@23blackrage]

Hi Jorge, first of all thanks for the great tutorials, I really enjoy them. But I've got one question about the code example on github is there an simple way to get it building in Visual Studio 2015? Because I get some compilation and linking errors, which I think are related to the libglfw used. Thank for any help, otherwise I'll just have to install an additional visual studio. And thanks again for teaching this stuff in an entertaining way.

[@Black2Sonny]

Hello Jorge. I have couple of questions about Euler angles rotations (at all). Will be glad if you help me understand whats going on :) 1) Why we use limitation for Pitch? I tried remove it and got weird result. But I can't understand how its working. Is it possible to use Euler camera for full rotation around Pitch (like Yaw)? 2) I used your camera sample and tried find Gimbal lock (for educational purposes) but unfortunately I can't. Is it possible or I something missed? Thanks in advance.

[@JorgeVinoRodriguez]

Answer for 1) There are many different ways of representing any given rotation with Euler Angles. For example, if you want to turn your head upside down you can roll your head all the way to the side or you can tilt your head all the way back and then wheel your chair around. By restricting pitch to be from -90 degrees to 90 degrees we remove the extra possible representations, which means we can make the math simpler. Answer for 2) You'll have to remove the protections I mentioned before. The algorithms come into the most trouble when you try to convert another representation to Euler Angles, and your pitch is close to 90 degrees.

[@wasiimo]

Wait, if I'm correct that block is not rotating right? just your camera?

[@JorgeVinoRodriguez]

+fun Tertain Yes, just the camera. In an actual game usually the character would rotate as well.

[@wasiimo]

Jorge Rodriguez I see, thank you

[@lookinthemirrornow]

+Jorge “Vino” Rodriguez We made a movie of the Loco Island space. ¡🌴 lookinthemirror's Loco Roco 🌴! hope you like it!

[@grigorpenev495]

Very interesting solution to the problem. I think a more proper way to implement it would be to map the delta mouse movements to the [0, 2*pi] range. You will still need to check the pitch, but I think the yall "normalization" would be eliminated. Are you converting the angles to radians before sifting them through the cos and sin funcitons? I think that the trig. functions from the math library require that all angles be in radians.

[@JorgeVinoRodriguez]

Hmm, you may have found a bug in that implementation!

[@superdepressif6047]

I don't understand this line : int iMouseMovedX = x - m_iLastMouseX; same for y, why do we need the last x position of the mouse ?

[@JorgeVinoRodriguez]

We are calculating how far the mouse has moved this frame. So we're taking x (the current mouse position) and subtracting from it m_iLastMouseX (the previous mouse position) to figure out how many pixels to the left or right the mouse has moved since the previous frame.

[@superdepressif6047]

Thanks, sounds obvious now that you've explained it!

[@DaniloSouzaMoraes]

I might have missed it, but how does a 360 rotation work? Do i have to keep track of the angle and then switch sin and cos by cos and sin?

[@JorgeVinoRodriguez]

+Danilo Souza Moraes First you have to generate a vector that points to the side and a vector that points forward. Then you say side * cos(theta) + forward * sin(theta) and you have your rotation as you rotate theta. Keep watching my videos, I eventually cover how to do this.

[@tahiriqbal8543]

Such nice tutorial it's really helpful for game developers and to understand back end mechanism

[@Sploige]

Why when you put in the code for calculating yaw and pitch values in the mouse section do you not put the row in as well?

[@Terf1988]

I wish I had really comprehended math in high school and college. :P Only took some algebra courses. edit: I guess 3:20 is some SOH CAH TOA?

[@HylianEvil]

Will you be doing a video on Quaternions?

[@jonclay8629]

Cool video! Nice job especially on explaining the math part.

[@youssefgaaloul]

Why is the hypothenuse equal to 1?

[@JorgeVinoRodriguez]

We're setting up the problem so that it's on the unit circle. The hypotenuse is a radius of the unit circle radius 1.

[@youssefgaaloul]

@@JorgeVinoRodriguez thx, now I understand

[@TheAmoscokkie]

any books to recommend for game maths ?

[@JorgeVinoRodriguez]

Ha, it didn't take long for the first Euler angles trashing to come in. (At least I hope you mean the angles, and not Euler himself.) Euler angles have their drawbacks but they're conceptually simple to learn and in this situation the drawbacks don't hurt. We'll learn about more advanced methods of representing angles later.

[@grigorpenev1761]

What exactly is happening here? You're creating a unit vector, that is lying on a unit sphere centered at the origin and you're translating the origin of the unit sphere by placing it at the position of the entity ?

[@mbbmbbmm]

I am really enjoying this series so far and already learned a lot. However I find rotations to be very confusing and unfortunately this video didn't help as much as I hoped it would. (well it did get me to look into the sin cos part that I somehow never learned in school XD ) Isn't it important with Euler Angles that the rotations around the axes are done individually? And doesn't the order in which they are applied matter a lot? For instance first rotate around the parent's y axis, then the local x axis, like a gimbal or a gun turret? And if the rotation is around the local y (instead of the parent's y), then the local x axis, we'd have to reverse the order of rotations in order to go back to the original state. But in the video it seems like you are applying two rotations at the same time, since you are setting the components of just one vector? Then again, you are modifying both Vz and Vx by cos p, so does that mean pitch comes second? I kind of understand that cos p must influence Vz and Vx in order to get a unit vector because they both are on the same "cos p plane". But I didn't really understand your explanation that yaw and roll don't matter when you are for instance flying straight up. If I am spinning around my own y axis (yaw) and then start to rotate my head around its local x-axis in order to look up (pitch) the yaw is still making a big difference for my eyes and anything off center otherwise I wouldn't get dizzy! :D if I am spinning around the local y axis and so it gets tilted by the x rotation like a plane, the yaw would be equal to rolling on my back from side to side on the floor. :D I am not even sure if you are rotating around global or local axes in the video... Could you try to clear up my confusion a little? Thank you for your time and effort!

[@JorgeVinoRodriguez]

+mbbmbbmm Yes the order matters, exactly for the reason you describe. You need to decide which rotation you're going to apply "first" and proceed with the math in that way. I usually choose roll first, then pitch, then yaw, because that makes them interfere with each other the least. Once you have decided that, you do the calculations for what your vector x y and z should be. The order of the calculations determines what the formulas for x y and z come out to, but once you have those you can just assign them in any order. To understand why things get crazy when you look straight up, try thinking about the pitch/yaw/roll representation of the vector (0, 1, 0), assuming y goes up. That's a vector that looks straight up, so I could say that 90/0/0 is its Euler representation. But 90/180/0 points the same way. That would be a bearable situation because there's a degree of freedom when you're looking up (you can also spin on the up axis) but what about 90/0/90? That also points straight up. So 90/0/90 = 90/90/0, ie if you turn 90 degrees yaw and then pitch up you get the same result as if you turn 90 roll and then pitch up. So you've completely lost a degree of freedom. That is called Gimbal Lock. Hope that helps.

[@mbbmbbmm]

So that is the dreaded Gimbal Lock, I see. Did you follow the order that you just described in this video, i.e. (no roll), pitch, yaw? In other words am I correct if I assume that the yaw rotation is around a more or less tilted y axis, but is restricted by the cos p?

[@JorgeVinoRodriguez]

Yea I did that order in this video, but without the roll. Not sure what you mean by the second question though.

[@mbbmbbmm]

Jorge Rodriguez Ha ok, I am just trying to visualize it and am still a little confused about the space you are rotating in. So if the rotation is in local space, when pitch gets applied, the local Y axis of the object will get rotated/tilted (relative to the global Y). The yaw applied in local space would then make the object rotate around this rotated Y axis, right? Obviously if you are rotating in world space this would not be the case, because there the axes always stay locked down.

[@JorgeVinoRodriguez]

+mbbmbbmm There are some different ways you can think about this. For the purposes of this video, I always consider the rotations to be done in global space. So, if you do a roll before a yaw, the yaw operation will still rotate the object along the global up/down axis. You could think about it the other way, that rotations shift the axes of rotation. The math would come out different that way, but it would be equivalent. Let's think about it that way for a moment. Then they way to do it which is easiest to think about it for me is to do yaw first, then pitch, then roll. Doing it that way is fine, and is mathematically equivalent to doing it the global way.

[@TheFingledorf]

well trying to translate this to C#/Unity hasn't been easy. I'll try asking for help on the Unity forum

[@easylearn3779]

What application

[@RolleRMain]

what the software that you are using is called?

[@JorgeVinoRodriguez]

Either Photoshop or Mischief

[@TheFingledorf]

also Visual Studio right?

[@JorgeVinoRodriguez]

Because the mouse doesn't control the player's view roll. I mean, it could if you wanted it to, but that's not the way you generally want it.

[@syntaxed2]

I always pronounced Euler as in "Yooler" lol

[@darkreaper4990]

Who would have thought it's "oiler". Smooth sounding name ngl 😂

[@LotusEvistix]

thanks for your work :)

[@DarkDrakman]

But...Roll was useless?

[@JorgeVinoRodriguez]

Haha, in this case yes.

[@jacksonkr_]

In a different orientation roll becomes valuable. It's tricky to comprehend, I'm still working on understand the whole deal..

[@julianaskuratovsky8701]

Ultra top amazing!! The author is just great😎✨

[@TsERS-zl5um]

Sir, how much you are writing with the mouse in the computer, how are you writing it and what software are you using, Sir, please tell us, please sir, we have been the master of math. Sir, we can write in our computer with it, the way you are writing, please tell us how we can write in our computer and what software we can use.

[@JorgeVinoRodriguez]

Ts. ERS I use a tablet and write with a pen

[@JorgeVinoRodriguez]

Yes, eventually! :D

[@laurentiubistrian6372]

thanks man!

[@Terf1988]

Dammit I want it to be pronounced "U-ler" angles like in my head. ;)

[@TheFingledorf]

Here are my Unity / C# scripts (in separate comments), if it helps somebody. (VectorNew is the Vector class I created for this series. Vector3 is Unity's regular vector class.) using System.Collections; using System.Collections.Generic; using UnityEngine; //(started in Video 12) public class Game : MonoBehaviour { [SerializeField] float maxSpeedAbs; float minSpeedAbs = 0; [SerializeField] Rigidbody rbPlayer; [SerializeField] Camera cam; public VectorNew veloGoal; public VectorNew veloCurrent; Vector3 rbVelo; EulerAngle camEulerAngle; VectorNew camVector; private void Start() { camEulerAngle = new EulerAngle(); camEulerAngle.pitch = 0.6f; //radian amount to start with looking slightly down at an angle } void KeyRelease(float minSpeed) { if (Input.GetKeyUp("w")) veloGoal.z = minSpeed; if (Input.GetKeyUp("s")) veloGoal.z = minSpeed; if (Input.GetKeyUp("d")) veloGoal.x = minSpeed; if (Input.GetKeyUp("a")) veloGoal.x = minSpeed; } void KeyPress(float maxSpeed) { if (Input.GetKey("w")) veloGoal.z = maxSpeed; if (Input.GetKey("s")) veloGoal.z = -maxSpeed; if (Input.GetKey("d")) veloGoal.x = maxSpeed; if (Input.GetKey("a")) veloGoal.x = -maxSpeed; } float sensitivity = 0.1f; void MouseMotion() { float mouseX = Input.GetAxis("Mouse X"); float mouseY = Input.GetAxis("Mouse Y"); camEulerAngle.pitch += mouseY * sensitivity; camEulerAngle.yaw += mouseX * sensitivity; camEulerAngle.Normalize(); } public void Update() { KeyPress(maxSpeedAbs); KeyRelease(minSpeedAbs); MouseMotion(); } public void FixedUpdate() { veloCurrent.z = Maths.Approach(veloGoal.z, veloCurrent.z, Time.deltaTime * 40); veloCurrent.x = Maths.Approach(veloGoal.x, veloCurrent.x, Time.deltaTime * 40); if (veloCurrent.x > 0) { Debug.Log($"VeloCurrent.x: {veloCurrent.x}"); Debug.Log($"VeloCurrent.x * dt: {veloCurrent.x * Time.deltaTime}"); } //(set the VectorNew into a Vector3) rbVelo = new Vector3(veloCurrent.x, 0, veloCurrent.z); rbPlayer.position += rbVelo * Time.deltaTime; } private void LateUpdate() { VectorNew cEA = camEulerAngle.ToVector(); Vector3 camPos = new Vector3(cEA.x, cEA.y, cEA.z); cam.transform.position = rbPlayer.gameObject.transform.position - camPos * 5f; Vector3 dir = rbPlayer.gameObject.transform.position - cam.transform.position; Debug.DrawRay(cam.transform.position, dir, Color.red); cam.transform.rotation = Quaternion.LookRotation(dir, Vector3.up); } }

[@TheFingledorf]

using System.Collections; using System.Collections.Generic; using UnityEngine; public class EulerAngle : MonoBehaviour { public float pitch, yaw, roll; public EulerAngle() { } public EulerAngle(float pitch, float yaw, float roll) { this.pitch = pitch; this.yaw = yaw; this.roll = roll; } public VectorNew ToVector() { VectorNew result; if (pitch < 0) pitch = 0; result.x = Mathf.Cos(yaw + 90 * Mathf.Deg2Rad) * Mathf.Cos(pitch); result.y = -Mathf.Sin(pitch); result.z = Mathf.Sin(yaw + 90 * Mathf.Deg2Rad) * Mathf.Cos(pitch); return result; } float eightyNineAsRads = 89 * Mathf.Deg2Rad; float oneEightyAsRads = 180 * Mathf.Deg2Rad; //TODO: figure this out / solve issues: public void Normalize() { //to keep camera from going below or above player if (pitch > eightyNineAsRads) pitch = eightyNineAsRads; //half-PI, about 1.56, so cam doesn't swoop over and back down if (pitch < 0) //-eightyNineAsRads) pitch = 0; //-eightyNineAsRads; //0 so doesn't go below player //Debug.Log($"pitch - in radians - after normalize: {pitch}"); if (yaw < -oneEightyAsRads) yaw += oneEightyAsRads * 2; if (yaw > oneEightyAsRads) yaw -= oneEightyAsRads * 2; //Debug.Log($"yaw - in radians - after normalize: {yaw}"); } public override string ToString() { return new string($"{pitch}, {yaw}, {roll}"); } }

[@TheFingledorf]

using System.Collections; using System.Collections.Generic; using UnityEngine; public class VectorsAndPoints : MonoBehaviour { } public struct VectorNew { public float x, y, z; //public VectorNew() { } public VectorNew(float x, float y, float z = 0) { this.x = x; this.y = y; this.z = z; } public VectorNew Normalized() { float l = Length(); if (l == 0) throw new System.ArgumentException("WARNING: Divide by 0 error."); VectorNew v = this / Length(); return v; } //length of current instance of vector public float Length() { return GetVectorsLength(this.x, this.y); } //length squared to avoid expensive sqrt operation (for comparison) public float LengthSqr() { return this.x * this.x + this.y * this.y; } //for any vector, instead of the current instance public static float GetVectorsLength(float x, float y) { return Mathf.Sqrt(x * x + y * y); } //get the dot prod between two vectors public static float DotProduct(VectorNew v1, VectorNew v2) { float dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z; if (dot > 1 || dot < -1) throw new System.ArgumentException("WARNING: Dot product must be between 1 and -1. Make sure parameter vectors are normalized."); return dot; } //------------- //operator overload - add two vectors together public static VectorNew operator + (VectorNew v1, VectorNew v2) { return new VectorNew(v1.x + v2.x, v1.y + v2.y); } //operator overload - subtract two vectors public static VectorNew operator -(VectorNew v1, VectorNew v2) { return new VectorNew(v1.x - v2.x, v1.y - v2.y); } //operator overload - multiply a vector by a scalar (vid 5) public static VectorNew operator * (VectorNew v, float f) { return new VectorNew(v.x * f, v.y * f); } //operator overload - divide a vector by a scalar (vid 5) public static VectorNew operator / (VectorNew v, float f) { if (f == 0) throw new System.ArgumentException("WARNING: Divide by 0 error."); return new VectorNew(v.x / f, v.y /f); } public override string ToString() { return $"({x}, {y}, {z})"; } } public struct Point { public float x, y; //public Point() { } public Point(float x, float y) { this.x = x; this.y = y; } public Point AddVector(VectorNew v) { Point p2 = new Point(); p2.x = this.x + v.x; p2.y = this.y + v.y; return p2; } //operator overloading - subtract two points and return a vector public static VectorNew operator -(Point a, Point b) { VectorNew v = new VectorNew(); v.x = a.x - b.x; v.y = a.y - b.y; return v; } }

[@490o]

FInally someone who pronounces "Euler" properly.

[@huyvole9724]

Thank you post but your video not clear.

[@0ZANGETSUFLASH0]

game development is not meant for me i never listened to physics,algebra nor trigonometry -_- better moved forward

[@Robocat754]

Actually some of the mathematics are already built into the modern game engine such as unity. You don't need to understand how it works to make games. But knowing all this stuff will definitely make you a better game developer.

[@piyushslayer]

Excellent tutorial! I am so glad I found your math for game devs series! You have earned yourself new follower! :D