Skip to content

Commit

Permalink
Reformat math with CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulmasson
paulmasson committed Jan 21, 2016
1 parent 2578d0f commit 868b3ec
Showing 1 changed file with 226 additions and 10 deletions.
236 changes: 226 additions & 10 deletions examples/webgl_multiple_elements_with_text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,47 @@
color: #0080ff;
}

.math {

text-align: center;

}

.math-frac {

display: inline-block;
vertical-align: middle;

}

.math-num {

display: block;

}

.math-denom {

display: block;
border-top: 1px solid;

}

.math-sqrt {

display: inline-block;
transform: scale(1, 1.3);

}

.math-sqrt-stem {

display: inline-block;
border-top: 1px solid;
margin-top: 5px;

}

</style>
</head>
<body>
Expand All @@ -57,11 +98,9 @@
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple elements with text - webgl</div>

<script src="../build/three.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>

<script src="js/Detector.js"></script>

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

<script>

Expand Down Expand Up @@ -234,13 +273,52 @@

<p>Sound waves whose geometry is determined by a single dimension, plane waves, obey the wave equation</p>

\[ \frac{ \partial^2 u }{ \partial r^2 } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
<!-- css math formatting inspired by http://mathquill.com/mathquill/mathquill.css -->

<div class="math">

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>r</i><sup>2</sup>
</span>
</span>

&minus;

<span class="math-frac">
<span class="math-num">
1<sup></sup> <!-- sup for vertical alignment -->
</span>
<span class="math-denom">
<i>c</i><sup>2</sup>
</span>
</span>

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>t</i><sup>2</sup>
</span>
</span>

=&nbsp;0

</div>

<p>where <i>c</i> designates the speed of sound in the medium. The monochromatic solution for plane waves will be taken to be</p>

\[ u(r,t) = \sin( k r \pm &omega; t ) \]
<div class="math">

<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=&nbsp;sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)

</div>

<p>where &omega; is the frequency and \( k = &omega; / c \) is the wave number. The sign chosen in the argument determines the direction of movement of the waves.</p>
<p>where &omega; is the frequency and <i>k</i>=&omega;/<i>c</i> is the wave number. The sign chosen in the argument determines the direction of movement of the waves.</p>

<p>Here is a plane wave moving on a three-dimensional lattice of atoms:</p>

Expand Down Expand Up @@ -284,11 +362,83 @@

<p>Sound waves whose geometry is determined by two dimensions, cylindrical waves, obey the wave equation</p>

\[ \frac{ \partial^2 u }{ \partial r^2 } + \frac{ 1 }{ r } \frac{ \partial u }{ \partial r } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
<div class="math">

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>r</i><sup>2</sup>
</span>
</span>

&plus;

<span class="math-frac">
<span class="math-num">
1
</span>
<span class="math-denom">
<i>r</i>
</span>
</span>

<span class="math-frac">
<span class="math-num">
&part;<i>u</i>
</span>
<span class="math-denom">
&part;<i>r</i>
</span>
</span>

&minus;

<span class="math-frac">
<span class="math-num">
1<sup></sup> <!-- sup for vertical alignment -->
</span>
<span class="math-denom">
<i>c</i><sup>2</sup>
</span>
</span>

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>t</i><sup>2</sup>
</span>
</span>

=&nbsp;0

</div>

<p>The monochromatic solution for cylindrical sound waves will be taken to be</p>

\[ u(r,t) = \frac{ \sin( k r \pm &omega; t ) }{ \sqrt{ r } } \]
<div class="math">

<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=

<span class="math-frac">
<span class="math-num">
sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
</span>
<span class="math-denom">
<span class="math-sqrt">&radic;</span><span class="math-sqrt-stem"><i>r</i>
</span>
</span>

</div>

<div class="math">

</span>

</div>

<p>Here is a cylindrical wave moving on a three-dimensional lattice of atoms:</p>

Expand Down Expand Up @@ -354,11 +504,77 @@

<p>Sound waves whose geometry is determined by three dimensions, spherical waves, obey the wave equation</p>

\[ \frac{ \partial^2 u }{ \partial r^2 } + \frac{ 2 }{ r } \frac{ \partial u }{ \partial r } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
<div class="math">

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>r</i><sup>2</sup>
</span>
</span>

&plus;

<span class="math-frac">
<span class="math-num">
2
</span>
<span class="math-denom">
<i>r</i>
</span>
</span>

<span class="math-frac">
<span class="math-num">
&part;<i>u</i>
</span>
<span class="math-denom">
&part;<i>r</i>
</span>
</span>

&minus;

<span class="math-frac">
<span class="math-num">
1<sup></sup> <!-- sup for vertical alignment -->
</span>
<span class="math-denom">
<i>c</i><sup>2</sup>
</span>
</span>

<span class="math-frac">
<span class="math-num">
&part;<sup>2</sup><i>u</i>
</span>
<span class="math-denom">
&part;<i>t</i><sup>2</sup>
</span>
</span>

=&nbsp;0

</div>

<p>The monochromatic solution for spherical sound waves will be taken to be</p>

\[ u(r,t) = \frac{ \sin( k r \pm &omega; t ) }{ r } \]
<div class="math">

<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=

<span class="math-frac">
<span class="math-num">
sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
</span>
<span class="math-denom">
<i>r</i>
</span>
</span>

</div>

<p>Here is a spherical wave moving on a three-dimensional lattice of atoms:</p>

Expand Down

0 comments on commit 868b3ec

Please sign in to comment.