<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>MathJax</title>

<link href="VisualRef.css" rel="stylesheet" type="text/css" />

<div id="wrapper">

<div id="leftmenu">

<p class="Normal"><a href="index.html">&nbsp;&nbsp;Home</a></p>

<p class="Normal">&nbsp;&nbsp; <a href="VisualIntro.html">Overview of Python &amp; VPython<br>

</a></p>

<p class="Normal"><a href="https://trinket.io/matter-interactions/courses/00_welcome_to_vpython#/welcome-to-vpython/getting-started">&nbsp;&nbsp;&quot;Welcome to VPython&quot; tutorial</a></p>

<p class="Normal"><a href="videos.html">&nbsp;&nbsp;Introductory Videos</a></p>

<p class="Normal"><a href="primitives.html">&nbsp;&nbsp;Pictures</a> of 3D objects</p>

<p>&nbsp;&nbsp;<select id="menu1" onChange="jumpMenu(this)"></select></p>

<p>&nbsp;&nbsp;<select id="menu2" onChange="jumpMenu(this)"></select></p>

<p>&nbsp;&nbsp;<select id="menu3" onChange="jumpMenu(this)"></select></p>

<p class="Normal"><a href="https://vpython.org" target="_blank">&nbsp; VPython 7 web site</a><br />

<a href="license.txt" target="_blank">&nbsp;&nbsp;VPython license</a><br />

<br />

</p>

</td>

</div>

<div id="content">

<!-- InstanceBeginEditable name="content" -->

<div>

<h1 class="Heading-1"><font color="#0000A0">Math displays using LaTeX</font> - Web VPython only</h1>

</div>

<div>

<p class="Normal">In Web VPython (but not currently in VPython 7) you can display complex mathematical expressions expressed in the widely used math editing format, <a href="http://www.latex-project.org/" target="_blank">LaTeX</a>. Here is <strong><a href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/LaTexMathDisplay" target="_blank">an example</a></strong>. The LaTeX capability is provided by <a href="http://www.mathjax.org/" target="_blank">MathJax</a>, which is imported by Web VPython. For example, consider this mathematical display:</p>

<p class="Normal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/MathJax.jpg" width="350" height="48" alt="equation" /></p>

<p class="Normal">You can display this in the caption of an existing Web VPython canvas with the following statements:</p>

<p class="program"> box()<br />

scene.caption = &quot;Final kinetic energy = \\( \\dfrac {1} {2}mv_i^{2}+\\int _{i}^{f}\\vec{F}\\circ d \\vec{r} \\)&quot;<br />

<br />

MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub]) </p>

<p class="Normal">In the first statement, note that all LaTeX backslashes must be replaced by double backslashes: \ -&gt; \\. For a backslash to appear on the web page (where it will be processed by MathJax) a JavaScript string must use two backslashes, since in a string a single backslash can have special meaning (for example \n represents a carriage return). When you write or paste in a LaTeX description, make sure you double all the backslashes. Unfortunately, there doesn't seem to be any way to write a JavaScript function to double the backslashes for you.</p>

<p class="Normal">A common way to place a LaTeX math expression within a sentence is to place the expression between dollar signs: $ ..... $. However, with MathJax you must use the format \\( ..... \\) instead. If you want the expression to be centered in the window, use the standard LaTeX format $$ ..... $$.</p>

<p class="Normal">The second program statement shown above tells MathJax to typeset the LaTeX description and display the mathematics correctly. In fact, this statement will typeset all of the LaTeX expressions currently placed on the web page.</p>

<p class="Normal">You can also typeset a specific element. For example, suppose you've placed an expression in the title:</p>

<p class="program">scene.title = &quot;\\(\\dfrac {5} {7} \\)&quot;</p>

<p class="Normal">You can typeset this element, and all other existing LaTeX elements in the usual way -- <span class="program">MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub])</span>. However, suppose that later you change the expression from representing 5/7 to representing 3y/4x. You can change the title like this::</p>

<p class="program">scene.title = &quot;\\(\\dfrac {3y} {4x} \\)&quot;</p>

<p class="Normal">Then you can typeset just this one element, without re-typesetting other formulas on the web page, with this statement:</p>

<p class="program">MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub,scene.title])</p>

<p class="Normal"><strong><font color="#0000A0">Easy creation of LaTeX expressions</font></strong></p>

<p class="Normal">There is a a <a href="http://webdemo.myscript.com/" target="_blank"><strong>remarkable tool</strong></a> for creating LaTeX expressions from handwriting (choose &quot;Web Equation&quot;. Using the mouse, you simply write the mathematics as you would normally do by hand, and the tool produces the corresponding LaTeX, which you can paste into your program. Remember that you must double all of the backslashes.</p>

<p class="Normal"><strong><font color="#0000A0">Summary</font></strong></p>

<p class="Normal">You can use LaTeX to display complex mathematics on the web page. Make all backslashes double: \ -&gt; \\. Within a sentence, use \\( ..... \\). For a centered formula, use $$ ..... $$.</p>

<p class="Normal">After the LaTeX has been sent to the web page, typeset all of the math with <span class="program">MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub])</span>. You can typeset a specific web page element with <span class="program">MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub, anchor_point])</span>, where anchor_point can for example be scene.title or scene.caption, or a jquery id.</p>

<p class="Normal">Additional capabilities of MathJax are documented at <a href="http://www.mathjax.org/" target="_blank">MathJax</a>.</p>

<p class="Normal">.</p>

</div>

<br />

<!-- InstanceEndEditable -->

</div>

<script type="text/javascript" language="javascript" src="navigation.js"></script>

<!-- InstanceEnd --></html>