math.html 90 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="generator" content="Asciidoctor 1.5.4">
  8. <title>Introduction to Mathematical Functionality</title>
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
  10. <style>
  11. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  12. /* Remove comment around @import statement below when using as a custom stylesheet */
  13. /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
  14. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  15. audio,canvas,video{display:inline-block}
  16. audio:not([controls]){display:none;height:0}
  17. [hidden],template{display:none}
  18. script{display:none!important}
  19. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  20. body{margin:0}
  21. a{background:transparent}
  22. a:focus{outline:thin dotted}
  23. a:active,a:hover{outline:0}
  24. h1{font-size:2em;margin:.67em 0}
  25. abbr[title]{border-bottom:1px dotted}
  26. b,strong{font-weight:bold}
  27. dfn{font-style:italic}
  28. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  29. mark{background:#ff0;color:#000}
  30. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  31. pre{white-space:pre-wrap}
  32. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  33. small{font-size:80%}
  34. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  35. sup{top:-.5em}
  36. sub{bottom:-.25em}
  37. img{border:0}
  38. svg:not(:root){overflow:hidden}
  39. figure{margin:0}
  40. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  41. legend{border:0;padding:0}
  42. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  43. button,input{line-height:normal}
  44. button,select{text-transform:none}
  45. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  46. button[disabled],html input[disabled]{cursor:default}
  47. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  48. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  49. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  50. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  51. textarea{overflow:auto;vertical-align:top}
  52. table{border-collapse:collapse;border-spacing:0}
  53. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  54. html,body{font-size:100%}
  55. body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
  56. a:hover{cursor:pointer}
  57. img,object,embed{max-width:100%;height:auto}
  58. object,embed{height:100%}
  59. img{-ms-interpolation-mode:bicubic}
  60. .left{float:left!important}
  61. .right{float:right!important}
  62. .text-left{text-align:left!important}
  63. .text-right{text-align:right!important}
  64. .text-center{text-align:center!important}
  65. .text-justify{text-align:justify!important}
  66. .hide{display:none}
  67. body{-webkit-font-smoothing:antialiased}
  68. img,object,svg{display:inline-block;vertical-align:middle}
  69. textarea{height:auto;min-height:50px}
  70. select{width:100%}
  71. .center{margin-left:auto;margin-right:auto}
  72. .spread{width:100%}
  73. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  74. .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
  75. div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
  76. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  77. a:hover,a:focus{color:#1d4b8f}
  78. a img{border:none}
  79. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  80. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  81. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
  82. h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
  83. h1{font-size:2.125em}
  84. h2{font-size:1.6875em}
  85. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  86. h4,h5{font-size:1.125em}
  87. h6{font-size:1em}
  88. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  89. em,i{font-style:italic;line-height:inherit}
  90. strong,b{font-weight:bold;line-height:inherit}
  91. small{font-size:60%;line-height:inherit}
  92. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  93. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  94. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  95. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  96. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  97. ul.square{list-style-type:square}
  98. ul.circle{list-style-type:circle}
  99. ul.disc{list-style-type:disc}
  100. ul.no-bullet{list-style:none}
  101. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  102. dl dt{margin-bottom:.3125em;font-weight:bold}
  103. dl dd{margin-bottom:1.25em}
  104. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  105. abbr{text-transform:none}
  106. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  107. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  108. blockquote cite:before{content:"\2014 \0020"}
  109. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  110. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  111. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  112. h1{font-size:2.75em}
  113. h2{font-size:2.3125em}
  114. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  115. h4{font-size:1.4375em}}
  116. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  117. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  118. table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
  119. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  120. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  121. table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
  122. body{tab-size:4}
  123. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  124. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  125. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  126. .clearfix:after,.float-group:after{clear:both}
  127. *:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
  128. pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
  129. .keyseq{color:rgba(51,51,51,.8)}
  130. kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
  131. .keyseq kbd:first-child{margin-left:0}
  132. .keyseq kbd:last-child{margin-right:0}
  133. .menuseq,.menu{color:rgba(0,0,0,.8)}
  134. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  135. b.button:before{content:"[";padding:0 3px 0 2px}
  136. b.button:after{content:"]";padding:0 2px 0 3px}
  137. p a>code:hover{color:rgba(0,0,0,.9)}
  138. #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
  139. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  140. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  141. #content{margin-top:1.25em}
  142. #content:before{content:none}
  143. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  144. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  145. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  146. #header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
  147. #header .details span:first-child{margin-left:-.125em}
  148. #header .details span.email a{color:rgba(0,0,0,.85)}
  149. #header .details br{display:none}
  150. #header .details br+span:before{content:"\00a0\2013\00a0"}
  151. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  152. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  153. #header #revnumber{text-transform:capitalize}
  154. #header #revnumber:after{content:"\00a0"}
  155. #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
  156. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  157. #toc>ul{margin-left:.125em}
  158. #toc ul.sectlevel0>li>a{font-style:italic}
  159. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  160. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  161. #toc li{line-height:1.3334;margin-top:.3334em}
  162. #toc a{text-decoration:none}
  163. #toc a:active{text-decoration:underline}
  164. #toctitle{color:#7a2518;font-size:1.2em}
  165. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  166. body.toc2{padding-left:15em;padding-right:0}
  167. #toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
  168. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  169. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  170. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  171. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  172. body.toc2.toc-right{padding-left:0;padding-right:15em}
  173. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  174. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  175. #toc.toc2{width:20em}
  176. #toc.toc2 #toctitle{font-size:1.375em}
  177. #toc.toc2>ul{font-size:.95em}
  178. #toc.toc2 ul ul{padding-left:1.25em}
  179. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  180. #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  181. #content #toc>:first-child{margin-top:0}
  182. #content #toc>:last-child{margin-bottom:0}
  183. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  184. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  185. .sect1{padding-bottom:.625em}
  186. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  187. .sect1+.sect1{border-top:1px solid #efefed}
  188. #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
  189. #content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
  190. #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
  191. #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
  192. #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
  193. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  194. .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
  195. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  196. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  197. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  198. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  199. .admonitionblock>table td.icon{text-align:center;width:80px}
  200. .admonitionblock>table td.icon img{max-width:none}
  201. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  202. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  203. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  204. .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
  205. .exampleblock>.content>:first-child{margin-top:0}
  206. .exampleblock>.content>:last-child{margin-bottom:0}
  207. .sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  208. .sidebarblock>:first-child{margin-top:0}
  209. .sidebarblock>:last-child{margin-bottom:0}
  210. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  211. .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
  212. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  213. .sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
  214. .literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
  215. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  216. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  217. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  218. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  219. .listingblock pre.highlightjs{padding:0}
  220. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  221. .listingblock pre.prettyprint{border-width:0}
  222. .listingblock>.content{position:relative}
  223. .listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
  224. .listingblock:hover code[data-lang]:before{display:block}
  225. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  226. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  227. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  228. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  229. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  230. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  231. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  232. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  233. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  234. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  235. .quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
  236. .quoteblock blockquote{margin:0;padding:0;border:0}
  237. .quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  238. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  239. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  240. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  241. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  242. .quoteblock .quoteblock blockquote:before{display:none}
  243. .verseblock{margin:0 1em 1.25em 1em}
  244. .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
  245. .verseblock pre strong{font-weight:400}
  246. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  247. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  248. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  249. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  250. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  251. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  252. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  253. table.tableblock{max-width:100%;border-collapse:separate}
  254. table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
  255. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  256. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  257. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  258. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  259. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  260. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  261. table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
  262. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  263. table.frame-all{border-width:1px}
  264. table.frame-sides{border-width:0 1px}
  265. table.frame-topbot{border-width:1px 0}
  266. th.halign-left,td.halign-left{text-align:left}
  267. th.halign-right,td.halign-right{text-align:right}
  268. th.halign-center,td.halign-center{text-align:center}
  269. th.valign-top,td.valign-top{vertical-align:top}
  270. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  271. th.valign-middle,td.valign-middle{vertical-align:middle}
  272. table thead th,table tfoot th{font-weight:bold}
  273. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  274. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  275. p.tableblock>code:only-child{background:none;padding:0}
  276. p.tableblock{font-size:1em}
  277. td>div.verse{white-space:pre}
  278. ol{margin-left:1.75em}
  279. ul li ol{margin-left:1.5em}
  280. dl dd{margin-left:1.125em}
  281. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  282. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  283. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  284. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  285. ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
  286. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  287. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  288. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  289. ul.inline>li>*{display:block}
  290. .unstyled dl dt{font-weight:400;font-style:normal}
  291. ol.arabic{list-style-type:decimal}
  292. ol.decimal{list-style-type:decimal-leading-zero}
  293. ol.loweralpha{list-style-type:lower-alpha}
  294. ol.upperalpha{list-style-type:upper-alpha}
  295. ol.lowerroman{list-style-type:lower-roman}
  296. ol.upperroman{list-style-type:upper-roman}
  297. ol.lowergreek{list-style-type:lower-greek}
  298. .hdlist>table,.colist>table{border:0;background:none}
  299. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  300. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  301. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  302. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  303. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  304. .colist>table tr>td:last-of-type{padding:.25em 0}
  305. .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
  306. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  307. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  308. .imageblock>.title{margin-bottom:0}
  309. .imageblock.thumb,.imageblock.th{border-width:6px}
  310. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  311. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  312. .image.left{margin-right:.625em}
  313. .image.right{margin-left:.625em}
  314. a.image{text-decoration:none;display:inline-block}
  315. a.image object{pointer-events:none}
  316. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  317. sup.footnote a,sup.footnoteref a{text-decoration:none}
  318. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  319. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  320. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  321. #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
  322. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  323. #footnotes .footnote:last-of-type{margin-bottom:0}
  324. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  325. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  326. .gist .file-data>table td.line-data{width:99%}
  327. div.unbreakable{page-break-inside:avoid}
  328. .big{font-size:larger}
  329. .small{font-size:smaller}
  330. .underline{text-decoration:underline}
  331. .overline{text-decoration:overline}
  332. .line-through{text-decoration:line-through}
  333. .aqua{color:#00bfbf}
  334. .aqua-background{background-color:#00fafa}
  335. .black{color:#000}
  336. .black-background{background-color:#000}
  337. .blue{color:#0000bf}
  338. .blue-background{background-color:#0000fa}
  339. .fuchsia{color:#bf00bf}
  340. .fuchsia-background{background-color:#fa00fa}
  341. .gray{color:#606060}
  342. .gray-background{background-color:#7d7d7d}
  343. .green{color:#006000}
  344. .green-background{background-color:#007d00}
  345. .lime{color:#00bf00}
  346. .lime-background{background-color:#00fa00}
  347. .maroon{color:#600000}
  348. .maroon-background{background-color:#7d0000}
  349. .navy{color:#000060}
  350. .navy-background{background-color:#00007d}
  351. .olive{color:#606000}
  352. .olive-background{background-color:#7d7d00}
  353. .purple{color:#600060}
  354. .purple-background{background-color:#7d007d}
  355. .red{color:#bf0000}
  356. .red-background{background-color:#fa0000}
  357. .silver{color:#909090}
  358. .silver-background{background-color:#bcbcbc}
  359. .teal{color:#006060}
  360. .teal-background{background-color:#007d7d}
  361. .white{color:#bfbfbf}
  362. .white-background{background-color:#fafafa}
  363. .yellow{color:#bfbf00}
  364. .yellow-background{background-color:#fafa00}
  365. span.icon>.fa{cursor:default}
  366. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  367. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  368. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  369. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  370. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  371. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  372. .conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
  373. .conum[data-value] *{color:#fff!important}
  374. .conum[data-value]+b{display:none}
  375. .conum[data-value]:after{content:attr(data-value)}
  376. pre .conum[data-value]{position:relative;top:-.125em}
  377. b.conum *{color:inherit!important}
  378. .conum:not([data-value]):empty{display:none}
  379. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  380. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  381. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  382. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  383. p{margin-bottom:1.25rem}
  384. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  385. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  386. .print-only{display:none!important}
  387. @media print{@page{margin:1.25cm .75cm}
  388. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  389. a{color:inherit!important;text-decoration:underline!important}
  390. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  391. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  392. abbr[title]:after{content:" (" attr(title) ")"}
  393. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  394. thead{display:table-header-group}
  395. svg{max-width:100%}
  396. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  397. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  398. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  399. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  400. .sect1{padding-bottom:0!important}
  401. .sect1+.sect1{border:0!important}
  402. #header>h1:first-child{margin-top:1.25rem}
  403. body.book #header{text-align:center}
  404. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  405. body.book #header .details{border:0!important;display:block;padding:0!important}
  406. body.book #header .details span:first-child{margin-left:0!important}
  407. body.book #header .details br{display:block}
  408. body.book #header .details br+span:before{content:none!important}
  409. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  410. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  411. .listingblock code[data-lang]:before{display:block}
  412. #footer{background:none!important;padding:0 .9375em}
  413. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  414. .hide-on-print{display:none!important}
  415. .print-only{display:block!important}
  416. .hide-for-print{display:none!important}
  417. .show-for-print{display:inherit!important}}
  418. </style>
  419. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  420. <style>
  421. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  422. /*pre.CodeRay {background-color:#f7f7f8;}*/
  423. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  424. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  425. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  426. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  427. table.CodeRay td{vertical-align: top;line-height:1.45}
  428. table.CodeRay td.line-numbers{text-align:right}
  429. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  430. table.CodeRay td.code{padding:0 0 0 .5em}
  431. table.CodeRay td.code>pre{padding:0}
  432. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  433. .CodeRay .annotation{color:#007}
  434. .CodeRay .attribute-name{color:#000080}
  435. .CodeRay .attribute-value{color:#700}
  436. .CodeRay .binary{color:#509}
  437. .CodeRay .comment{color:#998;font-style:italic}
  438. .CodeRay .char{color:#04d}
  439. .CodeRay .char .content{color:#04d}
  440. .CodeRay .char .delimiter{color:#039}
  441. .CodeRay .class{color:#458;font-weight:bold}
  442. .CodeRay .complex{color:#a08}
  443. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  444. .CodeRay .color{color:#099}
  445. .CodeRay .class-variable{color:#369}
  446. .CodeRay .decorator{color:#b0b}
  447. .CodeRay .definition{color:#099}
  448. .CodeRay .delimiter{color:#000}
  449. .CodeRay .doc{color:#970}
  450. .CodeRay .doctype{color:#34b}
  451. .CodeRay .doc-string{color:#d42}
  452. .CodeRay .escape{color:#666}
  453. .CodeRay .entity{color:#800}
  454. .CodeRay .error{color:#808}
  455. .CodeRay .exception{color:inherit}
  456. .CodeRay .filename{color:#099}
  457. .CodeRay .function{color:#900;font-weight:bold}
  458. .CodeRay .global-variable{color:#008080}
  459. .CodeRay .hex{color:#058}
  460. .CodeRay .integer,.CodeRay .float{color:#099}
  461. .CodeRay .include{color:#555}
  462. .CodeRay .inline{color:#000}
  463. .CodeRay .inline .inline{background:#ccc}
  464. .CodeRay .inline .inline .inline{background:#bbb}
  465. .CodeRay .inline .inline-delimiter{color:#d14}
  466. .CodeRay .inline-delimiter{color:#d14}
  467. .CodeRay .important{color:#555;font-weight:bold}
  468. .CodeRay .interpreted{color:#b2b}
  469. .CodeRay .instance-variable{color:#008080}
  470. .CodeRay .label{color:#970}
  471. .CodeRay .local-variable{color:#963}
  472. .CodeRay .octal{color:#40e}
  473. .CodeRay .predefined{color:#369}
  474. .CodeRay .preprocessor{color:#579}
  475. .CodeRay .pseudo-class{color:#555}
  476. .CodeRay .directive{font-weight:bold}
  477. .CodeRay .type{font-weight:bold}
  478. .CodeRay .predefined-type{color:inherit}
  479. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  480. .CodeRay .key{color:#808}
  481. .CodeRay .key .delimiter{color:#606}
  482. .CodeRay .key .char{color:#80f}
  483. .CodeRay .value{color:#088}
  484. .CodeRay .regexp .delimiter{color:#808}
  485. .CodeRay .regexp .content{color:#808}
  486. .CodeRay .regexp .modifier{color:#808}
  487. .CodeRay .regexp .char{color:#d14}
  488. .CodeRay .regexp .function{color:#404;font-weight:bold}
  489. .CodeRay .string{color:#d20}
  490. .CodeRay .string .string .string{background:#ffd0d0}
  491. .CodeRay .string .content{color:#d14}
  492. .CodeRay .string .char{color:#d14}
  493. .CodeRay .string .delimiter{color:#d14}
  494. .CodeRay .shell{color:#d14}
  495. .CodeRay .shell .delimiter{color:#d14}
  496. .CodeRay .symbol{color:#990073}
  497. .CodeRay .symbol .content{color:#a60}
  498. .CodeRay .symbol .delimiter{color:#630}
  499. .CodeRay .tag{color:#008080}
  500. .CodeRay .tag-special{color:#d70}
  501. .CodeRay .variable{color:#036}
  502. .CodeRay .insert{background:#afa}
  503. .CodeRay .delete{background:#faa}
  504. .CodeRay .change{color:#aaf;background:#007}
  505. .CodeRay .head{color:#f8f;background:#505}
  506. .CodeRay .insert .insert{color:#080}
  507. .CodeRay .delete .delete{color:#800}
  508. .CodeRay .change .change{color:#66f}
  509. .CodeRay .head .head{color:#f4f}
  510. </style>
  511. </head>
  512. <body class="article toc2 toc-left">
  513. <div id="header">
  514. <h1>Introduction to Mathematical Functionality</h1>
  515. <div id="toc" class="toc2">
  516. <div id="toctitle">Table of Contents</div>
  517. <ul class="sectlevel1">
  518. <li><a href="#coordinate-system">Coordinate System</a>
  519. <ul class="sectlevel2">
  520. <li><a href="#definition">Definition</a></li>
  521. <li><a href="#homogenous-coordinates">Homogenous coordinates</a></li>
  522. </ul>
  523. </li>
  524. <li><a href="#transformations">Transformations</a></li>
  525. <li><a href="#visibility-determination">Visibility Determination</a></li>
  526. <li><a href="#fundamental-types">Fundamental Types</a>
  527. <ul class="sectlevel1">
  528. <li><a href="#colorrgba">ColorRGBA</a>
  529. <ul class="sectlevel2">
  530. <li><a href="#definition-2">Definition</a></li>
  531. <li><a href="#jme-class">jME Class</a></li>
  532. </ul>
  533. </li>
  534. <li><a href="#matrix">Matrix</a>
  535. <ul class="sectlevel2">
  536. <li><a href="#definition-3">Definition</a></li>
  537. <li><a href="#transformations-2">Transformations</a></li>
  538. <li><a href="#jme-class-2">jME Class</a></li>
  539. </ul>
  540. </li>
  541. <li><a href="#vector">Vector</a>
  542. <ul class="sectlevel2">
  543. <li><a href="#definition-4">Definition</a></li>
  544. <li><a href="#operations">Operations</a></li>
  545. </ul>
  546. </li>
  547. <li><a href="#quaternion">Quaternion</a>
  548. <ul class="sectlevel2">
  549. <li><a href="#definition-5">Definition</a></li>
  550. <li><a href="#angle-axis">Angle Axis</a></li>
  551. <li><a href="#three-angles">Three Angles</a></li>
  552. <li><a href="#three-axes">Three Axes</a></li>
  553. <li><a href="#rotation-matrix">Rotation Matrix</a></li>
  554. <li><a href="#slerp">Slerp</a></li>
  555. <li><a href="#multiplication">Multiplication</a></li>
  556. </ul>
  557. </li>
  558. </ul>
  559. </li>
  560. <li><a href="#utility-classes">Utility Classes</a>
  561. <ul class="sectlevel1">
  562. <li><a href="#fast-math">Fast Math</a>
  563. <ul class="sectlevel2">
  564. <li><a href="#definition-6">Definition</a></li>
  565. <li><a href="#usage">Usage</a></li>
  566. </ul>
  567. </li>
  568. <li><a href="#line">Line</a>
  569. <ul class="sectlevel2">
  570. <li><a href="#definition-7">Definition</a></li>
  571. <li><a href="#usage-2">Usage</a></li>
  572. <li><a href="#example-1-find-a-random-point-on-a-line">Example 1 - Find a Random Point on a Line</a></li>
  573. </ul>
  574. </li>
  575. <li><a href="#plane">Plane</a>
  576. <ul class="sectlevel2">
  577. <li><a href="#definition-8">Definition</a></li>
  578. <li><a href="#usage-in-jme">Usage in jME</a></li>
  579. <li><a href="#example-1-determining-if-a-point-is-on-the-positive-side-of-a-plane">Example 1 - Determining if a Point is On the Positive Side of a Plane</a></li>
  580. <li><a href="#example-2-for-the-layperson">Example 2 - For the Layperson</a></li>
  581. </ul>
  582. </li>
  583. <li><a href="#ray">Ray</a>
  584. <ul class="sectlevel2">
  585. <li><a href="#definition-9">Definition</a></li>
  586. <li><a href="#example-1-create-a-ray-that-represents-where-the-camera-is-looking">Example 1 - Create a Ray That Represents Where the Camera is Looking</a></li>
  587. </ul>
  588. </li>
  589. <li><a href="#rectangle">Rectangle</a>
  590. <ul class="sectlevel2">
  591. <li><a href="#definition-10">Definition</a></li>
  592. <li><a href="#jme-usage">jME Usage</a></li>
  593. <li><a href="#example-1-define-a-rectangle-and-get-a-point-from-it">Example 1 : Define a Rectangle and Get a Point From It</a></li>
  594. </ul>
  595. </li>
  596. <li><a href="#triangle">Triangle</a>
  597. <ul class="sectlevel2">
  598. <li><a href="#definition-11">Definition</a></li>
  599. <li><a href="#usage-3">Usage</a></li>
  600. <li><a href="#example-1-creating-a-triangle">Example 1 - Creating a Triangle</a></li>
  601. </ul>
  602. </li>
  603. </ul>
  604. </li>
  605. <li><a href="#tips-and-tricks">Tips and Tricks</a>
  606. <ul class="sectlevel1">
  607. <li><a href="#how-do-i-get-height-width-of-a-spatial">How do I get height/width of a spatial?</a></li>
  608. <li><a href="#how-do-i-position-the-center-of-a-geomtry">How do I position the center of a Geomtry?</a>
  609. <ul class="sectlevel2">
  610. <li><a href="#see-also">See Also</a></li>
  611. </ul>
  612. </li>
  613. </ul>
  614. </li>
  615. </ul>
  616. </div>
  617. </div>
  618. <div id="content">
  619. <div id="preamble">
  620. <div class="sectionbody">
  621. <div class="paragraph">
  622. <p>It&#8217;s a fact of life, math is hard. Unfortunately, 3D graphics require a fair bit of knowledge about the subject. Fortunately, jME is able to hide the majority of the details away from the user. Vectors are the fundamental type in the 3D environment, and it is used extensively. Matrices are also a basic necessity of 3D for representing linear systems. <a href="quaternion.html">Quaternion</a>s are perhaps the most powerful and complicated of the basic types and are used for rotation in jME.</p>
  623. </div>
  624. <div class="paragraph">
  625. <p>I&#8217;ll discuss how these are used in the system for the core functionality. Including Transforming, Visibility Determination, Collision Detection, and the Coordinate System. Note, that these are low level details. Further chapters will discuss how to use these various systems from a high level perspective.</p>
  626. </div>
  627. <div class="paragraph">
  628. <p>To get a visual introduction to math in jME3 for the absolute beginner, check out our <a href="math_for_dummies.html">Math for Dummies</a> introduction class.</p>
  629. </div>
  630. </div>
  631. </div>
  632. <div class="sect1">
  633. <h2 id="coordinate-system">Coordinate System</h2>
  634. <div class="sectionbody">
  635. <div class="sect2">
  636. <h3 id="definition">Definition</h3>
  637. <div class="paragraph">
  638. <p>A <em>coordinate system</em> consists of an origin (single point in space) and three coordinate axes that are each unit length and mutually perpendicular. The axes can be written as the column of a Matrix, R = [U1|U2|U3]. In fact, this is exactly how CameraNode works. The coordinate system defined by Camera is stored in a Matrix.</p>
  639. </div>
  640. <div class="paragraph">
  641. <p>jME uses a Right-Handed coordinate system (as OpenGL does).</p>
  642. </div>
  643. <div class="paragraph">
  644. <p>The definition of a coordinate system is defined in jME by the properties sent to Camera. There are no error checks to insure that: 1) the coordinate system is right-handed and 2) The axes are mutually perpendicular. Therefore, if the user sets the axes incorrectly, they are going to experience very odd rendering artifacts (random culling, etc).</p>
  645. </div>
  646. <div class="imageblock" style="text-align: center">
  647. <div class="content">
  648. <img src="images/jme3/intermediate/coordinate-system.png" alt="coordinate-system.png" height="210">
  649. </div>
  650. </div>
  651. </div>
  652. <div class="sect2">
  653. <h3 id="homogenous-coordinates">Homogenous coordinates</h3>
  654. <div class="paragraph">
  655. <p>Homogenous coordinates have an additional <em>W</em> value tacked on to the end. The XYZ values are to be divided by W to give the true coordinates.</p>
  656. </div>
  657. <div class="paragraph">
  658. <p>This has several advantages, one technical, some relevant to application programmers:</p>
  659. </div>
  660. <div class="paragraph">
  661. <p>Technically, it simplifies some formulae used inside the vector math. For example, some operations need to apply the same factor to the XYZ coordinates. Chain multiple operations of that kind (and vector math tends to do that), and you can save a lot of multiplications by simply keeping the scaling factor around and doing the multiplication to XYZ at the end of the pipeline, in the 3D card (which does accept homogenous coordinates).
  662. It also simplifies some formulae, in particular anything that is related to rotations.</p>
  663. </div>
  664. <div class="paragraph">
  665. <p>For application programmers, this means you can express infinitely long vectors that still have a direction - these tend to be used in lighting. Just use a W value of 0.0.</p>
  666. </div>
  667. </div>
  668. </div>
  669. </div>
  670. <div class="sect1">
  671. <h2 id="transformations">Transformations</h2>
  672. <div class="sectionbody">
  673. <div class="paragraph">
  674. <p>Transformations define an operation that converts points from one coordinate system to another. This includes translation, rotation and scaling. In jME, local transforms are used to represent the positioning of objects relative to a parent coordinate system. While, world transforms are used to represent the positioning of objects in a global coordinate system.</p>
  675. </div>
  676. </div>
  677. </div>
  678. <div class="sect1">
  679. <h2 id="visibility-determination">Visibility Determination</h2>
  680. <div class="sectionbody">
  681. <div class="paragraph">
  682. <p>Visibility Determination concerns itself with minimizing the amount of data that is sent to the graphics card for rendering. Specifically, we do not want to send data that will not be seen. Data not sent to the graphics card is said to be culled. The primary focus of this section is Frustum Culling based on the Camera&#8217;s view frustum. In essence, this frustum creates six standard view planes. The BoundingVolume of an object is tested against the frustum planes to determine if it is contained in the frustum. If at any point the object&#8217;s bounding is outside of the plane, it is tossed out and no longer processed for rendering. This also includes any children that it managed, allowing fast culling of large sections of the scene.</p>
  683. </div>
  684. </div>
  685. </div>
  686. <h1 id="fundamental-types" class="sect0">Fundamental Types</h1>
  687. <div class="sect1">
  688. <h2 id="colorrgba">ColorRGBA</h2>
  689. <div class="sectionbody">
  690. <div class="sect2">
  691. <h3 id="definition-2">Definition</h3>
  692. <div class="paragraph">
  693. <p>ColorRGBA defines a color value in the jME library. The color value is made of three components, red, green and blue. A fourth component defines the alpha value (transparent) of the color. Every value is set between [0, 1]. Anything less than 0 will be clamped to 0 and anything greater than 1 will be clamped to 1.</p>
  694. </div>
  695. <div class="paragraph">
  696. <p><strong>Note:</strong> If you would like to “convert an ordinary RGB value (0-255) to the format used here (0-1), simply multiply it with: 1/255.</p>
  697. </div>
  698. </div>
  699. <div class="sect2">
  700. <h3 id="jme-class">jME Class</h3>
  701. <div class="paragraph">
  702. <p>ColorRGBA defines a few static color values for ease of use. That is, rather than:</p>
  703. </div>
  704. <div class="listingblock">
  705. <div class="content">
  706. <pre class="CodeRay highlight"><code data-lang="java">ColorRGBA red = <span class="keyword">new</span> ColorRGBA(<span class="integer">1</span>,<span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>);
  707. object.setSomeColor(red);</code></pre>
  708. </div>
  709. </div>
  710. <div class="paragraph">
  711. <p>you can simply say:</p>
  712. </div>
  713. <div class="listingblock">
  714. <div class="content">
  715. <pre class="CodeRay highlight"><code data-lang="java">object.setSomeColor(ColorRGBA.red)</code></pre>
  716. </div>
  717. </div>
  718. <div class="paragraph">
  719. <p>ColorRGBA will also handle interpolation between two colors. Given a second color and a value between 0 and 1, a the owning ColorRGBA object will have its color values altered to this new interpolated color.</p>
  720. </div>
  721. </div>
  722. </div>
  723. </div>
  724. <div class="sect1">
  725. <h2 id="matrix">Matrix</h2>
  726. <div class="sectionbody">
  727. <div class="paragraph">
  728. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Matrix3f.html">Matrix3f Javadoc</a>+</p>
  729. </div>
  730. <div class="paragraph">
  731. <p>and <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Matrix4f.html">Matrix4f Javadoc</a></p>
  732. </div>
  733. <div class="sect2">
  734. <h3 id="definition-3">Definition</h3>
  735. <div class="paragraph">
  736. <p>A Matrix is typically used as a <em>linear transformation</em> to map vectors to vectors. That is: Y = MX where X is a Vector and M is a Matrix applying any or all transformations (scale, <a href="rotate.html">rotate</a>, translate).</p>
  737. </div>
  738. <div class="paragraph">
  739. <p>There are a few special matrices:</p>
  740. </div>
  741. <div class="paragraph">
  742. <p><em>zero matrix</em> is the Matrix with all zero entries.</p>
  743. </div>
  744. <table class="tableblock frame-all grid-all spread">
  745. <colgroup>
  746. <col style="width: 33.3333%;">
  747. <col style="width: 33.3333%;">
  748. <col style="width: 33.3334%;">
  749. </colgroup>
  750. <thead>
  751. <tr>
  752. <th class="tableblock halign-left valign-top">0</th>
  753. <th class="tableblock halign-left valign-top">0</th>
  754. <th class="tableblock halign-left valign-top">0</th>
  755. </tr>
  756. </thead>
  757. <tbody>
  758. <tr>
  759. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  760. <p>0</p>
  761. </div></div></td>
  762. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  763. <p>0</p>
  764. </div></div></td>
  765. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  766. <p>0</p>
  767. </div></div></td>
  768. </tr>
  769. <tr>
  770. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  771. <p>0</p>
  772. </div></div></td>
  773. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  774. <p>0</p>
  775. </div></div></td>
  776. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  777. <p>0</p>
  778. </div></div></td>
  779. </tr>
  780. </tbody>
  781. </table>
  782. <div class="paragraph">
  783. <p>The <em>Identity Matrix</em> is the matrix with 1 on the diagonal entries and 0 for all other entries.</p>
  784. </div>
  785. <table class="tableblock frame-all grid-all spread">
  786. <colgroup>
  787. <col style="width: 33.3333%;">
  788. <col style="width: 33.3333%;">
  789. <col style="width: 33.3334%;">
  790. </colgroup>
  791. <thead>
  792. <tr>
  793. <th class="tableblock halign-left valign-top">1</th>
  794. <th class="tableblock halign-left valign-top">0</th>
  795. <th class="tableblock halign-left valign-top">0</th>
  796. </tr>
  797. </thead>
  798. <tbody>
  799. <tr>
  800. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  801. <p>0</p>
  802. </div></div></td>
  803. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  804. <p>1</p>
  805. </div></div></td>
  806. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  807. <p>0</p>
  808. </div></div></td>
  809. </tr>
  810. <tr>
  811. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  812. <p>0</p>
  813. </div></div></td>
  814. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  815. <p>0</p>
  816. </div></div></td>
  817. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  818. <p>1</p>
  819. </div></div></td>
  820. </tr>
  821. </tbody>
  822. </table>
  823. <div class="paragraph">
  824. <p>A Matrix is <em>invertible</em> if there is a matrix <em>M<sup>-1</sup></em> where <em>MM<sup>-1</sup> = M<sup>-1</sup>M = I</em>.</p>
  825. </div>
  826. <div class="paragraph">
  827. <p>The <em>transpose</em> of a matrix <em>M = [m<sub>ij</sub>]</em> is <em>M<sup>T</sup> = [m<sub>ji</sub>]</em>. This causes the rows of <em>M</em> to become the columns of <em>M<sup>T</sup></em>.</p>
  828. </div>
  829. <table class="tableblock frame-all grid-all spread">
  830. <colgroup>
  831. <col style="width: 14.2857%;">
  832. <col style="width: 14.2857%;">
  833. <col style="width: 14.2857%;">
  834. <col style="width: 14.2857%;">
  835. <col style="width: 14.2857%;">
  836. <col style="width: 14.2857%;">
  837. <col style="width: 14.2858%;">
  838. </colgroup>
  839. <thead>
  840. <tr>
  841. <th class="tableblock halign-left valign-top">1</th>
  842. <th class="tableblock halign-left valign-top">1</th>
  843. <th class="tableblock halign-left valign-top">1</th>
  844. <th class="tableblock halign-left valign-top"></th>
  845. <th class="tableblock halign-left valign-top">1</th>
  846. <th class="tableblock halign-left valign-top">2</th>
  847. <th class="tableblock halign-left valign-top">3</th>
  848. </tr>
  849. </thead>
  850. <tbody>
  851. <tr>
  852. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  853. <p>2</p>
  854. </div></div></td>
  855. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  856. <p>2</p>
  857. </div></div></td>
  858. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  859. <p>2</p>
  860. </div></div></td>
  861. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  862. <p>⇒</p>
  863. </div></div></td>
  864. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  865. <p>1</p>
  866. </div></div></td>
  867. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  868. <p>2</p>
  869. </div></div></td>
  870. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  871. <p>3</p>
  872. </div></div></td>
  873. </tr>
  874. <tr>
  875. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  876. <p>3</p>
  877. </div></div></td>
  878. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  879. <p>3</p>
  880. </div></div></td>
  881. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  882. <p>3</p>
  883. </div></div></td>
  884. <td class="tableblock halign-left valign-top"><div></div></td>
  885. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  886. <p>1</p>
  887. </div></div></td>
  888. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  889. <p>2</p>
  890. </div></div></td>
  891. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  892. <p>3</p>
  893. </div></div></td>
  894. </tr>
  895. </tbody>
  896. </table>
  897. <div class="paragraph">
  898. <p>A Matrix is symmetric if <em>M</em> = <em>M<sup>T</sup></em>.</p>
  899. </div>
  900. <table class="tableblock frame-all grid-all spread">
  901. <colgroup>
  902. <col style="width: 33.3333%;">
  903. <col style="width: 33.3333%;">
  904. <col style="width: 33.3334%;">
  905. </colgroup>
  906. <thead>
  907. <tr>
  908. <th class="tableblock halign-left valign-top">X</th>
  909. <th class="tableblock halign-left valign-top">A</th>
  910. <th class="tableblock halign-left valign-top">B</th>
  911. </tr>
  912. </thead>
  913. <tbody>
  914. <tr>
  915. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  916. <p>A</p>
  917. </div></div></td>
  918. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  919. <p>X</p>
  920. </div></div></td>
  921. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  922. <p>C</p>
  923. </div></div></td>
  924. </tr>
  925. <tr>
  926. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  927. <p>B</p>
  928. </div></div></td>
  929. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  930. <p>C</p>
  931. </div></div></td>
  932. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  933. <p>X</p>
  934. </div></div></td>
  935. </tr>
  936. </tbody>
  937. </table>
  938. <div class="paragraph">
  939. <p>Where X, A, B, and C equal numbers</p>
  940. </div>
  941. <div class="paragraph">
  942. <p>jME includes two types of Matrix classes: Matrix3f and Matrix4f. Matrix3f is a 3x3 matrix and is the most commonly used (able to handle scaling and rotating), while Matrix4f is a 4x4 matrix that can also handle translation.</p>
  943. </div>
  944. </div>
  945. <div class="sect2">
  946. <h3 id="transformations-2">Transformations</h3>
  947. <div class="paragraph">
  948. <p>Multiplying a vector with a Matrix allows the vector to be transformed. Either rotating, scaling or translating that vector.</p>
  949. </div>
  950. <div class="sect3">
  951. <h4 id="scaling">Scaling</h4>
  952. <div class="paragraph">
  953. <p>If a <em>diagonal Matrix</em>, defined by D = [d<sub>ij</sub>] and d<sub>ij</sub> = 0 for i != j, has all positive entries it is a <em>scaling matrix</em>. If d<sub>i</sub> is greater than 1 then the resulting vector will grow, while if d<sub>i</sub> is less than 1 it will shrink.</p>
  954. </div>
  955. </div>
  956. <div class="sect3">
  957. <h4 id="rotation">Rotation</h4>
  958. <div class="paragraph">
  959. <p>A <em>rotation matrix</em> requires that the transpose and inverse are the same matrix (R<sup>-1</sup> = R<sup>T</sup>). The <em>rotation matrix</em> R can then be calculated as: R = I + (sin(angle)) S + (1 - cos(angle)S<sup>2</sup> where S is:</p>
  960. </div>
  961. <table class="tableblock frame-all grid-all spread">
  962. <colgroup>
  963. <col style="width: 33.3333%;">
  964. <col style="width: 33.3333%;">
  965. <col style="width: 33.3334%;">
  966. </colgroup>
  967. <thead>
  968. <tr>
  969. <th class="tableblock halign-left valign-top">0</th>
  970. <th class="tableblock halign-left valign-top">u<sub>2</sub></th>
  971. <th class="tableblock halign-left valign-top">-u<sub>1</sub></th>
  972. </tr>
  973. </thead>
  974. <tbody>
  975. <tr>
  976. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  977. <p>-u<sub>2</sub></p>
  978. </div></div></td>
  979. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  980. <p>0</p>
  981. </div></div></td>
  982. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  983. <p>u<sub>0</sub></p>
  984. </div></div></td>
  985. </tr>
  986. <tr>
  987. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  988. <p>u<sub>1</sub></p>
  989. </div></div></td>
  990. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  991. <p>-u<sub>0</sub></p>
  992. </div></div></td>
  993. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  994. <p>0</p>
  995. </div></div></td>
  996. </tr>
  997. </tbody>
  998. </table>
  999. </div>
  1000. <div class="sect3">
  1001. <h4 id="translation">Translation</h4>
  1002. <div class="paragraph">
  1003. <p>Translation requires a 4x4 matrix, where the vector (x,y,z) is mapped to (x,y,z,1) for multiplication. The <em>Translation Matrix</em> is then defined as:</p>
  1004. </div>
  1005. <table class="tableblock frame-all grid-all spread">
  1006. <colgroup>
  1007. <col style="width: 50%;">
  1008. <col style="width: 50%;">
  1009. </colgroup>
  1010. <thead>
  1011. <tr>
  1012. <th class="tableblock halign-left valign-top">M</th>
  1013. <th class="tableblock halign-left valign-top">T</th>
  1014. </tr>
  1015. </thead>
  1016. <tbody>
  1017. <tr>
  1018. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  1019. <p>S<sup>T</sup></p>
  1020. </div></div></td>
  1021. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  1022. <p>1</p>
  1023. </div></div></td>
  1024. </tr>
  1025. </tbody>
  1026. </table>
  1027. <div class="paragraph">
  1028. <p>where M is the 3x3 matrix (containing any rotation/scale information), T is the translation vector and S<sup>T</sup> is the transpose Vector of T. 1 is just a constant.</p>
  1029. </div>
  1030. </div>
  1031. </div>
  1032. <div class="sect2">
  1033. <h3 id="jme-class-2">jME Class</h3>
  1034. <div class="paragraph">
  1035. <p>Both Matrix3f and Matrix4f store their values as floats and are publicly available as (m00, m01, m02, …, mNN) where N is either 2 or 3.</p>
  1036. </div>
  1037. <div class="paragraph">
  1038. <p>Most methods are straight forward, and I will leave documentation to the Javadoc.</p>
  1039. </div>
  1040. </div>
  1041. </div>
  1042. </div>
  1043. <div class="sect1">
  1044. <h2 id="vector">Vector</h2>
  1045. <div class="sectionbody">
  1046. <div class="paragraph">
  1047. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Vector3f.html">Vector3f Javadoc</a>+</p>
  1048. </div>
  1049. <div class="paragraph">
  1050. <p>and <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Vector2f.html">Vector2f Javadoc</a></p>
  1051. </div>
  1052. <div class="sect2">
  1053. <h3 id="definition-4">Definition</h3>
  1054. <div class="paragraph">
  1055. <p>Vectors are used to represent a multitude of things in jME, points in space, vertices in a triangle mesh, normals, etc. These classes (Vector3f in particular) are probably the most used class in jME.</p>
  1056. </div>
  1057. <div class="paragraph">
  1058. <p>A Vector is defined by an n-tuple of real numbers. <strong>V</strong> = &lt;V<sub>1</sub>, V<sub>2</sub>,…, V<sub>n</sub>&gt;.</p>
  1059. </div>
  1060. <div class="paragraph">
  1061. <p>We have two Vectors (2f and 3f) meaning we have tuples of 2 float values or 3 float values.</p>
  1062. </div>
  1063. </div>
  1064. <div class="sect2">
  1065. <h3 id="operations">Operations</h3>
  1066. <div class="sect3">
  1067. <h4 id="multiplication-by-scalar">Multiplication by Scalar</h4>
  1068. <div class="paragraph">
  1069. <p>A Vector can be multiplied by a scalar value to produce a second Vector with the same proportions as the first. a*V* = *V*a = &lt;aV<sub>1</sub>, aV<sub>2</sub>,…,aV<sub>n</sub>&gt;</p>
  1070. </div>
  1071. </div>
  1072. <div class="sect3">
  1073. <h4 id="addition-and-subtraction">Addition and Subtraction</h4>
  1074. <div class="paragraph">
  1075. <p>Adding or subtracting two Vectors occurs component-wise. That is the first component is added (subtracted) with the first component of the second Vector and so on.</p>
  1076. </div>
  1077. <div class="paragraph">
  1078. <p><strong>P</strong> + <strong>Q</strong> = &lt;P<sub>1</sub>+Q<sub>1</sub>, P<sub>2</sub>+Q<sub>2</sub>, …, P<sub>n</sub>+Q<sub>n</sub>&gt;</p>
  1079. </div>
  1080. </div>
  1081. <div class="sect3">
  1082. <h4 id="magnitude">Magnitude</h4>
  1083. <div class="paragraph">
  1084. <p>The <em>magnitude</em> defines the length of a Vector. A Vector of magnitude 1 is <em>unit length</em>.</p>
  1085. </div>
  1086. <div class="paragraph">
  1087. <p>For example, if <strong>V</strong> = (x, y, z), the magnitude is the square root of (x<sup>2</sup> + y<sup>2</sup> + z<sup>2</sup>).</p>
  1088. </div>
  1089. <div class="paragraph">
  1090. <p>A Vector can be <em>normalized</em> or made <em>unit length</em> by multiplying the Vector by (1/magnitude).</p>
  1091. </div>
  1092. </div>
  1093. <div class="sect3">
  1094. <h4 id="dot-products">Dot Products</h4>
  1095. <div class="paragraph">
  1096. <p>The dot product of two vectors is defined as:
  1097. <strong>P</strong> dot <strong>Q</strong> = P<sub>x</sub>Q<sub>x</sub> + P<sub>y</sub>Q<sub>y</sub> + P<sub>z</sub>Q<sub>z</sub></p>
  1098. </div>
  1099. <div class="paragraph">
  1100. <p>Using the dot product allows us to determine how closely two Vectors are pointing to the same point. If the dot product is negative they are facing in relatively opposite directions, while postive tells us they are pointing in the relative same direction.</p>
  1101. </div>
  1102. <div class="paragraph">
  1103. <p>If the dot product is 0 then the two Vectors are <em>orthogonal</em> or 90 degrees off.</p>
  1104. </div>
  1105. </div>
  1106. <div class="sect3">
  1107. <h4 id="cross-product">Cross Product</h4>
  1108. <div class="paragraph">
  1109. <p>The Cross Product of two Vectors returns a third Vector that is prependicular to the two Vectors. This is very useful for calculating surface normals.</p>
  1110. </div>
  1111. <div class="paragraph">
  1112. <p><strong>P</strong> X <strong>Q</strong> = &lt;P<sub>y</sub>Q<sub>z</sub> - P<sub>z</sub>Q<sub>y</sub>, P<sub>z</sub>Q<sub>x</sub> - P<sub>x</sub>Q<sub>z</sub>, P<sub>x</sub>Q<sub>y</sub> - P<sub>y</sub>Q<sub>x</sub>&gt;</p>
  1113. </div>
  1114. </div>
  1115. <div class="sect3">
  1116. <h4 id="jme-class-3">jME Class</h4>
  1117. <div class="paragraph">
  1118. <p>Vector3f and Vector2f store their values (x, y, z) and (x, y) respectively as floats. Most methods are straight forward, and I will leave documentation to the Javadoc.</p>
  1119. </div>
  1120. </div>
  1121. </div>
  1122. </div>
  1123. </div>
  1124. <div class="sect1">
  1125. <h2 id="quaternion">Quaternion</h2>
  1126. <div class="sectionbody">
  1127. <div class="paragraph">
  1128. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Quaternion.html">Quaternion Javadoc</a></p>
  1129. </div>
  1130. <div class="sect2">
  1131. <h3 id="definition-5">Definition</h3>
  1132. <div class="paragraph">
  1133. <p>Quaternions define a subset of a hypercomplex number system. Quaternions are defined by (i<sup>2</sup> = j<sup>2</sup> = k<sup>2</sup> = ijk = -1). jME makes use of Quaternions because they allow for compact representations of rotations, or correspondingly, orientations, in 3D space. With only four float values, we can represent an object&#8217;s orientation, where a rotation matrix would require nine. They also require fewer arithmetic operations for concatenation.</p>
  1134. </div>
  1135. <div class="paragraph">
  1136. <p>Additional benefits of the Quaternion is reducing the chance of <a href="http://en.wikipedia.org/wiki/Gimbal_lock">Gimbal Lock</a> and allowing for easily interpolation between two rotations (spherical linear interpolation or slerp).</p>
  1137. </div>
  1138. <div class="paragraph">
  1139. <p>While Quaternions are quite difficult to fully understand, there are an exceeding number of convenience methods to allow you to use them without having to understand the math behind it. Basically, these methods involve nothing more than setting the Quaternion&#8217;s x,y,z,w values using other means of representing rotations. The Quaternion is then contained in the <a href="jme3/advanced/spatial.html">Spatial</a> as its local rotation component.</p>
  1140. </div>
  1141. <div class="paragraph">
  1142. <p>Quaternion <strong>q</strong> has the form</p>
  1143. </div>
  1144. <div class="paragraph">
  1145. <p><strong>q</strong> = &lt;_w,x,y,z_&gt; = <em>w + xi + yj + zk</em></p>
  1146. </div>
  1147. <div class="paragraph">
  1148. <p>or alternatively, it can be written as:</p>
  1149. </div>
  1150. <div class="paragraph">
  1151. <p><strong>q</strong> = <strong>s</strong> + <strong>v</strong>, where <strong>s</strong> represents the scalar part corresponding to the w-component of <strong>q</strong>, and <strong>v</strong> represents the vector part of the (x, y, z) components of <strong>q</strong>.</p>
  1152. </div>
  1153. <div class="paragraph">
  1154. <p>Multiplication of Quaternions uses the distributive law and adheres to the following rules with multiplying the imaginary components (i, j, k):</p>
  1155. </div>
  1156. <div class="paragraph">
  1157. <p><code>i<sup>2</sup> = j<sup>2</sup> = k<sup>2</sup> = -1</code>+</p>
  1158. </div>
  1159. <div class="paragraph">
  1160. <p><code>ij = -ji = k</code>+</p>
  1161. </div>
  1162. <div class="paragraph">
  1163. <p><code>jk = -kj = i</code>+</p>
  1164. </div>
  1165. <div class="paragraph">
  1166. <p><code>ki = -ik = j</code></p>
  1167. </div>
  1168. <div class="paragraph">
  1169. <p>However, Quaternion multiplication is <em>not</em> commutative, so we have to pay attention to order.</p>
  1170. </div>
  1171. <div class="paragraph">
  1172. <p><strong>q<sub>1</sub>q<sub>2</sub></strong> = s<sub>1</sub>s<sub>2</sub> - <strong>v<sub>1</sub></strong> dot <strong>v<sub>2</sub></strong> + s<sub>1</sub><strong>v<sub>2</sub></strong> + s<sub>2</sub><strong>v<sub>1</sub></strong> + <strong>v<sub>1</sub></strong> X <strong>v<sub>2</sub></strong></p>
  1173. </div>
  1174. <div class="paragraph">
  1175. <p>Quaternions also have conjugates where the conjugate of <strong>q</strong> is (s - <strong>v</strong>)</p>
  1176. </div>
  1177. <div class="paragraph">
  1178. <p>These basic operations allow us to convert various rotation representations to Quaternions.</p>
  1179. </div>
  1180. </div>
  1181. <div class="sect2">
  1182. <h3 id="angle-axis">Angle Axis</h3>
  1183. <div class="paragraph">
  1184. <p>You might wish to represent your rotations as Angle Axis pairs. That is, you define a axis of rotation and the angle with which to <a href="rotate.html">rotate</a> about this axis. <a href="quaternion.html">Quaternion</a> defines a method <code>fromAngleAxis</code> (and <code>fromAngleNormalAxis</code>) to create a Quaternion from this pair. This is acutally used quite a bit in jME demos to continually rotate objects. You can also obtain a Angle Axis rotation from an existing Quaternion using <code>toAngleAxis</code>.</p>
  1185. </div>
  1186. <div class="sect3">
  1187. <h4 id="example-rotate-a-spatial-using-fromangleaxis">Example - Rotate a Spatial Using fromAngleAxis</h4>
  1188. <div class="listingblock">
  1189. <div class="content">
  1190. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">//rotate about the Y-Axis by approximately 1 pi</span>
  1191. Vector3f axis = Vector3f.UNIT_Y;
  1192. <span class="comment">// UNIT_Y equals (0,1,0) and does not require to create a new object</span>
  1193. <span class="type">float</span> angle = <span class="float">3.14f</span>;
  1194. s.getLocalRotation().fromAngleAxis(angle, axis);</code></pre>
  1195. </div>
  1196. </div>
  1197. </div>
  1198. </div>
  1199. <div class="sect2">
  1200. <h3 id="three-angles">Three Angles</h3>
  1201. <div class="paragraph">
  1202. <p>You can also represent a rotation by defining three angles. The angles represent the rotation about the individual axes. Passing in a three-element array of floats defines the angles where the first element is X, second Y and third is Z. The method provided by Quaternion is <code>fromAngles</code> and can also fill an array using <code>toAngles</code></p>
  1203. </div>
  1204. <div class="sect3">
  1205. <h4 id="example-rotate-a-spatial-using-fromangles">Example - Rotate a Spatial Using fromAngles</h4>
  1206. <div class="listingblock">
  1207. <div class="content">
  1208. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">//rotate 1 radian on the x, 3 on the y and 0 on z</span>
  1209. <span class="type">float</span><span class="type">[]</span> angles = {<span class="integer">1</span>, <span class="integer">3</span>, <span class="integer">0</span>};
  1210. s.getLocalRotation().fromAngles(angles);</code></pre>
  1211. </div>
  1212. </div>
  1213. </div>
  1214. </div>
  1215. <div class="sect2">
  1216. <h3 id="three-axes">Three Axes</h3>
  1217. <div class="paragraph">
  1218. <p>If you have three axes that define your rotation, where the axes define the left axis, up axis and directional axis respectively) you can make use of <code>fromAxes</code> to generate the Quaternion. It should be noted that this will generate a new <a href="matrix.html">Matrix</a> object that is then garbage collected, thus, this method should not be used if it will be called many times. Again, <code>toAxes</code> will populate a Vector3f array.</p>
  1219. </div>
  1220. <div class="sect3">
  1221. <h4 id="example-rotate-a-spatial-using-fromaxes">Example - Rotate a Spatial Using fromAxes</h4>
  1222. <div class="listingblock">
  1223. <div class="content">
  1224. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">//rotate a spatial to face up ~45 degrees</span>
  1225. Vector3f<span class="type">[]</span> axes = <span class="keyword">new</span> Vector3f[<span class="integer">3</span>];
  1226. axes[<span class="integer">0</span>] = <span class="keyword">new</span> Vector3f(-<span class="integer">1</span>, <span class="integer">0</span>, <span class="integer">0</span>); <span class="comment">//left</span>
  1227. axes[<span class="integer">1</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>, <span class="float">0.5f</span>, <span class="float">0.5f</span>); <span class="comment">//up</span>
  1228. axes[<span class="integer">2</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>, <span class="float">0.5f</span>, <span class="float">0.5f</span>); <span class="comment">//dir</span>
  1229. s.getLocalRotation().fromAxes(axes);</code></pre>
  1230. </div>
  1231. </div>
  1232. </div>
  1233. </div>
  1234. <div class="sect2">
  1235. <h3 id="rotation-matrix">Rotation Matrix</h3>
  1236. <div class="paragraph">
  1237. <p>Commonly you might find yourself with a <a href="matrix.html">Matrix</a> defining a rotation. In fact, it&#8217;s very common to contain a rotation in a <a href="matrix.html">Matrix</a> create a Quaternion, rotate the Quaternion, and then get the <a href="matrix.html">Matrix</a> back. Quaternion contains a <code>fromRotationMatrix</code> method that will create the appropriate Quaternion based on the give <a href="matrix.html">Matrix</a>. The <code>toRotationMatrix</code> will populate a given <a href="matrix.html">Matrix</a>.</p>
  1238. </div>
  1239. <div class="sect3">
  1240. <h4 id="example-rotate-a-spatial-using-a-rotation-matrix">Example - Rotate a Spatial Using a Rotation Matrix</h4>
  1241. <div class="listingblock">
  1242. <div class="content">
  1243. <pre class="CodeRay highlight"><code data-lang="java">Matrix3f mat = <span class="keyword">new</span> Matrix3f();
  1244. mat.setColumn(<span class="integer">0</span>, <span class="keyword">new</span> Vector3f(<span class="integer">1</span>,<span class="integer">0</span>,<span class="integer">0</span>));
  1245. mat.setColumn(<span class="integer">1</span>, <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,-<span class="integer">1</span>,<span class="integer">0</span>));
  1246. mat.setColumn(<span class="integer">2</span>, <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>));
  1247. s.getLocalRotation().fromRotationMatrix(mat);</code></pre>
  1248. </div>
  1249. </div>
  1250. <div class="paragraph">
  1251. <p>As you can see there are many ways to build a Quaternion. This allows you to work with rotations in a way that is conceptually easier to picture, but still build Quaternions for internal representation.</p>
  1252. </div>
  1253. </div>
  1254. </div>
  1255. <div class="sect2">
  1256. <h3 id="slerp">Slerp</h3>
  1257. <div class="paragraph">
  1258. <p>One of the biggest advantages to using Quaternions is allowing interpolation between two rotations. That is, if you have an initial Quaternion representing the original orientation of an object, and you have a final Quaternion representing the orientation you want the object to face, you can do this very smoothly with slerp. Simply supply the time, where time is [0, 1] and 0 is the initial rotation and 1 is the final rotation.</p>
  1259. </div>
  1260. <div class="sect3">
  1261. <h4 id="example-use-slerp-to-rotate-between-two-quaternions">Example - Use Slerp to Rotate Between two Quaternions</h4>
  1262. <div class="listingblock">
  1263. <div class="content">
  1264. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">/*
  1265. You can interpolate rotations between two quaternions using spherical linear
  1266. interpolation (slerp).
  1267. */</span>
  1268. Quaternion Xroll45 = <span class="keyword">new</span> Quaternion();
  1269. Xroll45.fromAngleAxis(<span class="integer">45</span> * FastMath.DEG_TO_RAD, Vector3f.UNIT_X);
  1270. <span class="comment">//</span>
  1271. Quaternion Yroll45 = <span class="keyword">new</span> Quaternion();
  1272. Yroll45.fromAngleAxis(<span class="integer">45</span> * FastMath.DEG_TO_RAD, Vector3f.UNIT_Y);
  1273. <span class="comment">//the rotation half - way between these two</span>
  1274. Quaternion halfBetweenXroll45Yroll45 = <span class="keyword">new</span> Quaternion();
  1275. halfBetweenXroll45Yroll45.slerp(Xroll45, Yroll45, <span class="float">0.5f</span>);
  1276. geom2.setLocalRotation(halfBetweenXroll45Yroll45);</code></pre>
  1277. </div>
  1278. </div>
  1279. </div>
  1280. </div>
  1281. <div class="sect2">
  1282. <h3 id="multiplication">Multiplication</h3>
  1283. <div class="paragraph">
  1284. <p>You can concatenate (add) rotations: This means you turn the object first around one axis, then around the other, in one step.</p>
  1285. </div>
  1286. <div class="listingblock">
  1287. <div class="content">
  1288. <pre class="CodeRay highlight"><code data-lang="java">----Quaternion myRotation = pitch90.mult(roll45); <span class="comment">/* pitch and roll */</span>----
  1289. To rotate a Vector3f around its origin by the Quaternion amount, use the multLocal method of the Quaternion:</code></pre>
  1290. </div>
  1291. </div>
  1292. <div class="listingblock">
  1293. <div class="content">
  1294. <pre class="CodeRay highlight"><code data-lang="java">----Quaternion myRotation = pitch90;
  1295. Vector3f myVector = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">0</span>,-<span class="integer">1</span>);
  1296. myRotation.multLocal(myVector);
  1297. ----</code></pre>
  1298. </div>
  1299. </div>
  1300. </div>
  1301. </div>
  1302. </div>
  1303. <h1 id="utility-classes" class="sect0">Utility Classes</h1>
  1304. <div class="paragraph">
  1305. <p>Along with the base Math classes, jME provides a number of Math classes to make development easier (and, hopefully, faster). Most of these classes find uses throughout the jME system internally. They can also prove beneficial to users as well.</p>
  1306. </div>
  1307. <div class="sect1">
  1308. <h2 id="fast-math">Fast Math</h2>
  1309. <div class="sectionbody">
  1310. <div class="paragraph">
  1311. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/FastMath.html">FastMath Javadoc</a></p>
  1312. </div>
  1313. <div class="sect2">
  1314. <h3 id="definition-6">Definition</h3>
  1315. <div class="paragraph">
  1316. <p>FastMath provides a number of convience methods, and where possible faster versions (although this can be at the sake of accuracy).</p>
  1317. </div>
  1318. </div>
  1319. <div class="sect2">
  1320. <h3 id="usage">Usage</h3>
  1321. <div class="paragraph">
  1322. <p>FastMath provides a number of constants that can help with general math equations. One important attribute is <code>USE_FAST_TRIG</code> if you set this to true, a look-up table will be used for trig functions rather than Java&#8217;s standard Math library. This provides significant speed increases, but might suffer from accuracy so care should be taken.</p>
  1323. </div>
  1324. <div class="paragraph">
  1325. <p>There are five major categories of functions that FastMath provides.</p>
  1326. </div>
  1327. <div class="sect3">
  1328. <h4 id="trig-functions">Trig Functions</h4>
  1329. <div class="ulist">
  1330. <ul>
  1331. <li>
  1332. <p>cos and acos - provide <a href="http://en.wikipedia.org/wiki/cosine">cosine</a> and link:http://en.wikipedia.org/wiki/arc cosine[arc cosine] values (make use of the look-up table if <code>USE_FAST_TRIG</code> is true)</p>
  1333. </li>
  1334. <li>
  1335. <p>sin and asin - provide <a href="http://en.wikipedia.org/wiki/sine">sine</a> and link:http://en.wikipedia.org/wiki/arc sine[arc sine] values (make use of the look-up table if <code>USE_FAST_TRIG</code> is true)</p>
  1336. </li>
  1337. <li>
  1338. <p>tan and atan - provide <a href="http://en.wikipedia.org/wiki/tangent">tangent</a> and link:http://en.wikipedia.org/wiki/arc tangent[arc tangent] values</p>
  1339. </li>
  1340. </ul>
  1341. </div>
  1342. </div>
  1343. <div class="sect3">
  1344. <h4 id="numerical-methods">Numerical Methods</h4>
  1345. <div class="ulist">
  1346. <ul>
  1347. <li>
  1348. <p>ceil - provides the ceiling (smallest value that is greater than or equal to a given value and an integer)of a value.</p>
  1349. </li>
  1350. <li>
  1351. <p>floor - provides the floor (largest value that is less than or equal to a given value and an integer) of a value.</p>
  1352. </li>
  1353. <li>
  1354. <p>exp - provides the link:http://en.wikipedia.org/wiki/euler number[euler number] (e) raised to the provided value.</p>
  1355. </li>
  1356. <li>
  1357. <p>sqr - provides the square of a value (i.e. value * value).</p>
  1358. </li>
  1359. <li>
  1360. <p>pow - provides the first given number raised to the second.</p>
  1361. </li>
  1362. <li>
  1363. <p>isPowerOfTwo - provides a boolean if a value is a power of two or not (e.g. 32, 64, 4).</p>
  1364. </li>
  1365. <li>
  1366. <p>abs - provides the link:http://en.wikipedia.org/wiki/absolute value[absolute value] of a given number.</p>
  1367. </li>
  1368. <li>
  1369. <p>sign - provides the sign of a value (1 if positive, -1 if negative, 0 if 0).</p>
  1370. </li>
  1371. <li>
  1372. <p>log - provides the link:http://en.wikipedia.org/wiki/natural logarithm[natural logarithm] of a value.</p>
  1373. </li>
  1374. <li>
  1375. <p>sqrt - provides the link:http://en.wikipedia.org/wiki/square root[square root] of a value.</p>
  1376. </li>
  1377. <li>
  1378. <p>invSqrt - provides the inverse link:http://en.wikipedia.org/wiki/square root[square root] of a value (1 / sqrt(value).</p>
  1379. </li>
  1380. </ul>
  1381. </div>
  1382. </div>
  1383. <div class="sect3">
  1384. <h4 id="linear-algebra">Linear Algebra</h4>
  1385. <div class="ulist">
  1386. <ul>
  1387. <li>
  1388. <p>LERP - calculate the link:http://en.wikipedia.org/wiki/Linear interpolation[linear interpolation] of two points given a time between 0 and 1.</p>
  1389. </li>
  1390. <li>
  1391. <p>determinant - calculates the <a href="http://en.wikipedia.org/wiki/determinant">determinant</a> of a 4x4 matrix.</p>
  1392. </li>
  1393. </ul>
  1394. </div>
  1395. </div>
  1396. <div class="sect3">
  1397. <h4 id="geometric-functions">Geometric Functions</h4>
  1398. <div class="ulist">
  1399. <ul>
  1400. <li>
  1401. <p>counterClockwise - given three points (defining a triangle), the winding is determined. 1 if counter-clockwise, -1 if clockwise and 0 if the points define a line.</p>
  1402. </li>
  1403. <li>
  1404. <p>pointInsideTriangle - calculates if a point is inside a triangle.</p>
  1405. </li>
  1406. <li>
  1407. <p>sphericalToCartesian - converts a point from link:http://en.wikipedia.org/wiki/spherical coordinates[spherical coordinates] to link:http://en.wikipedia.org/wiki/cartesian coordinates[cartesian coordinates].</p>
  1408. </li>
  1409. <li>
  1410. <p>cartesianToSpherical - converts a point from link:http://en.wikipedia.org/wiki/cartesian coordinates[cartesian coordinates] to link:http://en.wikipedia.org/wiki/spherical coordinates[spherical coordinates].</p>
  1411. </li>
  1412. </ul>
  1413. </div>
  1414. </div>
  1415. <div class="sect3">
  1416. <h4 id="misc">Misc.</h4>
  1417. <div class="ulist">
  1418. <ul>
  1419. <li>
  1420. <p>newRandomFloat - obtains a random float.</p>
  1421. </li>
  1422. </ul>
  1423. </div>
  1424. </div>
  1425. </div>
  1426. </div>
  1427. </div>
  1428. <div class="sect1">
  1429. <h2 id="line">Line</h2>
  1430. <div class="sectionbody">
  1431. <div class="paragraph">
  1432. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Line.html">Line Javadoc</a></p>
  1433. </div>
  1434. <div class="sect2">
  1435. <h3 id="definition-7">Definition</h3>
  1436. <div class="paragraph">
  1437. <p>A line is a straight one-dimensional figure having no thickness and extending infinitely in both directions. A line is defined by two points <strong>A</strong> and <strong>B</strong> with the line passing through both.</p>
  1438. </div>
  1439. </div>
  1440. <div class="sect2">
  1441. <h3 id="usage-2">Usage</h3>
  1442. <div class="paragraph">
  1443. <p>jME defines a Line class that is defined by an origin and direction. In reality, this Line class is typically used as a <em>line segment</em>. Where the line is finite and contained between these two points.</p>
  1444. </div>
  1445. <div class="paragraph">
  1446. <p><code>random</code> provides a means of generate a random point that falls on the line between the origin and direction points.</p>
  1447. </div>
  1448. </div>
  1449. <div class="sect2">
  1450. <h3 id="example-1-find-a-random-point-on-a-line">Example 1 - Find a Random Point on a Line</h3>
  1451. <div class="listingblock">
  1452. <div class="content">
  1453. <pre class="CodeRay highlight"><code data-lang="java"><span class="predefined-type">Line</span> l = <span class="keyword">new</span> <span class="predefined-type">Line</span>(<span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">1</span>,<span class="integer">0</span>), <span class="keyword">new</span> Vector3f(<span class="integer">3</span>,<span class="integer">2</span>,<span class="integer">1</span>));
  1454. Vector3f randomPoint = l.random();</code></pre>
  1455. </div>
  1456. </div>
  1457. </div>
  1458. </div>
  1459. </div>
  1460. <div class="sect1">
  1461. <h2 id="plane">Plane</h2>
  1462. <div class="sectionbody">
  1463. <div class="paragraph">
  1464. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Plane.html">Plane Javadoc</a></p>
  1465. </div>
  1466. <div class="sect2">
  1467. <h3 id="definition-8">Definition</h3>
  1468. <div class="paragraph">
  1469. <p>A plane is defined by the equation <strong>N</strong> . (<strong>X</strong> - <strong>X<sub>0</sub></strong>) = 0 where <strong>N</strong> = (a, b, c) and passes through the point <strong>X<sub>0</sub></strong> = (x<sub>0</sub>, y<sub>0</sub>, z<sub>0</sub>). <strong>X</strong> defines another point on this plane (x, y, z).</p>
  1470. </div>
  1471. <div class="paragraph">
  1472. <p><strong>N</strong> . (<strong>X</strong> - <strong>X<sub>0</sub></strong>) = 0 can be described as (<strong>N</strong> . <strong>X</strong>) + (<strong>N</strong> . -<strong>X<sub>0</sub></strong>) = 0</p>
  1473. </div>
  1474. <div class="paragraph">
  1475. <p>or</p>
  1476. </div>
  1477. <div class="paragraph">
  1478. <p>(ax + by + cz) + (-ax<sub>0</sub>-by<sub>0</sub>-cz<sub>0</sub>) = 0</p>
  1479. </div>
  1480. <div class="paragraph">
  1481. <p>where (-ax<sub>0</sub>-by<sub>0</sub>-cz<sub>0</sub>) = d</p>
  1482. </div>
  1483. <div class="paragraph">
  1484. <p>Where d is the negative value of a point in the plane times the unit vector describing the orientation of the plane.</p>
  1485. </div>
  1486. <div class="paragraph">
  1487. <p>This gives us the general equation: (ax + by + cz + d = 0)</p>
  1488. </div>
  1489. </div>
  1490. <div class="sect2">
  1491. <h3 id="usage-in-jme">Usage in jME</h3>
  1492. <div class="paragraph">
  1493. <p>jME defines the Plane as ax + by + cz = -d. Therefore, during creation of the plane, the normal of the plane (a,b,c) and the constant d is supplied.</p>
  1494. </div>
  1495. <div class="paragraph">
  1496. <p>The most common usage of Plane is <a href="introduction_to_the_camera.html">Camera</a> frustum planes. Therefore, the primary purpose of Plane is to determine if a point is on the positive side, negative side, or intersecting a plane.</p>
  1497. </div>
  1498. <div class="paragraph">
  1499. <p>Plane defines the constants:</p>
  1500. </div>
  1501. <div class="ulist">
  1502. <ul>
  1503. <li>
  1504. <p><code>NEGATIVE_SIDE</code> - represents a point on the opposite side to which the normal points.</p>
  1505. </li>
  1506. <li>
  1507. <p><code>NO_SIDE</code> - represents a point that lays on the plane itself.</p>
  1508. </li>
  1509. <li>
  1510. <p><code>POSITIVE_SIDE</code> - represents a point on the side to which the normal points.</p>
  1511. </li>
  1512. </ul>
  1513. </div>
  1514. <div class="paragraph">
  1515. <p>These values are returned on a call to <code>whichSide</code>.</p>
  1516. </div>
  1517. </div>
  1518. <div class="sect2">
  1519. <h3 id="example-1-determining-if-a-point-is-on-the-positive-side-of-a-plane">Example 1 - Determining if a Point is On the Positive Side of a Plane</h3>
  1520. <div class="listingblock">
  1521. <div class="content">
  1522. <pre class="CodeRay highlight"><code data-lang="java">Vector3f normal = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1523. <span class="type">float</span> constant = <span class="keyword">new</span> Vector3f(<span class="integer">1</span>,<span class="integer">1</span>,<span class="integer">1</span>).dot(normal);
  1524. Plane testPlane = <span class="keyword">new</span> Plane(normal, constant);
  1525. <span class="type">int</span> side = testPlane.whichSide(<span class="keyword">new</span> Vector3f(<span class="integer">2</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1526. <span class="keyword">if</span>(side == Plane.NO_SIDE) {
  1527. <span class="predefined-type">System</span>.out.println(<span class="string"><span class="delimiter">&quot;</span><span class="content">This point lies on the plane</span><span class="delimiter">&quot;</span></span>);
  1528. }</code></pre>
  1529. </div>
  1530. </div>
  1531. </div>
  1532. <div class="sect2">
  1533. <h3 id="example-2-for-the-layperson">Example 2 - For the Layperson</h3>
  1534. <div class="paragraph">
  1535. <p>Using the standard constructor Plane(Vector3f normal, float constant), here is what you need to do to create a plane, and then use it to check which side of the plane a point is on.</p>
  1536. </div>
  1537. <div class="listingblock">
  1538. <div class="content">
  1539. <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">test</span>;
  1540. <span class="keyword">import</span> <span class="include">java.util.logging.Logger</span>;
  1541. <span class="keyword">import</span> <span class="include">com.jme.math</span>.*;
  1542. <span class="comment">/**
  1543. *@author Nick Wiggill
  1544. */</span>
  1545. <span class="directive">public</span> <span class="type">class</span> <span class="class">TestPlanes</span>
  1546. {
  1547. <span class="directive">public</span> <span class="directive">static</span> <span class="directive">final</span> <span class="predefined-type">Logger</span> logger = <span class="predefined-type">Logger</span>.getLogger(LevelGraphBuilder.class.getName());
  1548. <span class="directive">public</span> <span class="directive">static</span> <span class="type">void</span> main(<span class="predefined-type">String</span><span class="type">[]</span> args) <span class="directive">throws</span> <span class="exception">Exception</span>
  1549. {
  1550. <span class="comment">//***Outline.</span>
  1551. <span class="comment">//This example shows how to construct a plane representation using</span>
  1552. <span class="comment">//com.jme.math.Plane.</span>
  1553. <span class="comment">//We will create a very simple, easily-imagined 3D plane. It will</span>
  1554. <span class="comment">//be perpendicular to the x axis (it's facing). It's &quot;centre&quot; (if</span>
  1555. <span class="comment">//such a thing exists in an infinite plane) will be positioned 1</span>
  1556. <span class="comment">//unit along the positive x axis.</span>
  1557. <span class="comment">//***Step 1.</span>
  1558. <span class="comment">//The vector that represents the normal to the plane, in 3D space.</span>
  1559. <span class="comment">//Imagine a vector coming out of the origin in this direction.</span>
  1560. <span class="comment">//There is no displacement yet (see Step 2, below).</span>
  1561. Vector3f normal = <span class="keyword">new</span> Vector3f(<span class="float">5f</span>,<span class="integer">0</span>,<span class="integer">0</span>);
  1562. <span class="comment">//***Step 2.</span>
  1563. <span class="comment">//This is our displacement vector. The plane remains facing in the</span>
  1564. <span class="comment">//direction we've specified using the normal above, but now we are</span>
  1565. <span class="comment">//are actually giving it a position other than the origin.</span>
  1566. <span class="comment">//We will use this displacement to define the variable &quot;constant&quot;</span>
  1567. <span class="comment">//needed to construct the plane. (see step 3)</span>
  1568. Vector3f displacement = Vector3f.UNIT_X;
  1569. <span class="comment">//or</span>
  1570. <span class="comment">//Vector3f displacement = new Vector3f(1f, 0, 0);</span>
  1571. <span class="comment">//***Step 3.</span>
  1572. <span class="comment">//Here we generate the constant needed to define any plane. This</span>
  1573. <span class="comment">//is semi-arcane, don't let it worry you. All you need to</span>
  1574. <span class="comment">//do is use this same formula every time.</span>
  1575. <span class="type">float</span> constant = displacement.dot(normal);
  1576. <span class="comment">//***Step 4.</span>
  1577. <span class="comment">//Finally, construct the plane using the data you have assembled.</span>
  1578. Plane plane = <span class="keyword">new</span> Plane(normal, constant);
  1579. <span class="comment">//***Some tests.</span>
  1580. logger.info(<span class="string"><span class="delimiter">&quot;</span><span class="content">Plane info: </span><span class="delimiter">&quot;</span></span>+plane.toString()); <span class="comment">//trace our plane's information</span>
  1581. Vector3f p1 = <span class="keyword">new</span> Vector3f(<span class="float">1.1f</span>,<span class="integer">0</span>,<span class="integer">0</span>); <span class="comment">//beyond the plane (further from origin than plane)</span>
  1582. Vector3f p2 = <span class="keyword">new</span> Vector3f(<span class="float">0.9f</span>,<span class="integer">0</span>,<span class="integer">0</span>); <span class="comment">//before the plane (closer to origin than plane)</span>
  1583. Vector3f p3 = <span class="keyword">new</span> Vector3f(<span class="float">1f</span>,<span class="integer">0</span>,<span class="integer">0</span>); <span class="comment">//on the plane</span>
  1584. logger.info(<span class="string"><span class="delimiter">&quot;</span><span class="content">p1 position relative to plane is </span><span class="delimiter">&quot;</span></span>+plane.whichSide(p1)); <span class="comment">//outputs NEGATIVE</span>
  1585. logger.info(<span class="string"><span class="delimiter">&quot;</span><span class="content">p2 position relative to plane is </span><span class="delimiter">&quot;</span></span>+plane.whichSide(p2)); <span class="comment">//outputs POSITIVE</span>
  1586. logger.info(<span class="string"><span class="delimiter">&quot;</span><span class="content">p3 position relative to plane is </span><span class="delimiter">&quot;</span></span>+plane.whichSide(p3)); <span class="comment">//outputs NONE</span>
  1587. }
  1588. }</code></pre>
  1589. </div>
  1590. </div>
  1591. </div>
  1592. </div>
  1593. </div>
  1594. <div class="sect1">
  1595. <h2 id="ray">Ray</h2>
  1596. <div class="sectionbody">
  1597. <div class="paragraph">
  1598. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Ray.html">Ray Javadoc</a></p>
  1599. </div>
  1600. <div class="sect2">
  1601. <h3 id="definition-9">Definition</h3>
  1602. <div class="paragraph">
  1603. <p>Ray defines a line that starts at a point <strong>A</strong> and continues in a direction through <strong>B</strong> into infinity.</p>
  1604. </div>
  1605. <div class="paragraph">
  1606. <p>This Ray is used extensively in jME for <a href="picking.html">Picking</a>. A Ray is cast from a point in screen space into the scene. Intersections are found and returned. To create a ray supply the object with two points, where the first point is the origin.</p>
  1607. </div>
  1608. </div>
  1609. <div class="sect2">
  1610. <h3 id="example-1-create-a-ray-that-represents-where-the-camera-is-looking">Example 1 - Create a Ray That Represents Where the Camera is Looking</h3>
  1611. <div class="listingblock">
  1612. <div class="content">
  1613. <pre class="CodeRay highlight"><code data-lang="java">Ray ray = <span class="keyword">new</span> Ray(cam.getLocation(), cam.getDirection());</code></pre>
  1614. </div>
  1615. </div>
  1616. </div>
  1617. </div>
  1618. </div>
  1619. <div class="sect1">
  1620. <h2 id="rectangle">Rectangle</h2>
  1621. <div class="sectionbody">
  1622. <div class="paragraph">
  1623. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Rectangle.html">Rectangle Javadoc</a></p>
  1624. </div>
  1625. <div class="sect2">
  1626. <h3 id="definition-10">Definition</h3>
  1627. <div class="paragraph">
  1628. <p>Rectangle defines a finite plane within three dimensional space that is specified via three points (A, B, C). These three points define a triangle with the forth point defining the rectangle ( (B + C) - A ).</p>
  1629. </div>
  1630. </div>
  1631. <div class="sect2">
  1632. <h3 id="jme-usage">jME Usage</h3>
  1633. <div class="paragraph">
  1634. <p>Rectangle is a straight forward data class that simply maintains values that defines a Rectangle in 3D space. One interesting use is the <code>random</code> method that will create a random point on the Rectangle. The <a href="particle_system.html">Particle System</a> makes use of this to define an area that generates <a href="particles.html">Particles</a>.</p>
  1635. </div>
  1636. </div>
  1637. <div class="sect2">
  1638. <h3 id="example-1-define-a-rectangle-and-get-a-point-from-it">Example 1 : Define a Rectangle and Get a Point From It</h3>
  1639. <div class="listingblock">
  1640. <div class="content">
  1641. <pre class="CodeRay highlight"><code data-lang="java">Vector3f v1 = <span class="keyword">new</span> Vector3f(<span class="integer">1</span>,<span class="integer">0</span>,<span class="integer">0</span>);
  1642. Vector3f v2 = <span class="keyword">new</span> Vector3f(<span class="integer">1</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1643. Vector3f v3 = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1644. <span class="predefined-type">Rectangle</span> r = <span class="keyword">new</span> <span class="predefined-type">Rectangle</span>(v1, v2, v3);
  1645. Vector3f point = r.random();</code></pre>
  1646. </div>
  1647. </div>
  1648. </div>
  1649. </div>
  1650. </div>
  1651. <div class="sect1">
  1652. <h2 id="triangle">Triangle</h2>
  1653. <div class="sectionbody">
  1654. <div class="paragraph">
  1655. <p>See <a href="http://www.jmonkeyengine.com/doc/com/jme/math/Triangle.html">Triangle Javadoc</a></p>
  1656. </div>
  1657. <div class="sect2">
  1658. <h3 id="definition-11">Definition</h3>
  1659. <div class="paragraph">
  1660. <p>A triangle is a 3-sided polygon. Every triangle has three sides and three angles, some of which may be the same. If the triangle is a right triangle (one angle being 90 degrees), the side opposite the 90 degree angle is the hypotenuse, while the other two sides are the legs. All triangles are <a href="http://en.wikipedia.org/wiki/Convex_polygon">convex</a> and <a href="http://mathworld.wolfram.com/BicentricPolygon.html">bicentric</a>.</p>
  1661. </div>
  1662. </div>
  1663. <div class="sect2">
  1664. <h3 id="usage-3">Usage</h3>
  1665. <div class="paragraph">
  1666. <p>jME&#8217;s Triangle class is a simple data class. It contains three <a href="vector.html">Vector3f</a> objects that represent the three points of the triangle. These can be retrieved via the <code>get</code> method. The <code>get</code> method, obtains the point based on the index provided. Similarly, the values can be set via the <code>set</code> method.</p>
  1667. </div>
  1668. </div>
  1669. <div class="sect2">
  1670. <h3 id="example-1-creating-a-triangle">Example 1 - Creating a Triangle</h3>
  1671. <div class="listingblock">
  1672. <div class="content">
  1673. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">//the three points that make up the triangle</span>
  1674. Vector3f p1 = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1675. Vector3f p2 = <span class="keyword">new</span> Vector3f(<span class="integer">1</span>,<span class="integer">1</span>,<span class="integer">0</span>);
  1676. Vector3f p3 = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">1</span>,<span class="integer">1</span>);
  1677. Triangle t = <span class="keyword">new</span> Triangle(p1, p2, p3);</code></pre>
  1678. </div>
  1679. </div>
  1680. </div>
  1681. </div>
  1682. </div>
  1683. <h1 id="tips-and-tricks" class="sect0">Tips and Tricks</h1>
  1684. <div class="sect1">
  1685. <h2 id="how-do-i-get-height-width-of-a-spatial">How do I get height/width of a spatial?</h2>
  1686. <div class="sectionbody">
  1687. <div class="paragraph">
  1688. <p>Cast the spatial to com.jme3.bounding.BoundingBox to be able to use getExtent().</p>
  1689. </div>
  1690. <div class="listingblock">
  1691. <div class="content">
  1692. <pre class="CodeRay highlight"><code data-lang="java">----Vector3f extent = ((BoundingBox) spatial.getWorldBound()).getExtent(<span class="keyword">new</span> Vector3f());
  1693. <span class="type">float</span> x = ( (BoundingBox)spatial.getWorldBound()).getXExtent();
  1694. <span class="type">float</span> y = ( (BoundingBox)spatial.getWorldBound()).getYExtent();
  1695. <span class="type">float</span> z = ( (BoundingBox)spatial.getWorldBound()).getZExtent();
  1696. ----</code></pre>
  1697. </div>
  1698. </div>
  1699. </div>
  1700. </div>
  1701. <div class="sect1">
  1702. <h2 id="how-do-i-position-the-center-of-a-geomtry">How do I position the center of a Geomtry?</h2>
  1703. <div class="sectionbody">
  1704. <div class="listingblock">
  1705. <div class="content">
  1706. <pre class="CodeRay highlight"><code data-lang="java">----geo.center().move(pos);----</code></pre>
  1707. </div>
  1708. </div>
  1709. <div class="sect2">
  1710. <h3 id="see-also">See Also</h3>
  1711. <div class="ulist">
  1712. <ul>
  1713. <li>
  1714. <p><a href="rotate.html">Rotate</a></p>
  1715. </li>
  1716. <li>
  1717. <p><a href="quaternion.html">Quaternion</a></p>
  1718. </li>
  1719. </ul>
  1720. </div>
  1721. </div>
  1722. </div>
  1723. </div>
  1724. </div>
  1725. <div id="footer">
  1726. <div id="footer-text">
  1727. Last updated 2016-05-21 23:44:18 UTC
  1728. </div>
  1729. </div>
  1730. </body>
  1731. </html>