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

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

https://www.latex2js.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://latex2js.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.

You can read more about the slider here: https://mathapedia.com/books/31/sections/176/subsections/189/431

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}