# How to create PSTricks animations on the web page with interactive control panels?

I just visited a cool site that showing PSTricks animations with interactive control panels. For more details, please visit this link (click).

The question is how does the owner of the site make the animations with interactive control panels?

• Off-topic: Could you include your favourite/benchmark answer of how you make PSTricks animations for tex.sx – texenthusiast Nov 15 '13 at 22:07
• oh seems like they've done a latex+pstricks to mathjax+svg convertor, nice. – David Carlisle Nov 15 '13 at 22:13
• @texenthusiast: See my profile, there is a link there. :-) – kiss my armpit Nov 15 '13 at 22:15
• Ok got it Make animation & video, but you suggested stop visiting your profile :). – texenthusiast Nov 15 '13 at 22:21

the site has a paper with a how it works section

https://mathapedia.com/books/31/sections/169/400

Looks quite impressive really.

A version of Mathapedia that just requires client side code not a back end server is now at

http://latex2html5.com/

I think what you were specifically asking is how I made the slider? If so, the link you shared is now the example on the http://latex2html5.com homepage.

One command that was added to extend pstricks to an interactive language was the \slider command. You can add variables and it will create an HTML5 slider element and map it to variables that you set.

Arguments for the slider command are:

 \slider{min}{max}{variable}{latex}{default}


The min and max values are for specifying the minimum and maximum of the range of the slider.

The latex argument is what to display next to the slider to indicate to the end user what variable the slider is changing. Finally, the most important is the variable argument. The variable specifies the variable that is changed based on the values of the slider, and can be used in the equations of psplot commands.

Note that using these “extended” features are not backwards compatible, a.k.a they don't work on paper!

Here is a fully working example source that will work with LaTeX2HTML5:

\begin{pspicture}(-3.5,-1)(3.75,3.5)
\slider{1}{8}{n}{$N$}{4}
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-3.14}{3.14}{cos(n*x/2)+1.3}
\psaxes[showorigin=false,labels=none, Dx=1.62](0,0)(-3.25,0)(3.25,2.5)
\psline[linestyle=dashed](-3.14,0.3)(3.14,0.3)
\psline[linestyle=dashed](-3.14,2.3)(3.14,2.3)
\rput(3.6,2.3){$\frac{1}{1-\alpha}$}
\rput(3.6,0.3){$\frac{1}{1+\alpha}$}
\rput(3.14, -0.35){$\pi$}
\rput(1.62, -0.35){$\pi/2$}
\rput(-1.62, -0.35){$-\pi/2$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\end{pspicture}