{"id":7704,"date":"2021-11-26T10:00:00","date_gmt":"2021-11-26T15:00:00","guid":{"rendered":"https:\/\/blogs.mathworks.com\/cleve\/?p=7704"},"modified":"2021-11-26T09:21:36","modified_gmt":"2021-11-26T14:21:36","slug":"investigate-the-mathematics-of-computer-graphics","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/cleve\/2021\/11\/26\/investigate-the-mathematics-of-computer-graphics\/","title":{"rendered":"Investigate the Mathematics of Computer Graphics"},"content":{"rendered":"<div class=\"content\"><!--introduction--><p>Matrices in action.<\/p><p>The 4-by-4 matrix in the panel on the following screenshot is at the heart of computer graphics. It describes objects moving in three-dimensional space.  It is essential to MATLAB's Handle Graphics, to CAD (Computer Added Design) packages, to CGI (Computer Graphics Imagery) in  films, and to most popular video games.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/grafix_fig1.png\" alt=\"\"> <\/p><!--\/introduction--><h3>Contents<\/h3><div><ul><li><a href=\"#b356d4a0-1c53-45a1-91d4-82aeea3c8a45\">Rotations<\/a><\/li><li><a href=\"#2be1bdd9-81e9-42a6-b2be-b7aa447dbd77\">Translations<\/a><\/li><li><a href=\"#9d7bbbc8-4e09-4383-9506-e1358c5842b8\">Scalings<\/a><\/li><li><a href=\"#b767cac7-c845-4a7c-9069-eb7dab32c624\">M<\/a><\/li><li><a href=\"#f069d576-2e59-458d-bb2a-e7c65a203635\"><tt>grafix<\/tt><\/a><\/li><li><a href=\"#9e1093ce-fafc-4596-a069-0b4b9efdb00e\">Four Objects<\/a><\/li><li><a href=\"#acc5f64f-e718-48e9-8c2e-75897730ac13\">Four Views<\/a><\/li><li><a href=\"#8f8b5c83-2255-4c09-aa4d-0933d8e17124\">Axis<\/a><\/li><li><a href=\"#90ed40b8-c978-45b0-a393-3286ee2e3655\">Programs<\/a><\/li><li><a href=\"#cb455afe-ee58-442e-8c9a-4a3516c7e0e1\">Software<\/a><\/li><\/ul><\/div><h4>Rotations<a name=\"b356d4a0-1c53-45a1-91d4-82aeea3c8a45\"><\/a><\/h4><p>The <i>homogeneous coordinates<\/i> system used by computer graphics makes it possible to describe rotations, translations and many other operations with 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 and, for now, a one as the fourth component.<\/p><p>Rotations are described by products of these matrices, each of which operates on only two of the first three components of a vector. For example, $R_x$ leaves <i>x<\/i> unchanged while it rotates <i>y<\/i> and <i>z<\/i>.<\/p><p>$$ R_x(\\theta) = \\left[ \\begin{array}{rrrr}\r\n  1  &amp;               0  &amp;                0  &amp;  0 \\\\\r\n  0  &amp;  \\cos{\\theta}  &amp;  -\\sin{\\theta}  &amp;  0 \\\\\r\n  0  &amp;  \\sin{\\theta}  &amp;   \\cos{\\theta}  &amp;  0 \\\\\r\n  0  &amp;               0  &amp;                0  &amp;  1\r\n  \\end{array}  \\right] $$<\/p><p>$$ R_y(\\theta) = \\left[ \\begin{array}{rrrr}\r\n    \\cos{\\theta}  &amp;  0  &amp; -\\sin{\\theta}  &amp;  0 \\\\\r\n                 0  &amp;  1  &amp;               0  &amp;  0 \\\\\r\n    \\sin{\\theta}  &amp;  0  &amp;  \\cos{\\theta}  &amp;  0 \\\\\r\n                 0  &amp;  0  &amp;               0  &amp;  1\r\n  \\end{array}  \\right] $$<\/p><p>$$ R_z(\\theta) = \\left[ \\begin{array}{rrrr}\r\n   \\cos{\\theta}  &amp;  -\\sin{\\theta}  &amp;  0  &amp;  0 \\\\\r\n   \\sin{\\theta}  &amp;   \\cos{\\theta}  &amp;  0  &amp;  0 \\\\\r\n                0  &amp;                0  &amp;  1  &amp;  0 \\\\\r\n                0  &amp;                0  &amp;  0  &amp;  1\r\n  \\end{array}  \\right] $$<\/p><h4>Translations<a name=\"2be1bdd9-81e9-42a6-b2be-b7aa447dbd77\"><\/a><\/h4><p>Translations are described by matrices with values in the fourth column.  For example, multiplying a vector by $T_x$ increments <i>x<\/i>.<\/p><p>$$ T_x(\\delta) = \\left[ \\begin{array}{rrrr}\r\n   1  &amp;  0  &amp;  0  &amp;  \\delta \\\\\r\n   0  &amp;  1  &amp;  0  &amp;         0 \\\\\r\n   0  &amp;  0  &amp;  1  &amp;         0 \\\\\r\n   0  &amp;  0  &amp;  0  &amp;         1\r\n  \\end{array}  \\right] $$<\/p><p>$$ T_y(\\delta) = \\left[ \\begin{array}{rrrr}\r\n   1  &amp;  0  &amp;  0  &amp;         0 \\\\\r\n   0  &amp;  1  &amp;  0  &amp;  \\delta \\\\\r\n   0  &amp;  0  &amp;  1  &amp;         0 \\\\\r\n   0  &amp;  0  &amp;  0  &amp;         1\r\n  \\end{array}  \\right] $$<\/p><p>$$ T_z(\\delta) = \\left[ \\begin{array}{rrrr}\r\n   1  &amp;  0  &amp;  0  &amp;         0 \\\\\r\n   0  &amp;  1  &amp;  0  &amp;         0 \\\\\r\n   0  &amp;  0  &amp;  1  &amp;  \\delta \\\\\r\n   0  &amp;  0  &amp;  0  &amp;         1\r\n  \\end{array}  \\right] $$<\/p><h4>Scalings<a name=\"9d7bbbc8-4e09-4383-9506-e1358c5842b8\"><\/a><\/h4><p>This matrix applies a single scaling factor to all three axes.<\/p><p>$$ S(\\sigma) = \\left[ \\begin{array}{rrrr}\r\n   \\sigma  &amp;  0  &amp;  0    &amp;  0 \\\\\r\n     0 &amp; \\sigma  &amp;  0    &amp;  0 \\\\\r\n     0 &amp;   0  &amp;  \\sigma  &amp;  0 \\\\\r\n     0  &amp;  0  &amp;     0    &amp;  1\r\n  \\end{array}  \\right] $$<\/p><h4>M<a name=\"b767cac7-c845-4a7c-9069-eb7dab32c624\"><\/a><\/h4><p>Our focus is on the matrix shown in the panel; $M$ records the product of all the transformations. The screenshots in this post show the effect of a 45 degree rotation about  the <i>z<\/i> axis, followed by translations along both <i>x<\/i> and <i>y<\/i>, so $M = T_x(1.5) \\, T_y(0.667) \\, R_z(45)$.<\/p><h4><tt>grafix<\/tt><a name=\"f069d576-2e59-458d-bb2a-e7c65a203635\"><\/a><\/h4><p>Our screen shots come from our program <tt>grafix<\/tt>. Three dials apply rotations about the three axes; three sliders apply translations along the three axes; and one slider applies the overall scaling. Angles of rotation are specified in degrees, not radians.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/grafix_fig2.png\" alt=\"\"> <\/p><h4>Four Objects<a name=\"9e1093ce-fafc-4596-a069-0b4b9efdb00e\"><\/a><\/h4><p>Choose one of four objects.<\/p><div><ul><li>Cube.  A cube with three faces colored by the graphics primary colors, red, green and blue, and opposing faces colored by the complementary colors, cyan, magenta and yellow.<\/li><li>Bucky.  At first glance, this looks like a football or soccer ball, but the faces are flat.  Technically, it is a trucated icosahedron. There are twelve blue pentagons and twenty white hexagons. It is the graph of the adjacency matrix of the carbon-60 atom.<\/li><li>Plane.  The Piper 24-250 Comanche was manufactured only between 1958 and 1972, but used models are still for sale on the Web today. Our graphics object has 97 patches and is available in the MATLAB Aerospace Toolbox.<\/li><li>Teapot.  The Utah teapot has been a mainstay of computer graphics since 1975.  See <a href=\"https:\/\/blogs.mathworks.com\/cleve\/2021\/10\/03\/the-matrix-at-the-heart-of-computer-graphics\/\">Utah Teapot<\/a>.<\/li><\/ul><\/div><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/grafix_fig3.png\" alt=\"\"> <\/p><h4>Four Views<a name=\"acc5f64f-e718-48e9-8c2e-75897730ac13\"><\/a><\/h4><p>Choose one of four static, unlit, orthogonal projection views.<\/p><div><ul><li>xy.  The <i>x<\/i> - <i>y<\/i> plane from overhead, the positive <i>z<\/i> axis.<\/li><li>xz. The <i>x<\/i> - <i>z<\/i> plane from the left side, the positive <i>y<\/i> axis.<\/li><li>yz. The <i>y<\/i> - <i>z<\/i> plane from the front, the positive <i>x<\/i> axis.<\/li><li>xyz.  The conventional MATLAB three dimensional view.<\/li><\/ul><\/div><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/grafix_fig4.png\" alt=\"\"> <\/p><h4>Axis<a name=\"8f8b5c83-2255-4c09-aa4d-0933d8e17124\"><\/a><\/h4><p>The origin of the coordinate system is in the center of a box. One face of that box provides the background for each of the 2-D views. The three faces of that box on the opposite of the origin from the viewpoint provide the background for the 3-D view.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"http:\/\/blogs.mathworks.com\/cleve\/files\/grafix_fig5.png\" alt=\"\"> <\/p><h4>Programs<a name=\"90ed40b8-c978-45b0-a393-3286ee2e3655\"><\/a><\/h4><p><tt>grafix<\/tt> is programmable, in a primitive sort of way. A script like this produces an animation terminating with the screen shots above.<\/p><pre>  G = grafix('plane',0);\r\n  for t = 0:0.1:2\r\n      M = T_x(t-0.5) * T_y(0.333*t) * R_z(22.5*t);\r\n      grafix(G,M)\r\n      drawnow\r\n  end<\/pre><h4>Software<a name=\"cb455afe-ee58-442e-8c9a-4a3516c7e0e1\"><\/a><\/h4><p>Version 1.0 of <tt>grafix<\/tt> is available from <a href=\"https:\/\/blogs.mathworks.com\/cleve\/files\/grafix.m\">this link<\/a>. Everything is in a single file that can be distributed easily.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_7c756d0def7941379d87ee73a57bb6d4() {\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='7c756d0def7941379d87ee73a57bb6d4 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 7c756d0def7941379d87ee73a57bb6d4';\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 2021 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_7c756d0def7941379d87ee73a57bb6d4()\"><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; R2021a<br><\/p><\/div><!--\r\n7c756d0def7941379d87ee73a57bb6d4 ##### SOURCE BEGIN #####\r\n%% Investigate the Mathematics of Computer Graphics\r\n% Matrices in action.\r\n%\r\n% The 4-by-4 matrix in the panel on the following screenshot\r\n% is at the heart of computer graphics.\r\n% It describes objects moving in three-dimensional\r\n% space.  It is essential to MATLAB's Handle Graphics,\r\n% to CAD (Computer Added Design) packages, \r\n% to CGI (Computer Graphics Imagery) in  films,\r\n% and to most popular video games.\r\n%\r\n% <<grafix_fig1.png>>\r\n\r\n%% Rotations\r\n% The _homogeneous coordinates_ system used by computer graphics\r\n% makes it possible to describe rotations, translations\r\n% and many other operations with 4-by-4 matrices.  These matrices\r\n% operate on vectors with the position of an object, _x_, _y_ and _z_ ,\r\n% in the first three components and, for now, a one as the\r\n% fourth component.\r\n%\r\n% Rotations are described by products of these matrices,\r\n% each of which operates on only two of the first three components of\r\n% a vector. For example,\r\n% $R_x$ leaves _x_ unchanged while it rotates _y_ and _z_.\r\n%\r\n% $$ R_x(\\theta) = \\left[ \\begin{array}{rrrr}\r\n%   1  &               0  &                0  &  0 \\\\\r\n%   0  &  \\cos{\\theta}  &  -\\sin{\\theta}  &  0 \\\\\r\n%   0  &  \\sin{\\theta}  &   \\cos{\\theta}  &  0 \\\\\r\n%   0  &               0  &                0  &  1 \r\n%   \\end{array}  \\right] $$\r\n%   \r\n%\r\n% $$ R_y(\\theta) = \\left[ \\begin{array}{rrrr}\r\n%     \\cos{\\theta}  &  0  & -\\sin{\\theta}  &  0 \\\\\r\n%                  0  &  1  &               0  &  0 \\\\ \r\n%     \\sin{\\theta}  &  0  &  \\cos{\\theta}  &  0 \\\\\r\n%                  0  &  0  &               0  &  1 \r\n%   \\end{array}  \\right] $$\r\n%   \r\n%\r\n% $$ R_z(\\theta) = \\left[ \\begin{array}{rrrr}\r\n%    \\cos{\\theta}  &  -\\sin{\\theta}  &  0  &  0 \\\\\r\n%    \\sin{\\theta}  &   \\cos{\\theta}  &  0  &  0 \\\\\r\n%                 0  &                0  &  1  &  0 \\\\\r\n%                 0  &                0  &  0  &  1 \r\n%   \\end{array}  \\right] $$\r\n%\r\n\r\n%% Translations\r\n% Translations are described by matrices with values\r\n% in the fourth column.  For example, multiplying a vector\r\n% by $T_x$ increments _x_.\r\n%\r\n% $$ T_x(\\delta) = \\left[ \\begin{array}{rrrr}\r\n%    1  &  0  &  0  &  \\delta \\\\\r\n%    0  &  1  &  0  &         0 \\\\\r\n%    0  &  0  &  1  &         0 \\\\\r\n%    0  &  0  &  0  &         1 \r\n%   \\end{array}  \\right] $$\r\n%\r\n% $$ T_y(\\delta) = \\left[ \\begin{array}{rrrr}\r\n%    1  &  0  &  0  &         0 \\\\\r\n%    0  &  1  &  0  &  \\delta \\\\\r\n%    0  &  0  &  1  &         0 \\\\\r\n%    0  &  0  &  0  &         1 \r\n%   \\end{array}  \\right] $$\r\n%\r\n% $$ T_z(\\delta) = \\left[ \\begin{array}{rrrr}\r\n%    1  &  0  &  0  &         0 \\\\\r\n%    0  &  1  &  0  &         0 \\\\\r\n%    0  &  0  &  1  &  \\delta \\\\\r\n%    0  &  0  &  0  &         1 \r\n%   \\end{array}  \\right] $$\r\n\r\n%% Scalings\r\n% This matrix applies a single scaling factor to all three axes. \r\n%\r\n% $$ S(\\sigma) = \\left[ \\begin{array}{rrrr}\r\n%    \\sigma  &  0  &  0    &  0 \\\\\r\n%      0 & \\sigma  &  0    &  0 \\\\\r\n%      0 &   0  &  \\sigma  &  0 \\\\\r\n%      0  &  0  &     0    &  1 \r\n%   \\end{array}  \\right] $$\r\n\r\n%% M\r\n% Our focus is on the matrix shown in the panel;\r\n% $M$ records the product of all the transformations.\r\n% The screenshots in this post show the effect of a 45 degree \r\n% rotation about  the _z_ axis, followed by translations along\r\n% both _x_ and _y_, so\r\n% $M = T_x(1.5) \\, T_y(0.667) \\, R_z(45)$.\r\n\r\n%% |grafix|\r\n% Our screen shots come from our program |grafix|.\r\n% Three dials apply rotations about the three axes;\r\n% three sliders apply translations along the three axes;\r\n% and one slider applies the overall scaling.\r\n% Angles of rotation are specified in degrees, not radians.\r\n%\r\n% <<grafix_fig2.png>>\r\n\r\n%% Four Objects\r\n% Choose one of four objects.\r\n%\r\n% * Cube.  A cube with three faces colored by the graphics primary colors,\r\n% red, green and blue, and opposing faces colored by the complementary\r\n% colors, cyan, magenta and yellow.\r\n% * Bucky.  At first glance, this looks like a football or soccer ball,\r\n% but the faces are flat.  Technically, it is a trucated icosahedron.\r\n% There are twelve blue pentagons and twenty white\r\n% hexagons. It is the graph of the adjacency matrix of the carbon-60 atom.\r\n% * Plane.  The Piper 24-250 Comanche was manufactured only between\r\n% 1958 and 1972, but used models are still for sale on the Web today.\r\n% Our graphics object has 97 patches and is available in the MATLAB \r\n% Aerospace Toolbox.\r\n% * Teapot.  The Utah teapot has been a mainstay of computer graphics\r\n% since 1975.  See\r\n% <https:\/\/blogs.mathworks.com\/cleve\/2021\/10\/03\/the-matrix-at-the-heart-of-computer-graphics\/\r\n% Utah Teapot>.\r\n%\r\n% <<grafix_fig3.png>>\r\n\r\n%% Four Views\r\n% Choose one of four static, unlit, orthogonal projection views.\r\n%\r\n% * xy.  The _x_ - _y_ plane from overhead, the positive _z_ axis.\r\n% * xz. The _x_ - _z_ plane from the left side, the positive _y_ axis.\r\n% * yz. The _y_ - _z_ plane from the front, the positive _x_ axis.\r\n% * xyz.  The conventional MATLAB three dimensional view.\r\n%\r\n% <<grafix_fig4.png>>\r\n\r\n%% Axis\r\n% The origin of the coordinate system is in the center of a box.\r\n% One face of that box provides the background for each of the 2-D views.\r\n% The three faces of that box on the opposite of the origin from the \r\n% viewpoint provide the background for the 3-D view.\r\n%\r\n% <<grafix_fig5.png>>\r\n\r\n%% Programs\r\n% |grafix| is programmable, in a primitive sort of way.\r\n% A script like this produces an animation terminating\r\n% with the screen shots above.\r\n%\r\n%    G = grafix('plane',0);\r\n%    for t = 0:0.1:2\r\n%        M = T_x(t-0.5) * T_y(0.333*t) * R_z(22.5*t);\r\n%        grafix(G,M)\r\n%        drawnow\r\n%    end\r\n\r\n%% Software\r\n% Version 1.0 of |grafix| is available from\r\n% <https:\/\/blogs.mathworks.com\/cleve\/files\/grafix.m this link>.\r\n% Everything is in a single file that can be distributed easily.\r\n\r\n\r\n\r\n\r\n\r\n##### SOURCE END ##### 7c756d0def7941379d87ee73a57bb6d4\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/teapot_ico.png\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><!--introduction--><p>Matrices in action.... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/cleve\/2021\/11\/26\/investigate-the-mathematics-of-computer-graphics\/\">read more >><\/a><\/p>","protected":false},"author":78,"featured_media":7839,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,5,23,6,37],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/7704"}],"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=7704"}],"version-history":[{"count":13,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/7704\/revisions"}],"predecessor-version":[{"id":7881,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/7704\/revisions\/7881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media\/7839"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media?parent=7704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/categories?post=7704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/tags?post=7704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}