Experimenting with latex2html5: PSTricks to HTML interactivity
I recently learned about about latex2html5, a javascript library which
allows one to write LaTeX and PSTricks to produce interactive objects on websites.1
1
This 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
2
Or see most other posts on this site, or almost all posts on
my main (math) website. MathJax rules the mathematical web.
\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, 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=white]{->}(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
3
If I were able to, I would have changed most of the colors of these objects as well.
\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
4
Where 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.