Author interactive math equations and diagrams online using LATEX and PSTricks(latex2html5.com)
latex2html5.com
Author interactive math equations and diagrams online using LATEX and PSTricks
http://latex2html5.com/
8 comments
It uses MathJax to do the equation rendering, see:
http://www.mathjax.org/
The diagrams are rendered to SVG (vector graphics, supported by all modern web browsers).
http://www.mathjax.org/
The diagrams are rendered to SVG (vector graphics, supported by all modern web browsers).
For working scientists, engineers and mathematicians, that are already familiar with LaTeX, this seems to be an easy and natural path to achieve (part of) the vision of Bret Victor.
This is a tad off-topic but:
I'd argue that a large proportion of scientists and mathematicians don't want to waste time trying to achieve Victor's goals. We have jargon for a reason - it allows experts to communicate effectively and efficiently. Scientists don't want to waste time or space unpacking what should be patently clear to another scientist.
Now science education, that's different.
Now science education, that's different.
I can't speak for all scientist, but most people I know enjoy explaining what they do to other people.
Working scientists, engineers and mathematicians probably have not heard about Victor and his vision, at least I have not. Glancing over his homepage, it seems his is into dynamic visualizations, so his vision probably has something to do with that.
I don't understand why he doesn't release the source for his applications.
Source code here: https://github.com/pyramation/LaTeX2HTML5
and here: https://github.com/Mathapedia/LaTeX2HTML5
and here: https://github.com/Mathapedia/LaTeX2HTML5
I think the parent is talking about Bret Victor.
Maybe he wants to monetize it? Nothing wrong with making a living.
With reference to: https://mathapedia.com/books/34/sections/203/526
The code for the second example does not sound impressive to me. I do not want to draw diagrams by specifying coordinates of each and every box and label. How do I tell it to draw a label in the center of an already placed box?
Is there a way/tool where diagrams can be drawn at a higher level of abstraction where the user does not have to specify each and every thing? I have seen a few approaches, none of which sounds to be feature-complete:
yEd [1] lets the user draw graphs and store them in formats where they can be read by a program into a graph object. I found it very difficult to use yEd to draw anything but graphs.
MS-Word includes smart art. While I am not sure, but the storage format sounds to be something intelligent such that it would at least theoretically be possible to read the diagram programmatically into the corresponding data structure. Only issue is that the templates are fairly limited and I cannot figure how to draw anything else. Drawing a graph for example does not look possible.
Then there are UML tools that should have fit the purpose but often are not intuitive enough to use. They are also not intended to draw general-purpose diagrams.
And finally mindmap-based applications that do nothing else but mindmaps.
[1] http://www.yworks.com/en/products_yed_about.html
The code for the second example does not sound impressive to me. I do not want to draw diagrams by specifying coordinates of each and every box and label. How do I tell it to draw a label in the center of an already placed box?
Is there a way/tool where diagrams can be drawn at a higher level of abstraction where the user does not have to specify each and every thing? I have seen a few approaches, none of which sounds to be feature-complete:
yEd [1] lets the user draw graphs and store them in formats where they can be read by a program into a graph object. I found it very difficult to use yEd to draw anything but graphs.
MS-Word includes smart art. While I am not sure, but the storage format sounds to be something intelligent such that it would at least theoretically be possible to read the diagram programmatically into the corresponding data structure. Only issue is that the templates are fairly limited and I cannot figure how to draw anything else. Drawing a graph for example does not look possible.
Then there are UML tools that should have fit the purpose but often are not intuitive enough to use. They are also not intended to draw general-purpose diagrams.
And finally mindmap-based applications that do nothing else but mindmaps.
[1] http://www.yworks.com/en/products_yed_about.html
I agree about drawing diagrams by specifying coordinates (it is tedious). The point here is to make existing LaTeX publishable online. It would be great if there was a web tool to generate the diagram PSTricks code
LaTeX newbie here:
Can someone explain how this works (from a user standpoint)? How does userline below map mouse pointer coordinates to the line? It seems (2,2) is what is getting substituted with the (x,y) from the mouse (after adjusting for the origin).
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
I am totally lost on the following example. The lightblue line below behaves the same way as the line in the above example. But the code below is quite different, including sin and -y.
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=2pt,linecolor=green]{->}(0,0)(2,2){-x}{-y}
\userline[linewidth=2pt,linecolor=red]{->}(0,0)(2,2){0}{y}
\userline[linewidth=2pt,linecolor=purple]{->}(0,0)(2,2){-x}{cos(y)}
\userline[linewidth=2pt,linecolor=lightblue]{->}(0,0)(2,2)(sin(x)}{-y}
\end{pspicture}
Can someone explain how this works (from a user standpoint)? How does userline below map mouse pointer coordinates to the line? It seems (2,2) is what is getting substituted with the (x,y) from the mouse (after adjusting for the origin).
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
I am totally lost on the following example. The lightblue line below behaves the same way as the line in the above example. But the code below is quite different, including sin and -y.
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=2pt,linecolor=green]{->}(0,0)(2,2){-x}{-y}
\userline[linewidth=2pt,linecolor=red]{->}(0,0)(2,2){0}{y}
\userline[linewidth=2pt,linecolor=purple]{->}(0,0)(2,2){-x}{cos(y)}
\userline[linewidth=2pt,linecolor=lightblue]{->}(0,0)(2,2)(sin(x)}{-y}
\end{pspicture}
I am fairly sure that's not the source that produces the interaction. Apart from the incorrect expression, the mismatched brackets in (sin(x)} indicate that.
Yes, I noted the mismatch too. So what is producing the interaction then (and how does it know what changes with the interaction). It must have something to do with "user" in "userline", that is, "userline" is some primitive that includes interactions. How exactly, I cannot find.
Thanks to whoever posted this. Just to clarify, yes, Bret Victor was an inspiration for this project. He was also quoted many times in my thesis for the first iteration of this project, mathapedia. The main point here was to built a product with an ethnographic approach to design---a product that works without the user having to change their behavior, in this case, an academician who already writes LaTeX can start to use LaTeX2HTML5 without much web dev knowledge. This is mostly a proof of concept for something that I hope to be more isomorphic to everything you can do with LaTeX and PSTricks, as well as utilizing other packages, such as TiKZ/PGF.
I wish there was a way to do this in PDF. If PDFs weren't these cumbersome static things it could really change how information is spread in the sciences. At least in my field the current mode for disseminating information is nearly 100% through downloading PDFs from journals, which inherently prohibits interactivity and dynamic visualizations.
What static files? I don't know how cumbersome it is, but Acrobat supports interactivity using JavaScript. See http://acrobatusers.com/tutorials/filter/search&category=13&.... You can also embed Flash in Acrobat files.
I'm trying to push my research group to release our papers as iPython notebooks and it looks like my next paper will be. Our text will be rendered as normal markdown and our figures will be live figures with all the code that we used to generate them. This way, if anyone wants to check our work, extend it, or just better understand it, they're more than free to do so. It should be a nice step forward in the ultimate goal of reproducible science.
None of the journals I work with will accept any format other than .tex or .doc for submission, its pretty ridiculous. We totally rely on the journals to distribute information but they have no incentive to optimize the process for reproducability or ease of use. Don't get me started on publication fees and access fees.
We're getting around this by putting a paragraph at the end of the conclusion with a link that says something to the effect of "Click here for a live version of the paper with all the code and data used in this project." It's a little more cumbersome than having the paper actually be the notebook but it helps.
I threw together a quick demo kinda like this a while back using Bret Victor's Tangle.js:
http://defcon21.hscott.net/wave.html
http://defcon21.hscott.net/wave.html
cool demo, though I think your "phase offset" is in radians, might want to throw a little π/180 in there ;)
I can go the route of latex -> png -> embed in html, but that does get tedious.
edit: looking at the source, it does appear to be the case:
"[...]if $\hat{x}(t) = \sum \limits_{k=0}^{M-1}\alpha_k \Psi_k$, where $x$ is a $p$-periodic signal[...]"
very cool. Though maybe I'm just easy to please.