I recently learned about about latex2html5, a javascript library which
allows one to write LaTeX and PSTricks to produce interactive objects on websites.1
1This is part of a larger project called Mathapedia,
which is an interesting endeavor that I haven't played around with too much yet. But more importantly,
the author notes elsewhere that this is a
proof of concept for a deeper project. So it is to be expected that this is a bit incomplete, and from
this point of view this is a great proof of concept.
At its core, it
functions in a similar way to MathJax, which is what I use to generate
mathematics on this (and my other) sites.
As an example of MathJax, I can write the following.2
2This is used all over
this site.
\begin{equation*}
\int_0^1 f(x) dx = F(1) - F(0).
\end{equation*}
With latex2html5, it is very easy to produce interactive diagrams such as the following: (if you do not
see a diagram, it may be necessary to reload the page once — I haven't quite figured that out yet)
(move your mouse
around near the circle: the line will follow your mouse):
This is created with the extremely simple PSTricks code:
This corresponds to the following PSTricks code.
I have hope for this project.
I think this method of enabling interactivity is particularly clean (if you
know pstricks), and I would love to see this work beautifully.
\begin{pspicture}(-3,-3)(3,3)
\pscircle(0,0){2}
\userline[linewidth=1.5 pt, linecolor=red]{->}(0,0)(2,2)
\end{pspicture}
The library is not perfect, however. For instance, I cannot find a way within the library itself to make
the circle white.
One nice feature of MathJax is that it plays very nicely with css.
There are color features in the PSTricks library that latex2html5 bases its syntactical commands on,
but not all of these features are implemented.
However, one can make some very nice looking interactive diagrams, such as the following:3
3It turns out that this doesn't play well with modern mathjax. The console will now show that this next script raises an error. I've removed mathjax interaction in the following script, so there are no longer labels.
\begin{pspicture}(-5,-5)(5,5)
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }
\rput(2.3,1){$e^{i\omega}-\alpha$}
\userline[linewidth=1.5 pt]{->}(1.500,0.000)(2.121,2.121)
\userline[linewidth=1.5 pt,linecolor=white]{->}(0,0.000)(2.121,2.121){(x>0) ? 3 * cos( atan(-y/x) ) :
-3 * cos( atan(-y/x) ) }{ (x>0) ? -3 * sin( atan(-y/x) ) : 3 * sin( atan(-y/x) )}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){x}{0}{x}{y}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){0}{y}{x}{y}
\rput(-0.75,-4.25){$1+\alpha$}
\rput(2.25,-4.25){$1-\alpha$}
\psline{<->}(-3,-4)(1.5,-4)
\psline{<->}(1.5,-4)(3,-4)
\psline[linestyle=dashed](3,-4.5)(3,0)
\psline[linestyle=dashed](-3,-4.5)(-3,0)
\psline[linestyle=dashed](1.5,-4.5)(1.5,0)
\end{pspicture}
I've played around quite a bit with these interactive pieces now, seeing what colors one can change and which
pieces play better or worse together.
Overall, this strikes me as one of the easiest ways for those familiar with LaTeX and PSTricks (like me and
many other mathematicians) to produce interactive images on the web.
The library is written well enough for me to easily integrate it into the flavor of this site, minus the color
problems — which is a pretty serious detractor.
It was designed for people to write much more in LaTeX, with direct transition, but simply enough to work
in other contexts.
However, there are some aspects that are truly broken.
Consider the following PSTricks code.
\begin{pspicture}(-3,-3)(3,3)
\pscircle[linecolor=white](0,0){2}
\psarc[fillcolor=white](0,0){2}{215}{0}
\userline[linewidth=1.5 pt, linecolor=white]{->}(0,0)(2,2)
\end{pspicture}
This should create a white circle, and part of this circle should be filled in with white, and there is a line
that follows the mouse around.
Instead, we get the following (totally broken) image.4
4Where did the color blue come from? Unfortunately, there doesn't seem to be clear documentation on what aspects of PSTricks are or are not covered, so it is not a priori possible to determine what should or shouldn't work.
Info on how to comment
To make a comment, please send an email using the button below. Your email address won't be shared (unless you include it in the body of your comment). If you don't want your real name to be used next to your comment, please specify the name you would like to use. If you want your name to link to a particular url, include that as well.
bold, italics, and plain text are allowed in comments. A reasonable subset of markdown is supported, including lists, links, and fenced code blocks. In addition, math can be formatted using
$(inline math)$or$$(your display equation)$$.Please use plaintext email when commenting. See Plaintext Email and Comments on this site for more. Note also that comments are expected to be open, considerate, and respectful.