ASTEX - A JavaScript App for Displaying Mathematics on the Web

2010-05-10T12:37:00.000-07:00

Check out the app at http://astex-math-on-web.googlecode.com \newline \newline \begin{bold}What is ASTEX?\end{bold} \newline \newline \begin{bold}ASTEX \end{bold} is an ascii/tex-like mathematical typesetting system for the web. It works completely in the user's web browser and uses a very simple human readable markup language. \newline \newline \begin{bold}What web browsers does it work with?\end{bold} \newline \newline \begin{bold}ASTEX \end{bold} has been tested on the latest versions of following web browers: \newline \begin{itemize[list-style-type:square;]} \item \exLink{http://www.mozilla.com/firefox|Mozilla Firefox} \item \exLink{http://www.microsoft.com/windows/internet-explorer/default.aspx|Internet Explorer} \item \exLink{http://www.google.com/chrome|Google Chrome} \item \exLink{http://www.apple.com/safari|Apple Safari} \item \exLink{http://www.opera.com|Opera} (latest edition) \end{itemize} \newline \begin{bold}What can I use it for?\end{bold} \newline \begin{itemize[list-style-type:square;]} \item Display Mathematical Text (including equations and arrays) \item Draw 2D and 3D Graphs \item Highlight Computer Syntax \item Simple LaTeX Formatting \item Create a Quiz \item Create an Online Document with navigation and search functions \end{itemize} \newline \newline `y=1/x qquad` $sum_{n=1}^{oo} 1/n$ ` qquad [ [1,0,0],[0,1,0],[0,0,1] ]` \newline `{: [ int_0^pi sin x dx , = , (-cos x) , |_{x=0}^{x=pi} , ] , [ , = , -cos(pi) , hide{1} - , hide{1} [-cos(0)] ] , [ , = , -(-1) , hide{1} - , hide{1} [-1] ] , [ , = , hide{111} 1 , hide{1} + , hide{1} 1 ] , [ , = , , hide{1} 2 , ] :}` \newline The mathematical markup is rather simple. For instance, the equation `y=1/x` was created by inserting the following text into the html document: \newline \begin{code} BRUSH:astex-graph CODE:`y = 1 / x` \end{code} and the summation $sum_{n=1}^{oo} 1/n$ was created by inserting the following text into the html document: \newline \begin{code} BRUSH:astex-graph CODE:$sum_{n=1}^{oo} 1/n$ \end{code} \newline \newline 2D Graphs can be drawn using rectangular, polar, and parametric functions, with the ability to shade/fill an area between functions. \newline \newline 3D Graphs can be drawn using rectangular, cylindrical, spherical coordinates systems as well as drawing vector-valued functions, with the ability to add rotation controls. 3D Graphs can use either a Right-Handed or Left-Handed Coordinate System, as well as optional graph rotation controls. \newline \newline \begin{graph} width = 250 ; height = 250 ; ymin = -2 ; ymax = 2 ; bgcolor = yellow ; stroke = 2 ; color = orange ; fillplot ( plot ( `y=sin(x)` , 0 , pi ) plot ( `y=0` , 0 , pi ) ) ; color = gray ; axes = yes ; color = red ; plot ( `y=sin(x)` , -2pi , 2pi ) ; color = black ; mtext( `int_0^pi sin x dx` , [-3,1.2] , 0.5 , 0.1 ) ; \end{graph} \begin{graph} width=250; height=250; dim=3; bgcolor=yellow; xmin=-1; xmax=1; ymin=-1; ymax=1; zmin=-1; zmax=1; controls=yes; color=black; axes=yes; axeslabels=x,y,z; surfacecolor ( red , blue ) ; partition ( 20 , 20 , 4 ) ; plot3D ( cyl , `z=r^2` ) ; \end{graph} \newline \newline The markup language for graphs is very simple. For example, the 3D paraboloid above was created by inserting the following text into the html document: \newline \newline \begin{code} BRUSH:astex-graph CODE: \begin{graph} \cn \ct width=250; height=250; dim=3; bgcolor=yellow; \cn \ct xmin=-1; xmax=1; ymin=-1; ymax=1; zmin=-1; zmax=1; \cn \ct controls=yes; \cn \ct color=black; \cn \ct axes=yes; \cn \ct axeslabels=x,y,z; \cn \ct surfacecolor ( red , blue ) ; \cn \ct partition ( 20 , 20 , 4 ) ; \cn \ct plot3D ( cyl , `z=r^2` ) ; \cn \end{graph} \end{code} Try it for yourself in the sandbox below. \newline \newline \sandbox{} \newline \newline \begin{center} \logo{} \end{center}