Lucas Kent e39465ad2f Changes to be committed:
new file:   Files/flashplayer_32_sa.exe
	new file:   favicon.ico
	new file:   globe.gif
	new file:   imgs/download.png
	new file:   imgs/zuck.jpg
	new file:   index.html
	new file:   other.ico
	new file:   script.js
	new file:   site.webmanifest
	new file:   sitemap.html
	new file:   styles/backround.css
	new file:   styles/border.css
	new file:   styles/fonts/Titillium_Web/OFL.txt
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf
	new file:   styles/fonts/webfontkit-20221027-163353/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-demo.html
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff2
	new file:   styles/fonts/webfontkit-20221027-165950/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-demo.html
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff2
	new file:   styles/style.css
	new file:   tools/2048/.gitignore
	new file:   tools/2048/.jshintrc
	new file:   tools/2048/CONTRIBUTING.md
	new file:   tools/2048/LICENSE.txt
	new file:   tools/2048/README.md
	new file:   tools/2048/Rakefile
	new file:   tools/2048/favicon.ico
	new file:   tools/2048/index.html
	new file:   tools/2048/js/animframe_polyfill.js
	new file:   tools/2048/js/application.js
	new file:   tools/2048/js/bind_polyfill.js
	new file:   tools/2048/js/classlist_polyfill.js
	new file:   tools/2048/js/game_manager.js
	new file:   tools/2048/js/grid.js
	new file:   tools/2048/js/html_actuator.js
	new file:   tools/2048/js/keyboard_input_manager.js
	new file:   tools/2048/js/local_storage_manager.js
	new file:   tools/2048/js/tile.js
    new file:   tools/2048/meta/apple-touch-icon.png
	new file:   tools/webretro/cores/neocd_libretro.js
	new file:   tools/webretro/cores/neocd_libretro.wasm
	new file:   tools/webretro/cores/nestopia_libretro.js
	new file:   tools/webretro/cores/nestopia_libretro.wasm
	new file:   tools/webretro/cores/o2em_libretro.js
	new file:   tools/webretro/cores/o2em_libretro.wasm
	new file:   tools/webretro/cores/opera_libretro.js
	new file:   tools/webretro/cores/opera_libretro.wasm
2022-11-02 08:40:01 -04:00

601 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en"><!-- #BeginTemplate "/Templates/Advanced.dwt" --><!-- DW6 -->
<!-- Mirrored from www.mathsisfun.com/algebra/matrix-transform.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 01:08:37 GMT -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- #BeginEditable "doctitle" -->
<title>Transformations and Matrices</title>
<meta name="description" content="Math explained in easy language, plus puzzles, games, quizzes, videos and worksheets. For K-12 kids, teachers and parents.">
<style>
.mat, .det {
font: 20px Verdana, Arial, Trebuchet MS, Tahoma, Geneva, Verdana, sans-serif;
color: #f30;
background-image: linear-gradient(#07c, #07c), linear-gradient(#07c, #07c), linear-gradient(#07c, #07c), linear-gradient(#07c, #07c);
background-repeat: no-repeat;
background-size: 7px 2px;
background-position: top left, top right, bottom left, bottom right;
border: solid #07c;
border-width: 0 2px;
display: inline-block;
vertical-align: middle;
padding: 2px 9px 3px 9px;
border-radius: 3px;
}
.det {
background-image: none;
border: none;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0;
}
.cols1, .cols2, .cols3, .cols4 {
display: inline-grid;
grid-template-columns: max-content;
align-content: space-evenly;
grid-gap: 4px 14px;
text-align: center;
vertical-align: middle;
}
.cols1 {
grid-template-columns: max-content;
}
.cols2 {
grid-template-columns: repeat(2, max-content);
}
.cols3 {
grid-template-columns: repeat(3, max-content);
}
.cols4 {
grid-template-columns: repeat(4, max-content);
}
.txt {
display: inline-block;
vertical-align: middle;
padding: 3px 3px;
font: 23px Verdana, Geneva, sans-serif;
color: goldenrod;
text-align: center;
min-width: 25px;
}
</style>
<!-- #EndEditable -->
<meta name="keywords" content="math, maths, mathematics, school, homework, education">
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=true;">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="pics-label" content="(PICS-1.1 &quot;http://www.classify.org/safesurf/&quot; L gen true for &quot;http://www.mathsisfun.com&quot; r (SS~~000 1))">
<meta name="referrer" content="always">
<link rel="stylesheet" type="text/css" href="../style3.css">
<script src="../main3.js" type="text/javascript"></script>
</head>
<body id="bodybg" class="adv">
<div class="bg">
<div id="stt"></div>
<div id="hdr"></div>
<div id="logo"><a href="../index.html"><img src="../images/style/logo.svg" alt="Math is Fun"></a></div>
<div id="advText">Advanced</div>
<div id="gtran">
<script type="text/javascript">document.write(getTrans());</script></div>
<div id="gplus">
<script type="text/javascript">document.write(getGPlus());</script></div>
<div id="adTopOuter" class="centerfull noprint">
<div id="adTop">
<script type="text/javascript">document.write(getAdTop());</script>
</div>
</div>
<div id="adHide">
<div id="showAds1"><a href="javascript:showAds()">Show Ads</a></div>
<div id="hideAds1"><a href="javascript:hideAds()">Hide Ads</a><br>
<a href="../about-ads.html">About Ads</a></div>
</div>
<div id="menuWide" class="menu">
<script type="text/javascript">document.write(getMenu(0));</script>
</div>
<div id="linkto">
<div id="linktort">
<script type="text/javascript">document.write(getLinks());</script></div>
</div>
<div id="search" role="search">
<script type="text/javascript">document.write(getSearch());</script></div>
<div id="menuSlim" class="menu">
<script type="text/javascript">document.write(getMenu(1));</script>
</div>
<div id="menuTiny" class="menu">
<script type="text/javascript">document.write(getMenu(2));</script>
</div>
<div id="extra"></div>
</div>
<div id="content" role="main"><!-- #BeginEditable "Body" -->
<h1 class="center">Transformations and Matrices</h1>
<p>A <a href="matrix-introduction.html">matrix</a> can do geometric transformations!</p>
<p>Have a play with this 2D transformation app:</p>
<script src="images/matrix-transform.js" type="text/javascript"></script>
<script type="text/javascript">matrixtransformMain();</script>
<p>&nbsp;</p>
<p>Matrices can also transform from 3D to 2D (very useful for computer graphics), do 3D transformations and much much more.</p>
<!-- css grid
<div class="matG">
<div>item 1</div>
<div>item 2</div>
<div>3</div>
<div>long item 4</div>
</div>
-->
<h2>The Mathematics</h2>
<p>For each [x,y] point that makes up the shape we do this <a href="matrix-multiplying.html">matrix multiplication</a>:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>ax + by</div>
<div>cx + dy</div>
</div>
</div>
</div>
<!-- [a,b~c,d][x~y] = [ax + by~cx + dy] -->
<!-- [a,b~c,d][x~y] = [ax + by~cx + dy] -->
<p>When the transformation matrix [a,b,c,d] is the <a href="matrix-types.html">Identity Matrix</a> (the matrix equivalent of "1") the [x,y] values are not changed:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>1x + 0y</div>
<div>0x + 1y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
</div>
<!-- [1,0~0,1][x~y] = [1x + 0y~0x + 1y] = [x~y] -->
<!-- [1,0~0,1][x~y] = [1x + 0y~0x + 1y] = [x~y] -->
<p>Changing the "b" value leads to a "shear" transformation (try it above):</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0.8</div>
<div>0</div>
<div>1</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>1x + 0.8y</div>
<div>0x + 1y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>x+0.8y</div>
<div>y</div>
</div>
</div>
<div class="txt"></div>
</div>
<!-- [1,0.8~0,1][x~y] = [1x + 0.8y~0x + 1y] = [x+0.8y~y] -->
<p>And this one will do a diagonal "flip" about the x=y line (try it also):</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>0</div>
<div>1</div>
<div>1</div>
<div>0</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>0x + 1y</div>
<div>1x + 0y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>y</div>
<div>x</div>
</div>
</div>
</div>
<!-- [0,1~1,0][x~y] = [0x + 1y~1x + 0y] = [y~x] -->
<!-- [0,1~1,0][x~y] = [0x + 1y~1x + 0y] = [y~x] -->
<p>What more can you discover? </p>
<h2>Many Transformations at Once</h2>
<p>We can "chain" transformations by <a href="matrix-multiplying.html">multiplying matrices</a>. </p>
<div class="example">
<h3>Example: a diagonal flip followed by a horizontal shear:</h3>
<p>Be careful! The transforms go right-to-left, so it is <b>shear × flip = "flip then shear"</b> </p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0.8</div>
<div>0</div>
<div>1</div>
</div>
</div>
<div class="mat">
<div class="cols2">
<div>0</div>
<div>1</div>
<div>1</div>
<div>0</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols2">
<div>0.8</div>
<div>1</div>
<div>1</div>
<div>0</div>
</div>
</div>
<div class="txt"></div>
</div>
<!-- [1,0.8~0,1][0,1~1,0] = [0.8,1~1,0] -->
<p>And we can then use that result in a transform:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>0.8</div>
<div>1</div>
<div>1</div>
<div>0</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>0.8x+y</div>
<div>x</div>
</div>
</div>
</div>
<!-- [0.8,1~1,0][x~y] = [0.8x+y~x] -->
<p>It does these two transforms in one go:</p>
<p class="center"><img src="images/transform-flip.gif" alt="First transform" height="156" width="160"> <span class="large">then</span> <img src="images/transform-flip-shear.gif" alt="Second transform" height="153" width="220"></p>
</div>
Now what if we <b>change the order</b> of those two transformations?
<div class="example">
<h3>Example: a horizontal shear followed by a diagonal flip:</h3>
<p>Remember the order goes <b>flip × shear = "shear then flip"</b></p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>0</div>
<div>1</div>
<div>1</div>
<div>0</div>
</div>
</div>
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0.8</div>
<div>0</div>
<div>1</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols2">
<div>0</div>
<div>1</div>
<div>1</div>
<div>0.8</div>
</div>
</div>
<div class="txt"></div>
</div>
<!-- [0,1~1,0][1,0.8~0,1] = [0,1~1,0.8] -->
<p>It is a different result!</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>0</div>
<div>1</div>
<div>1</div>
<div>0.8</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>y</div>
<div>x+0.8y</div>
</div>
</div>
</div>
<!-- [0,1~1,0.8][x~y] = [y~x+0.8y] -->
<p>It does these two transforms in one go:</p>
<p class="center"><img src="images/transform-shear.gif" alt="First transform" height="178" width="238"> <span class="large">then</span> <img src="images/transform-shear-flip.gif" alt="Second transform" height="246" width="190"></p>
</div>
<p>This stuff is powerful as we can do LOTS of transforms at once and really speed up calculations. VERY useful for computer graphics.</p>
<p> But we have to be careful what <b>order</b> we do the transforms in!</p>
<p>It also shows us why the <b>order of multiplying matrices</b> is important (unlike ordinary numbers which can be mulitiplied in any order, example 2×3=3×2).</p>
<h2>Transforms In Code</h2>
<p>Need to code this yourself? Here is how.</p>
<p>The letter F is just a list of coordinates:</p>
<pre>[3, 4], [3, 5], [0, 5], [0, 0], [1, 0], [1, 1.8], [2.5, 1.8], [2.5, 2.8], [1, 2.8], [1, 4]</pre>
<p>And we loop through those points, making new points using the 2×2 matrix "a,b,c,d":</p>
<pre> for (let i = 0; i &lt; shape.pts.length; i++) {
let pt = shape.pts[i]
let x = a * pt[0] + b * pt[1]
let y = c * pt[0] + d * pt[1]
newPts.push({ x: x, y: y })
}
</pre>
<p>We then plot the original points and the transformed points so we can see both!</p>
<h2>Rotation</h2>
<p>This matrix does a rotation of <b>θ</b> about the origin (0,0):</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>cos(θ)</div>
<div>sin(θ)</div>
<div>sin(θ)</div>
<div>cos(θ)</div>
</div>
</div>
</div>
<!-- [cos(&theta;),-sin(&theta;)~sin(&theta;),cos(&theta;)] = 0 -->
<div class="example">
<h3>Example: Rotate by 30°</h3>
<p>Calculating to 4 decimal places:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>cos(30°)</div>
<div>sin(30°)</div>
<div>sin(30°)</div>
<div>cos(30°)</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols2">
<div>0.8660</div>
<div>0.5</div>
<div>0.5</div>
<div>0.8660</div>
</div>
</div>
</div>
<!-- [cos(30&deg;),-sin(30&deg;)~sin(30&deg;),cos(30&deg;)] = [0.8660,-0.5~0.5,0.8660] -->
<!-- [cos(&theta;),-sin(&theta;)~sin(&theta;),cos(&theta;)] = 0 -->
<p>Try it in the app at top! </p>
<p>And let's try it on a point here:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>0.8660</div>
<div>0.5</div>
<div>0.5</div>
<div>0.8660</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>3</div>
<div>1</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>0.8660×30.5×1</div>
<div>0.5×3+0.8660×1</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>2.098</div>
<div>2.366</div>
</div>
</div>
<div class="txt"></div>
</div>
<!-- [0.8660,-0.5~0.5,0.8660][3~1] = [0.8660*3-0.5*1~0.5*3+0.8660*1] = [2.098~2.366] -->
<p>And we get this:</p>
<p class="center"><img src="images/matrix-trans-30deg.svg" alt="matrix transform 30deg"></p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="fun">
<h3>Footnote: Swapping Rows and Columns</h3>
<p>Matrices are flexible!</p>
<p>This shear transformation:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0.8</div>
<div>0</div>
<div>1</div>
</div>
</div>
<div class="mat">
<div class="cols1">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>1x + 0.8y</div>
<div>0x + 1y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols1">
<div>x+0.8y</div>
<div>y</div>
</div>
</div>
</div>
<!-- [1,0.8~0,1][x~y] = [1x + 0.8y~0x + 1y] = [x+0.8y~y] -->
<p><i>Can</i> be done like this:</p>
<div style="text-align: center;">
<div class="mat">
<div class="cols2">
<div>x</div>
<div>y</div>
</div>
</div>
<div class="mat">
<div class="cols2">
<div>1</div>
<div>0</div>
<div>0.8</div>
<div>1</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols2">
<div>1x + 0.8y</div>
<div>0x + 1y</div>
</div>
</div>
<div class="txt">=</div>
<div class="mat">
<div class="cols2">
<div>x + 0.8y</div>
<div>y</div>
</div>
</div>
</div>
<!-- [x,y][1,0~0.8,1] = [1x + 0.8y,0x + 1y] = [x + 0.8y,y] -->
<p>The rows and columns are all swapped over (<a href="matrix-types.html">transposed</a>), and the order of multiplication is reversed, but it still works. Just so you know.</p>
</div>
<p>&nbsp;</p>
<div class="questions">
<script>getQ(9289, 9290, 9291, 9292, 9293, 9294, 9295, 9296, 9297, 9298, 15141, 15142, 15143, 15144, 15145, 15146, 17800, 17801, 17802, 17803);</script>
</div>
<div class="related">
<a href="matrix-introduction.html">Introduction to Matrices</a> <a href="matrix-multiplying.html">Matrix Multiplication</a> <a href="matrix-calculator.html">Matrix Calculator</a> <a href="index-2.html">Algebra 2 Index</a>
</div>
<!-- #EndEditable --></div>
<div id="adend" class="centerfull noprint">
<script type="text/javascript">document.write(getAdEnd());</script>
</div>
<div id="footer" class="centerfull noprint">
<script type="text/javascript">document.write(getFooter());</script>
</div>
<div id="copyrt">
Copyright © 2018 MathsIsFun.com
</div>
<script type="text/javascript">document.write(getBodyEnd());</script>
</body><!-- #EndTemplate -->
<!-- Mirrored from www.mathsisfun.com/algebra/matrix-transform.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 01:08:38 GMT -->
</html>