{"id":1985,"date":"2016-09-19T12:00:41","date_gmt":"2016-09-19T17:00:41","guid":{"rendered":"https:\/\/blogs.mathworks.com\/cleve\/?p=1985"},"modified":"2016-09-19T10:26:25","modified_gmt":"2016-09-19T15:26:25","slug":"matrix-multiplication-flexes-house","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/cleve\/2016\/09\/19\/matrix-multiplication-flexes-house\/","title":{"rendered":"Matrix Multiplication Flexes House"},"content":{"rendered":"\r\n<div class=\"content\"><!--introduction--><p>A new app employs transformations of a graphic depicting a house to demonstrate matrix multiplication.<\/p><!--\/introduction--><h3>Contents<\/h3><div><ul><li><a href=\"#67e530de-d259-40e8-af0d-f9c97d68fe9e\">Strang's House<\/a><\/li><li><a href=\"#baae0de8-b4fc-40ff-8807-22ac3c2f19c0\">Rotate and stretch<\/a><\/li><li><a href=\"#8d31ed31-ddb1-4bc4-ac25-fa5f52b91f18\">Matrix multiplication<\/a><\/li><li><a href=\"#ec2283b7-26bf-407a-b73a-f3faca66b7b3\">Code<\/a><\/li><\/ul><\/div><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/house_mult.gif\" alt=\"\"> <\/p><h4>Strang's House<a name=\"67e530de-d259-40e8-af0d-f9c97d68fe9e\"><\/a><\/h4><p>The house in the animated gif has been featured in Gil Strang's textbook, <i>Introduction to Linear Algebra<\/i>.  A quilt inspired by the house in on the <a href=\"https:\/\/www.amazon.com\/Introduction-Linear-Algebra-Gilbert-Strang\/dp\/0961408898\">cover of the third edition<\/a>.<\/p><h4>Rotate and stretch<a name=\"baae0de8-b4fc-40ff-8807-22ac3c2f19c0\"><\/a><\/h4><p>You can rotate the house with your mouse by clicking and dragging the peak of the roof. You can stretch the house horizontally by clicking and dragging either side.  You can stretch the house vertically by dragging the floor.<\/p><h4>Matrix multiplication<a name=\"8d31ed31-ddb1-4bc4-ac25-fa5f52b91f18\"><\/a><\/h4><p>The motion is effected by matrix multiplication. Rotating the roof through an angle $\\theta$ defines a 2-by-2 orthogonal matrix $U$.<\/p><p>$$ U = \\left( \\begin{array}{rr}\r\n  \\cos\\theta \\ \\ \\sin\\theta \\\\\r\n  -\\sin\\theta \\ \\ \\cos\\theta \\\\\r\n  \\end{array} \\right) $$<\/p><p>Moving a side defines a horizontal scaling $\\sigma_1$. Moving the floor defines a vertical scaling $\\sigma_2$. Together they form the diagonal scaling matrix $S$.<\/p><p>$$ S = \\left( \\begin{array}{rr}\r\n  \\sigma_1 \\ \\ 0 \\\\\r\n    0 \\ \\ \\sigma_2 \\\\\r\n  \\end{array} \\right) $$<\/p><p>The resulting 2-by-2 transformation matrix $A$ is the product of $U$ and $S$.<\/p><p>$$A = U S $$<\/p><p>Watch how the three matrices change as you manipulate the house. The scale factor $\\sigma_1$ operates on the first column of $U$, while $\\sigma_2$ scales the second.<\/p><h4>Code<a name=\"ec2283b7-26bf-407a-b73a-f3faca66b7b3\"><\/a><\/h4><p>The code for this app is available <a href=\"https:\/\/blogs.mathworks.com\/images\/cleve\/house_mult.m\">here<\/a>.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_0c0aab8d081a487da1e27f6ec9ae86d8() {\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='0c0aab8d081a487da1e27f6ec9ae86d8 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 0c0aab8d081a487da1e27f6ec9ae86d8';\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 2016 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_0c0aab8d081a487da1e27f6ec9ae86d8()\"><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; R2016a<br><\/p><\/div><!--\r\n0c0aab8d081a487da1e27f6ec9ae86d8 ##### SOURCE BEGIN #####\r\n%% Matrix Multiplication Flexes House\r\n% A new app employs transformations of a graphic depicting a house\r\n% to demonstrate matrix multiplication.\r\n\r\n%%\r\n% <<house_mult.gif>>\r\n\r\n%% Strang's House\r\n% The house in the animated gif has been featured in Gil Strang's textbook,\r\n% _Introduction to Linear Algebra_.  A quilt inspired by the house in on the\r\n% <https:\/\/www.amazon.com\/Introduction-Linear-Algebra-Gilbert-Strang\/dp\/0961408898\r\n% cover of the third edition>.\r\n\r\n%% Rotate and stretch\r\n% You can rotate the house with your mouse by clicking and dragging\r\n% the peak of the roof.\r\n% You can stretch the house horizontally by clicking and dragging either \r\n% side.  You can stretch the house vertically by dragging the floor.\r\n\r\n%% Matrix multiplication\r\n% The motion is effected by matrix multiplication.  \r\n% Rotating the roof through an angle $\\theta$ defines a 2-by-2\r\n% orthogonal matrix $U$.\r\n%\r\n% $$ U = \\left( \\begin{array}{rr}\r\n%   \\cos\\theta \\ \\ \\sin\\theta \\\\\r\n%   -\\sin\\theta \\ \\ \\cos\\theta \\\\\r\n%   \\end{array} \\right) $$\r\n%\r\n% Moving a side defines a horizontal scaling $\\sigma_1$.\r\n% Moving the floor defines a vertical scaling $\\sigma_2$.\r\n% Together they form the diagonal scaling matrix $S$.\r\n%\r\n% $$ S = \\left( \\begin{array}{rr}\r\n%   \\sigma_1 \\ \\ 0 \\\\\r\n%     0 \\ \\ \\sigma_2 \\\\\r\n%   \\end{array} \\right) $$\r\n%\r\n% The resulting 2-by-2 transformation matrix $A$ is\r\n% the product of $U$ and $S$.\r\n%\r\n% $$A = U S $$\r\n%\r\n\r\n%%\r\n% Watch how the three matrices change as you manipulate the house.\r\n% The scale factor $\\sigma_1$ operates on the first column of $U$,\r\n% while $\\sigma_2$ scales the second.\r\n\r\n%% Code\r\n% The code for this app is available\r\n% <https:\/\/blogs.mathworks.com\/images\/cleve\/house_mult.m here>.\r\n\r\n##### SOURCE END ##### 0c0aab8d081a487da1e27f6ec9ae86d8\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/house_mult.gif\" onError=\"this.style.display ='none';\" \/><\/div><!--introduction--><p>A new app employs transformations of a graphic depicting a house to demonstrate matrix multiplication.... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/cleve\/2016\/09\/19\/matrix-multiplication-flexes-house\/\">read more >><\/a><\/p>","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,23,6],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/1985"}],"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=1985"}],"version-history":[{"count":3,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"predecessor-version":[{"id":2000,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/1985\/revisions\/2000"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}