{"id":8651,"date":"2022-05-18T18:50:24","date_gmt":"2022-05-18T22:50:24","guid":{"rendered":"https:\/\/blogs.mathworks.com\/cleve\/?p=8651"},"modified":"2022-05-19T12:04:45","modified_gmt":"2022-05-19T16:04:45","slug":"rotation-matrices","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/cleve\/2022\/05\/18\/rotation-matrices\/","title":{"rendered":"Rotation Matrices"},"content":{"rendered":"\r\n<div class=\"content\"><!--introduction--><p>The  matrices in the following animations are at the heart of computer graphics. They describe objects moving in three-dimensional space and are essential to MATLAB's Handle Graphics, to Computer Added Design packages, to Computer Graphics Imagery in films, and to most popular video games. Many modern computers contain GPUs, <i>Graphic Processing Units<\/i>, which are optimized to compute the product of these matrices.<\/p><!--\/introduction--><h3>Contents<\/h3><div><ul><li><a href=\"#3a6da3e1-6503-4ec5-aab8-a13b4a419218\">Rotations<\/a><\/li><li><a href=\"#c80c5877-8380-4b82-a0b8-3fb8fd146dcf\"><tt>theta<\/tt><\/a><\/li><li><a href=\"#2f2feaa8-2ff1-436c-ba43-62fbf44a95f4\">Compass<\/a><\/li><li><a href=\"#75ba0607-fc08-40cf-b038-e2e9ddf4d2ba\">Roll, Pitch, Yaw<\/a><\/li><li><a href=\"#819e8a6b-9508-4efb-a12a-1b7d57015db2\">Propeller<\/a><\/li><li><a href=\"#ca750655-1342-4eda-bf54-d721058acc24\">Cubelet<\/a><\/li><li><a href=\"#48892ff7-e295-4784-9282-e149dbd41697\">Scramble<\/a><\/li><li><a href=\"#6f09e9ca-8a4e-4df4-a894-3ce2a082d8dc\">Unscramble<\/a><\/li><li><a href=\"#19f99287-c2df-4589-a762-4410ffa64eb9\">Exercises<\/a><\/li><li><a href=\"#fa106610-d1c0-4b93-9ea4-c3ee6136fb40\">Software<\/a><\/li><\/ul><\/div><h4>Rotations<a name=\"3a6da3e1-6503-4ec5-aab8-a13b4a419218\"><\/a><\/h4><p>The <i>homogeneous coordinates<\/i> system used in today's computer graphics software and hardware makes it possible to describe rotations, translations and many other operations with 3-by-3 and 4-by-4 matrices. These matrices operate on vectors with the position of an object, <i>x<\/i>, <i>y<\/i> and <i>z<\/i> , in the first three components.<\/p><p>Rotations about the coordinate axes are described by three matrices. Rotations about the <i>x<\/i> -axis are produced by $R_x$, which rotates <i>y<\/i> and <i>z<\/i>, while leaving <i>x<\/i> unchanged.<\/p><p>$$ R_x(\\theta) = \\left( \\begin{array}{rrr}\r\n  1  &amp;             0  &amp;              0   \\\\\r\n  0  &amp;  \\cos{\\theta}  &amp;  -\\sin{\\theta}   \\\\\r\n  0  &amp;  \\sin{\\theta}  &amp;   \\cos{\\theta}\r\n  \\end{array}  \\right) $$<\/p><p>Rotations about the <i>y<\/i> -axis are generated by<\/p><p>$$ R_y(\\theta) = \\left( \\begin{array}{rrr}\r\n  \\cos{\\theta}  &amp;              0  &amp; -\\sin{\\theta}  \\\\\r\n             0  &amp;              1  &amp;             0  \\\\\r\n  \\sin{\\theta}  &amp;              0  &amp;  \\cos{\\theta}\r\n  \\end{array}  \\right) $$<\/p><p>And, rotations about <i>z<\/i> are provided by<\/p><p>$$ R_z(\\theta) = \\left( \\begin{array}{rrr}\r\n  \\cos{\\theta}  &amp; -\\sin{\\theta}  &amp;  0  \\\\\r\n  \\sin{\\theta}  &amp;  \\cos{\\theta}  &amp;  0  \\\\\r\n             0  &amp;             0  &amp;  1  \\\\\r\n  \\end{array}  \\right) $$<\/p><h4><tt>theta<\/tt><a name=\"c80c5877-8380-4b82-a0b8-3fb8fd146dcf\"><\/a><\/h4><p>Rotation angles are specified in degrees. Our MATLAB programs use the degree-based trig functions <tt>cosd<\/tt> and <tt>sind<\/tt>. Here are graphs of  $\\cos\\theta$  and  $-\\sin\\theta$ ,  evaluated with the angle  $\\theta$  going from <tt>0<\/tt> to <tt>360<\/tt> degrees in <tt>10<\/tt>-degree steps.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/cos_sin.gif\" alt=\"\"> <\/p><h4>Compass<a name=\"2f2feaa8-2ff1-436c-ba43-62fbf44a95f4\"><\/a><\/h4><p>Here is another look at the same data, <tt>cosd(theta)<\/tt> and <tt>-sind(theta)<\/tt> for <tt>theta = 0:10:360<\/tt>. The columns of the rotation matrix are the coordinates of the rotating dots.  The blue dot starts at (0,1) and the orange dot starts at (1,0).<\/p><p>If you drop the  zeros from the values of <tt>theta<\/tt>, you are left with the integers from 1 to 36.  This is the numbering in the international standard describing the  compass direction of runways at airports.  The initial position of our blue dot corresponds to runway 36 and the orange dot starts as runway 9.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/compass.gif\" alt=\"\"> <\/p><h4>Roll, Pitch, Yaw<a name=\"75ba0607-fc08-40cf-b038-e2e9ddf4d2ba\"><\/a><\/h4><p><b>Note: Refresh your browser to synchronize these animations.<\/b><\/p><p>For aircraft and space vehicles, rotation around the <tt>x<\/tt>-axis from nose to tail is known as <i>roll<\/i>.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/roll.gif\" alt=\"\"> <\/p><p>Rotation about the <tt>y<\/tt>-axis parallel to the wings is <i>pitch<\/i>.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/pitch.gif\" alt=\"\"> <\/p><p>And, rotation about the vertical <tt>z<\/tt>-axis is <i>yaw<\/i>.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/yaw.gif\" alt=\"\"> <\/p><h4>Propeller<a name=\"819e8a6b-9508-4efb-a12a-1b7d57015db2\"><\/a><\/h4><p>Our model of the Piper PA-24 Comanche has 97 <i>patches<\/i>. One of them is the propeller. This animation of a rotating propeller is very similar to our earlier animation of the compass.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/propeller.gif\" alt=\"\"> <\/p><h4>Cubelet<a name=\"ca750655-1342-4eda-bf54-d721058acc24\"><\/a><\/h4><p><tt>Qube<\/tt>, our digital Rubik's Cube simulator, uses 27 copies of a  single <i>cubelet<\/i>.  This animation of a rotating cubelet shows a quarter turn clockwise about <tt>x<\/tt>, followed by a quarter turn clockwise about  <tt>y<\/tt> and then a quarter turn counterclockwise about <tt>z<\/tt>. If these three rotations are repeated four times, the  cubelet returns to its initial orientation. In the process, we see the traditional Rubik's colors of all six faces -- white, green and orange opposite yellow, blue and red.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/cubelet.gif\" alt=\"\"> <\/p><h4>Scramble<a name=\"48892ff7-e295-4784-9282-e149dbd41697\"><\/a><\/h4><p><b>Note: Refresh your browser to synchronize these animations.<\/b><\/p><p>Rubick's Cube is all about rotations.  Rotating the cubelets in any face of the puzzle, while leaving the rest of the puzzle fixed, is called a \"move\".  Like any cube, Rubik's cube has six faces. Each move rotates one of the six faces in either a clockwise or counterclockwise direction. So, after <tt>n<\/tt> moves, the puzzle is in one of <tt>12^n<\/tt> possible states.  The challenge is to return the cube to its original orientation.<\/p><p>Here are six random rotations produced by <tt>scramble(6)<\/tt>. Because <tt>12^6<\/tt> is <tt>2,985,984<\/tt>, this is just one of almost three million six-move scrambles.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/scramble.gif\" alt=\"\"> <\/p><h4>Unscramble<a name=\"6f09e9ca-8a4e-4df4-a894-3ce2a082d8dc\"><\/a><\/h4><p>One possible way to restore any starting condition is to retrace the moves that produced it.  This is the \"follow the breadcrumbs\" algorithm. So, I call this <tt>unscramble<\/tt>, rather than <tt>solve<\/tt>.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/unscramble.gif\" alt=\"\"> <\/p><h4>Exercises<a name=\"19f99287-c2df-4589-a762-4410ffa64eb9\"><\/a><\/h4><div><ul><li>1: Which rotation matrices and what values of <tt>theta<\/tt> are used      in the animations?<\/li><\/ul><\/div><div><ul><li>2 (not easy): When is <tt>unscamble<\/tt>  a solution with the      minimum number of moves?<\/li><\/ul><\/div><h4>Software<a name=\"fa106610-d1c0-4b93-9ea4-c3ee6136fb40\"><\/a><\/h4><p>The source code for <tt>Qube<\/tt> is available from this link: <a href=\"https:\/\/blogs.mathworks.com\/cleve\/files\/Qube_May18_osf.m\">Qube_May18_osf.m<\/a>. The <tt>osf<\/tt>, <i>one single file<\/i>,  format is a self-extracting archive that expands into a directory of individual functions.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_fac94086e84b4ca1b5df2dbc8d19f63c() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='fac94086e84b4ca1b5df2dbc8d19f63c ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' fac94086e84b4ca1b5df2dbc8d19f63c';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2022 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_fac94086e84b4ca1b5df2dbc8d19f63c()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2022a<br><\/p><\/div><!--\r\nfac94086e84b4ca1b5df2dbc8d19f63c ##### SOURCE BEGIN #####\r\n%% Rotation Matrices\r\n% The  matrices in the following animations\r\n% are at the heart of computer graphics.\r\n% They describe objects moving in three-dimensional\r\n% space and are essential to MATLAB's Handle Graphics,\r\n% to Computer Added Design packages, \r\n% to Computer Graphics Imagery in films,\r\n% and to most popular video games.\r\n% Many modern computers \r\n% contain GPUs, _Graphic Processing Units_, which are\r\n% optimized to compute the product of these matrices.\r\n\r\n%% Rotations\r\n% The _homogeneous coordinates_ system used in today's \r\n% computer graphics software and hardware\r\n% makes it possible to describe rotations, translations\r\n% and many other operations with 3-by-3 and 4-by-4 matrices.\r\n% These matrices operate on vectors with the position of an object,\r\n% _x_, _y_ and _z_ , in the first three components.\r\n%\r\n% Rotations about the coordinate axes are described by three matrices.\r\n% Rotations about the _x_ -axis are produced by $R_x$, which\r\n% rotates _y_ and _z_, while leaving _x_ unchanged.\r\n%\r\n% $$ R_x(\\theta) = \\left( \\begin{array}{rrr}\r\n%   1  &             0  &              0   \\\\\r\n%   0  &  \\cos{\\theta}  &  -\\sin{\\theta}   \\\\\r\n%   0  &  \\sin{\\theta}  &   \\cos{\\theta}   \r\n%   \\end{array}  \\right) $$\r\n%   \r\n% Rotations about the _y_ -axis are generated by\r\n%\r\n% $$ R_y(\\theta) = \\left( \\begin{array}{rrr}\r\n%   \\cos{\\theta}  &              0  & -\\sin{\\theta}  \\\\\r\n%              0  &              1  &             0  \\\\\r\n%   \\sin{\\theta}  &              0  &  \\cos{\\theta}   \r\n%   \\end{array}  \\right) $$\r\n%\r\n% And, rotations about _z_ are provided by\r\n%\r\n% $$ R_z(\\theta) = \\left( \\begin{array}{rrr}\r\n%   \\cos{\\theta}  & -\\sin{\\theta}  &  0  \\\\\r\n%   \\sin{\\theta}  &  \\cos{\\theta}  &  0  \\\\ \r\n%              0  &             0  &  1  \\\\\r\n%   \\end{array}  \\right) $$\r\n%\r\n\r\n%% |theta|\r\n% Rotation angles are specified in degrees. Our MATLAB programs\r\n% use the degree-based trig functions |cosd| and |sind|.\r\n% Here are graphs of  $\\cos\\theta$  and  $-\\sin\\theta$ ,  evaluated with\r\n% the angle  $\\theta$  going from |0| to |360| degrees\r\n% in |10|-degree steps.\r\n%\r\n% <<cos_sin.gif>>\r\n%\r\n\r\n%% Compass\r\n% Here is another look at the same data, |cosd(theta)| and \r\n% |-sind(theta)| for |theta = 0:10:360|.\r\n% The columns of the rotation matrix are the coordinates of \r\n% the rotating dots.  The blue dot starts at (0,1) and the\r\n% orange dot starts at (1,0).\r\n%\r\n% If you drop the  zeros from the values of |theta|, you are\r\n% left with the integers from 1 to 36.  This is the numbering in the\r\n% international standard describing the  compass direction of runways\r\n% at airports.  The initial position of our blue dot corresponds to \r\n% runway 36 and the orange dot starts as runway 9.\r\n%  \r\n% <<compass.gif>>\r\n%\r\n\r\n%% Roll, Pitch, Yaw\r\n% *Note: Refresh your browser to synchronize these animations.*\r\n%\r\n% For aircraft and space vehicles, rotation around\r\n% the |x|-axis from nose to tail is known as _roll_.\r\n%\r\n% <<roll.gif>>\r\n%\r\n% Rotation about the |y|-axis parallel to the wings is _pitch_.\r\n%\r\n% <<pitch.gif>>\r\n%\r\n% And, rotation about the vertical |z|-axis is _yaw_.\r\n%\r\n% <<yaw.gif>>\r\n%\r\n\r\n%% Propeller\r\n% Our model of the Piper PA-24 Comanche has 97 _patches_.\r\n% One of them is the propeller.\r\n% This animation of a rotating propeller is very similar to our\r\n% earlier animation of the compass.\r\n%\r\n% <<propeller.gif>>\r\n%\r\n\r\n%% Cubelet\r\n% |Qube|, our digital Rubik's Cube simulator, uses 27 copies\r\n% of a  single _cubelet_.  This animation of a rotating cubelet\r\n% shows a quarter turn clockwise about |x|, followed by a quarter \r\n% turn clockwise about  |y| and then a quarter turn counterclockwise \r\n% about |z|. If these three rotations are repeated four times,\r\n% the  cubelet returns to its initial orientation.\r\n% In the process, we see the traditional Rubik's colors of all\r\n% six faces REPLACE_WITH_DASH_DASH white, green and orange opposite yellow, blue and red.\r\n%\r\n% <<cubelet.gif>>\r\n\r\n%% Scramble\r\n% *Note: Refresh your browser to synchronize these animations.*\r\n%\r\n% Rubick's Cube is all about rotations.  Rotating the cubelets in any\r\n% face of the puzzle, while leaving the rest of the puzzle fixed,\r\n% is called a \"move\".  Like any cube, Rubik's cube has six faces.\r\n% Each move rotates one of the six faces in either a clockwise or\r\n% counterclockwise direction. So, after |n| moves, the puzzle is in one\r\n% of |12^n| possible states.  The challenge is to return the cube\r\n% to its original orientation.\r\n%\r\n% Here are six random rotations produced by |scramble(6)|.\r\n% Because |12^6| is |2,985,984|,\r\n% this is just one of almost three million six-move scrambles.\r\n%\r\n% <<scramble.gif>>\r\n%\r\n\r\n%% Unscramble\r\n% One possible way to restore any starting condition is to retrace the\r\n% moves that produced it.  This is the \"follow the breadcrumbs\" algorithm.\r\n% So, I call this |unscramble|, rather than |solve|.\r\n%\r\n% <<unscramble.gif>>\r\n%\r\n\r\n%% Exercises\r\n% * 1: Which rotation matrices and what values of |theta| are used \r\n%      in the animations?\r\n%\r\n% * 2 (not easy): When is |unscamble|  a solution with the\r\n%      minimum number of moves? \r\n\r\n%% Software\r\n% The source code for |Qube| is available from this link:\r\n% <https:\/\/blogs.mathworks.com\/cleve\/files\/Qube_May18_osf.m \r\n% Qube_May18_osf.m>.\r\n% The |osf|, _one single file_,  format is a self-extracting archive\r\n% that expands into a directory of individual functions.\r\n\r\n\r\n##### SOURCE END ##### fac94086e84b4ca1b5df2dbc8d19f63c\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/propeller.gif\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><!--introduction--><p>The  matrices in the following animations are at the heart of computer graphics. They describe objects moving in three-dimensional space and are essential to MATLAB's Handle Graphics, to Computer Added Design packages, to Computer Graphics Imagery in films, and to most popular video games. Many modern computers contain GPUs, <i>Graphic Processing Units<\/i>, which are optimized to compute the product of these matrices.... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/cleve\/2022\/05\/18\/rotation-matrices\/\">read more >><\/a><\/p>","protected":false},"author":78,"featured_media":8711,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,5,23,47,39],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/8651"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/comments?post=8651"}],"version-history":[{"count":7,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/8651\/revisions"}],"predecessor-version":[{"id":8705,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/8651\/revisions\/8705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media\/8711"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media?parent=8651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/categories?post=8651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/tags?post=8651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}