Many of us think our thoughts using a language of some sort---there is usually some voice in our minds. Language in some ways, makes us who we are. Some even argue in the world of cognitive science that language is the foundation of our consciousness. 


An author who has in their minds representations of intelligent concepts should be able to freely express herself through language with free association---digital expressions of these ideas in some cases requires total control of the computer and all of its processes. 


The vision behind the personal computer was that any person could have full command of the functions of their device. I think this vision has come true to some degree, but not fully when it comes to creating graphics, especially mathematical diagrams online. 


Does the common mathematician or professor have the ability to express concepts through web technology? The Web has its own language, and the goal of this project is to help blur the lines between what authoring the mathematical Web should be like and typesetting beautiful Math.


If you know \LaTeX, then get ready to author interactive diagrams in real-time (try using mouse or touch to interact with diagrams).


\begin{interactive}
What matters most is minimizing the distance between our expression and our execution of an idea. For example, I can describe a vector at $(0,0)$ and initial value of the head at $(2,2)$ that will follow a user touch or mouse event. This will produce the following interaction:


\begin{center}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
\end{center}


This was as easy as using this \TeX, which many math professors could understand.

\begin{verbatim}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
\end{verbatim}

You can start to add more lines, if you wish:


\begin{center}
\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}
\end{center}


I can also draw a more complex version, and start to make more useful diagrams to describe vectors:

\begin{center}
\begin{pspicture}(-5,-5)(5,5)
        
% y-axis
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)

% x-axis
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
			
% the circle
\pscircle(0,0){ 3 }
			

 % new vector 
\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=blue]{->}(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}
\end{center}

Think about the student learning a new concept. Here is an example of teaching integration using ``area under the curve'', for example, you can represent $\int_a^b f(x) dx$ as:

\begin{center}
\begin{pspicture}(-4,-3)(4,3)
		
\uservariable{alpha}(0,0){x}

\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-4}{alpha}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{sin(x)}
	
\psline{->}(-4,0)(4,0)

    
\end{pspicture}
\end{center}

The next example allows you to move the height of the graph and also integrate over a moving interval.

\begin{center}
\begin{pspicture}(-4,-3)(4,3)

\uservariable{alpha}(0,0){x}
\uservariable{beta}(0,0){y}

\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{alpha-3}{alpha}{beta + sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{beta + sin(x)}

\psline{->}(-4,0)(4,0)

\end{pspicture}
\end{center}


\end{interactive}



\begin{print}
What matters most is minimizing the distance between our expression and our execution of an idea. For example, I can describe a vector at $(0,0)$ and initial value of the head at $(2,2)$ that will follow a user touch or mouse event. This will produce the following interaction (you seem to be reading the .pdf, so it will not be interactive! this page is interactive at this url: https://mathapedia.com/books/31/sections/155/405):



\begin{center}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\psline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
\end{center}


This was as easy as using this \TeX, which many math professors could understand.

\begin{verbatim}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
\end{verbatim}

You can start to add more lines, if you wish:


\begin{center}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\psline[linewidth=2pt,linecolor=green]{->}(0,0)(2,2)
\psline[linewidth=2pt,linecolor=red]{->}(0,0)(-2,2)
\psline[linewidth=2pt,linecolor=purple]{->}(0,0)(2,-2)
\psline[linewidth=2pt,linecolor=lightblue]{->}(0,0)(-2,-2)
\end{pspicture}
\end{center}



I can also draw a more complex version, and start to make more useful diagrams to describe vectors:

\begin{center}
\begin{pspicture}(-5,-5)(5,5)
		
% y-axis
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)

% x-axis
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
			
% the circle
\pscircle(0,0){ 3 }	

 % new vector 
\rput(2.3,1){$e^{i\omega}-\alpha$}
\psline[linewidth=1.5 pt]{->}(1.500,0.000)(2.121,2.121)
\psline[linewidth=1.5 pt,linecolor=blue]{->}(0,0.000)(2.121,2.121)
\psline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121)
\psline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121)

\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}
\end{center}

Think about the student learning a new concept. Here is an example of teaching integration using ``area under the curve'', for example, you can represent $\int_a^b f(x) dx$ as:

\begin{center}
\begin{pspicture}(-4,-3)(4,3)

\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-3.14}{3.14}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{sin(x)}
	
\psline{->}(-4,0)(4,0)

    
\end{pspicture}
\end{center}

The next example allows you to move the height of the graph and also integrate over a moving interval.

\begin{center}
\begin{pspicture}(-4,-3)(4,3)

\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-3.14}{0}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{sin(x)}

\psline{->}(-4,0)(4,0)

\end{pspicture}
\end{center}

\end{print}

Ability to Express Ideas through Technology

In 1978, Donald Knuth started to work on \TeX, which has revolutionized digital typesetting. He was working on his book ``The Art of Computer Programming'' when he was frustrated with the results and was ``shocked at the poor quality'' \cite[1]{hefferon}.


I want to take a moment to bring to light two things. First, the pronunciation of \TeX\ (and therefore \LaTeX), as it is an often debated in many university classrooms and libraries, and second, the origin of the word $\tau \epsilon \chi$, because you can begin to understand the vision and purpose of Donald Knuth's creation:


\begin{quotation}
English words like 'technology' stem from a Greek root beginning with the letters $\tau \epsilon \chi$...; and this same Greek word means art as well as technology. Hence the name TEX, which is an uppercase form of $\tau \epsilon \chi$.


Insiders pronounce the χ of TEX as a Greek chi, not as an 'x', so that TEX rhymes with the word blecchhh. It’s the 'ch' sound in Scottish words like loch or German words like ach; it’s a Spanish 'j' and a Russian 'kh'. When you say it correctly to your computer, the terminal may become slightly moist.


The purpose of this pronunciation exercise is to remind you that TEX is primarily concerned with high-quality technical manuscripts: Its emphasis is on art and technology, as in the underlying Greek word \cite[1]{texbook}
\end{quotation}
His purpose was to create {\it beautiful} documents for expressing technical concepts and ideas using \TeX, and the origins of \TeX\ are in both {\it art and technology}.


Today, and for the last 30 years, it's been the de facto standard for documenting the sciences. Most scientists and academicians know \TeX, and use it to publish there academic work and papers \cite[1]{hefferon}.


TeX: Art and Technology

It is widely known in the academic world that \TeX\ is the {\it standard de facto} language for authoring academic documents. 


\LaTeX\ is a typesetting language that evolved from \TeX, and provides a higher-level abstraction so the author can focus on writing. 


You can do things like {\bf this} and \emph{this}.


\begin{verbatim}
You can do things like {\bf this} and \emph{this}.
\end{verbatim}

Mathematics has great uses, even for the non-math major. Math develops analytical and critical thinking which benefit lifelong problem solving. These skills are of paramount importance in our society, regardless of field or profession---the ability to break any situation down into its elements, and determine how each variable is related. 


Learning math is heavily depending on mathematical text, and thanks to \href{http://mathjax.org}{MathJAX}, we can render \LaTeX\ equations in the browser. Here is an example


\begin{verbatim}
$$\int_0^\infty H(\omega)e^{i\omega x} dx$$
\end{verbatim}

which produces

$$\int_0^\infty H(\omega)e^{i\omega x} dx$$

more info on \TeX support here (read carefully!) \href{http://docs.mathjax.org/en/latest/tex.html}{http://docs.mathjax.org/en/latest/tex.html}


LaTeX: TeX evolved

Often scientists need to convey information in a non-textual way to express certain ideas that otherwise would be difficult to communicate. Using \TeX\ alone would be difficult, and out of that need packages like TikZ and PSTricks came to life. 


For the Web, there are many solutions, but none that provide client-side rendering of diagrams for packages like PSTricks in an analogy to how MathJAX has done for \LaTeX. 


Because \LaTeX\ is so popular, PSTricks became wide-spread and many academics use it to produce diagrams in academic text. Also, many programs generate PSTricks as well. Note that this platform could have supported TiKZ, but I chose PSTricks because of the difference in verbosity, and wanted to use a higher-level of abstraction. TiKZ support would be a great addition in the future!


Let's get to the point. The core of PSTricks is graphics!

\begin{center}
\begin{pspicture}(-5,-5)(5,5)
\psline{->}(0,-3.75)(0,3.75)
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }	
\end{pspicture}
\end{center}

which can be produced using the following \TeX:

\begin{verbatim}
\begin{center}
\begin{pspicture}(-5,-5)(5,5)
\psline{->}(0,-3.75)(0,3.75)
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }	
\end{pspicture}
\end{center}

\end{verbatim}


But more importantly, and probably the best part of using such a package is that you also get to mix beautiful mathematics with a consistent look for your diagrams. This can be done using \emph{rput}:

\begin{center}
\begin{pspicture}(0,-3)(8,3)

\rput(0,0){$x(t)$}
\rput(4,1.5){$f(t)$}
\rput(4,-1.5){$g(t)$}
\rput(8.2,0){$y(t)$}
\rput(1.5,-2){$h(t)$}

\psframe(1,-2.5)(7,2.5)
\psframe(3,1)(5,2)
\psframe(3,-1)(5,-2)

\rput(4,0){$X_k = \frac{1}{p} \sum \limits_{n=\langle p\rangle}x(n)e^{-ik\omega_0n}$}

\psline{->}(0.5,0)(1.5,0)
\psline{->}(1.5,1.5)(3,1.5)
\psline{->}(1.5,-1.5)(3,-1.5)

\psline{->}(6.5,1.5)(6.5,0.25)
\psline{->}(6.5,-1.5)(6.5,-0.25)
\psline{->}(6.75,0)(7.75,0)
\psline(1.5,-1.5)(1.5,1.5)
\psline(5,1.5)(6.5,1.5)
\psline(5,-1.5)(6.5,-1.5)
\psline(6,-1.5)(6.5,-1.5)

\pscircle(6.5,0){0.25}
\psline(6.25,0)(6.75,0)
\psline(6.5,0.5)(6.5,-0.5)

\end{pspicture}
\end{center}

which can be produced with the following \LaTeX\ (hint: try to copy and paste it into \href{/sandbox}{the sandbox}): 

\begin{verbatim}
\begin{center}
\begin{pspicture}(0,-3)(8,3)
\rput(0,0){$x(t)$}
\rput(4,1.5){$f(t)$}
\rput(4,-1.5){$g(t)$}
\rput(8.2,0){$y(t)$}
\rput(1.5,-2){$h(t)$}
\psframe(1,-2.5)(7,2.5)
\psframe(3,1)(5,2)
\psframe(3,-1)(5,-2)
\rput(4,0){$X_k = \frac{1}{p} \sum \limits_{n=\langle p\rangle}x(n)e^{-ik\omega_0n}$}
\psline{->}(0.5,0)(1.5,0)
\psline{->}(1.5,1.5)(3,1.5)
\psline{->}(1.5,-1.5)(3,-1.5)
\psline{->}(6.5,1.5)(6.5,0.25)
\psline{->}(6.5,-1.5)(6.5,-0.25)
\psline{->}(6.75,0)(7.75,0)
\psline(1.5,-1.5)(1.5,1.5)
\psline(5,1.5)(6.5,1.5)
\psline(5,-1.5)(6.5,-1.5)
\psline(6,-1.5)(6.5,-1.5)
\pscircle(6.5,0){0.25}
\psline(6.25,0)(6.75,0)
\psline(6.5,0.5)(6.5,-0.5)
\end{pspicture}
\end{center}
\end{verbatim}

PSTricks: Graphics and Diagrams

It can be argued that the most prevalent programming language to date is JavaScript, given the fact that billions of web pages exist, and as we approach the closing of the HTML5 standards in 2014, HTML is becoming the computing platform for the future.


When Tim Berners-Lee created the ``WorldWideWeb'' he was also thinking about the political and corporate issues that could potentially harm the web, and he helped form the World Wide Web Consortium (W3C), whose purpose is to ``lead the Web to its full potential'' \cite[1]{pioneersberners}.


The W3C works to create an open standard and specification and keep moving the Web forward in a democratic way, adding new features that it believes are conducive to the achieving the Web's full potential. Soon we will see full access to the device sensors and actuators on mobile devices, although these specifications are actually recommendations. Soon the lines between what we call Web vs. Native will begin to blur.


There exist myriad disparate languages out there to create ``native'' apps, however soon all functionality will be accessible within HTML5 as well. HTML5 is the democracy of programming. HTML is a survivor like Lisp was: ``Using Lisp we restrict or limit not what we may program, but only the notation for our program descriptions'' \cite[10]{sicp}. The Abelson and Sussman book is considered by some to be one of the most important books in computer programming. Lisp could not limit what is possible to program in the context of a computer programming book that covers every possible software idea, mostly because Lisp provided access to higher-order functions that can be described by lambda calculus, and functional and object-oriented programming patterns. JavaScript is just as flexible as Lisp, and also has access to the document object model (DOM), which is the user interface, or representation of elements on a Web page.


JavaScript, which is a part of the HTML5 specification, is in the family of {\it evented languages}, which `` have been successful because they map well to the direct manipulation graphical user interface'' \cite[6]{futureofhci}. JavaScript is inherently tied to the DOM (unless you are using node.js), which provides a way to express a user interface along with functionality. Other languages (python, etc) are still stuck in the terminal, while HTML5 is readily available to the non-technical person!


In general, the WWW has lowered the barrier for authorship and consumption on the Web \cite[9]{futureofhci}. However, with the growing complexity of the Web, things like CSS and JavaScript are not necessarily something that ordinary people understand. 


HTML5: The Living Standard

Many people in the vast conduits of the interwebs talk about creating cross-platform frameworks. What happened to paper? Is it not a valid ``device'' anymore?


\begin{quotation}
THE POSTSCRIPT LANGUAGE is a simple interpretive programming language with powerful graphics capabilities. Its primary application is to describe the appearance of text, graphical shapes, and sampled images on printed or displayed pages \cite[8]{postscript}
\end{quotation}
In other words, {\it PostScript} is the language that your printer speaks (although your display can, too). PostScript is responsible for revolutionizing digital publishing, mostly because it provided an integrous communication channel between a computer and a printer. Therefore, since its introduction in 1985, it has become the industry page description language standard \cite[8]{postscript}.


Note that {\it Portable Document Format} (PDF) and PostScript can be converted to one another interchangeably, except that a PDF is a static document, whereas PostScript has an underlying general purpose programming environment \cite[9]{postscript}.


PostScript is a very, very low-level language that you would never want to write yourself, luckily we have things like \TeX\ out there to help us! Embracing \TeX\ is so important for the digital world because it allows us to conform to the standard for page description language---to be truly cross-platform, a system should work with every device, including paper!


From Digital to Paper

The Web is now becoming an even more global language than English, thus, a new form of Literacy is beginning to exist. The amount we of time we spend consuming information is probably less on paper and more digital as time progresses, however, not everyone can author Web-based content. 


\TeX\ has been the academic publishing standard for the last 30 years, and HTML has been the standard since its birth over 20 years ago. The synthesis of the two languages provides a road map for how to build a robust mathematical platform that has the potential to enable many new authors to enter digital publishing. 


The Web has myriad number of expressions which have been enabled by the creation of CSS3, and it is also this flexibility that causes the enormous eruption of attempts at creating ``eBooks''---but it does have a \emph{strict functional specification}. \TeX\ is somewhat limited in design, yet provides us a bridge to PostScript, which enables the production of not only beautiful digital pages, but also print. If we use \TeX\ and PSTricks as a standard for how things should ``look'', and HTML for how things should ``function'', then we can construct a system with full functional and design specifications, already complete. Now it's just a matter of implementation.


5 Standards and Languages