$$
% create the definition symbol
\def\bydef{\stackrel{\Delta}{=}}
%\def\circconv{\otimes}
\def\circconv{\circledast}
\newcommand{\qed}{\mbox{ } \Box}
\newcommand{\infint}{\int_{-\infty}^{\infty}}
% z transform
\newcommand{\ztp}{ ~~ \mathop{\mathcal{Z}}\limits_{\longleftrightarrow} ~~ }
\newcommand{\iztp}{ ~~ \mathop{\mathcal{Z}^{-1}}\limits_{\longleftrightarrow} ~~ }
% fourier transform pair
\newcommand{\ftp}{ ~~ \mathop{\mathcal{F}}\limits_{\longleftrightarrow} ~~ }
\newcommand{\iftp}{ ~~ \mathop{\mathcal{F}^{-1}}\limits_{\longleftrightarrow} ~~ }
% laplace transform
\newcommand{\ltp}{ ~~ \mathop{\mathcal{L}}\limits_{\longleftrightarrow} ~~ }
\newcommand{\iltp}{ ~~ \mathop{\mathcal{L}^{-1}}\limits_{\longleftrightarrow} ~~ }
\newcommand{\ftrans}[1]{ \mathcal{F} \left\{#1\right\} }
\newcommand{\iftrans}[1]{ \mathcal{F}^{-1} \left\{#1\right\} }
\newcommand{\ztrans}[1]{ \mathcal{Z} \left\{#1\right\} }
\newcommand{\iztrans}[1]{ \mathcal{Z}^{-1} \left\{#1\right\} }
\newcommand{\ltrans}[1]{ \mathcal{L} \left\{#1\right\} }
\newcommand{\iltrans}[1]{ \mathcal{L}^{-1} \left\{#1\right\} }
% coordinate vector relative to a basis (linear algebra)
\newcommand{\cvrb}[2]{\left[ \vec{#1} \right]_{#2} }
% change of coordinate matrix (linear algebra)
\newcommand{\cocm}[2]{ \mathop{P}\limits_{#2 \leftarrow #1} }
% Transformed vector set
\newcommand{\tset}[3]{\{#1\lr{\vec{#2}_1}, #1\lr{\vec{#2}_2}, \dots, #1\lr{\vec{#2}_{#3}}\}}
% sum transformed vector set
\newcommand{\tsetcsum}[4]{{#1}_1#2(\vec{#3}_1) + {#1}_2#2(\vec{#3}_2) + \cdots + {#1}_{#4}#2(\vec{#3}_{#4})}
\newcommand{\tsetcsumall}[4]{#2\lr{{#1}_1\vec{#3}_1 + {#1}_2\vec{#3}_2 + \cdots + {#1}_{#4}\vec{#3}_{#4}}}
\newcommand{\cvecsum}[3]{{#1}_1\vec{#2}_1 + {#1}_2\vec{#2}_2 + \cdots + {#1}_{#3}\vec{#2}_{#3}}
% function def
\newcommand{\fndef}[3]{#1:#2 \to #3}
% vector set
\newcommand{\vset}[2]{\{\vec{#1}_1, \vec{#1}_2, \dots, \vec{#1}_{#2}\}}
% absolute value
\newcommand{\abs}[1]{\left| #1 \right|}
% vector norm
\newcommand{\norm}[1]{\left|\left| #1 \right|\right|}
% trans
\newcommand{\trans}{\mapsto}
% evaluate integral
\newcommand{\evalint}[3]{\left. #1 \right|_{#2}^{#3}}
% slist
\newcommand{\slist}[2]{{#1}_{1},{#1}_{2},\dots,{#1}_{#2}}
% vectors
\newcommand{\vc}[1]{\textbf{#1}}
% real
\newcommand{\Real}[1]{{\Re \mit{e}\left\{{#1}\right\}}}
% imaginary
\newcommand{\Imag}[1]{{\Im \mit{m}\left\{{#1}\right\}}}
\newcommand{\mcal}[1]{\mathcal{#1}}
\newcommand{\bb}[1]{\mathbb{#1}}
\newcommand{\N}{\mathbb{N}}
\newcommand{\Z}{\mathbb{Z}}
\newcommand{\Q}{\mathbb{Q}}
\newcommand{\R}{\mathbb{R}}
\newcommand{\C}{\mathbb{C}}
\newcommand{\I}{\mathbb{I}}
\newcommand{\Th}[1]{\mathop\mathrm{Th(#1)}}
\newcommand{\intersect}{\cap}
\newcommand{\union}{\cup}
\newcommand{\intersectop}{\bigcap}
\newcommand{\unionop}{\bigcup}
\newcommand{\setdiff}{\backslash}
\newcommand{\iso}{\cong}
\newcommand{\aut}[1]{\mathop{\mathrm{Aut(#1)}}}
\newcommand{\inn}[1]{\mathop{\mathrm{Inn(#1)}}}
\newcommand{\Ann}[1]{\mathop{\mathrm{Ann(#1)}}}
\newcommand{\dom}[1]{\mathop{\mathrm{dom} #1}}
\newcommand{\cod}[1]{\mathop{\mathrm{cod} #1}}
\newcommand{\id}{\mathrm{id}}
\newcommand{\st}{\ |\ }
\newcommand{\mbf}[1]{\mathbf{#1}}
\newcommand{\enclose}[1]{\left\langle #1\right\rangle}
\newcommand{\lr}[1]{\left( #1\right)}
\newcommand{\lrsq}[1]{\left[ #1\right]}
\newcommand{\op}{\mathrm{op}}
\newcommand{\dotarr}{\dot{\rightarrow}}
%Category Names:
\newcommand{\Grp}{\mathbf{Grp}}
\newcommand{\Ab}{\mathbf{Ab}}
\newcommand{\Set}{\mathbf{Set}}
\newcommand{\Matr}{\mathbf{Matr}}
\newcommand{\IntDom}{\mathbf{IntDom}}
\newcommand{\Field}{\mathbf{Field}}
\newcommand{\Vect}{\mathbf{Vect}}
\newcommand{\thm}[1]{\begin{theorem} #1 \end{theorem}}
\newcommand{\clm}[1]{\begin{claim} #1 \end{claim}}
\newcommand{\cor}[1]{\begin{corollary} #1 \end{corollary}}
\newcommand{\ex}[1]{\begin{example} #1 \end{example}}
\newcommand{\prf}[1]{\begin{proof} #1 \end{proof}}
\newcommand{\prbm}[1]{\begin{problem} #1 \end{problem}}
\newcommand{\soln}[1]{\begin{solution} #1 \end{solution}}
\newcommand{\rmk}[1]{\begin{remark} #1 \end{remark}}
\newcommand{\defn}[1]{\begin{definition} #1 \end{definition}}
\newcommand{\ifff}{\LeftRightArrow}
<!-- For the set of reals and integers -->
\newcommand{\rr}{\R}
\newcommand{\reals}{\R}
\newcommand{\ii}{\Z}
\newcommand{\cc}{\C}
\newcommand{\nn}{\N}
\newcommand{\nats}{\N}
<!-- For terms being indexed.
Puts them in standard font face and creates an index entry.
arg: The term being defined.
\newcommand{\pointer}[1]{#1\index{#1}} -->
<!-- For bold terms to be index, but defined elsewhere
Puts them in bold face and creates an index entry.
arg: The term being defined. -->
\newcommand{\strong}[1]{\textbf{#1}}
<!-- For set names.
Puts them in italics. In math mode, yields decent spacing.
arg: The name of the set. -->
\newcommand{\set}[1]{\textit{#1}}
$$
\documentclass{article}
\usepackage{latex2html5}
\usepackage{writer}
\usepackage{auto-pst-pdf}
\usepackage{pstricks-add}
\usepackage{graphicx}
\usepackage{hyperref}
\definecolor{lightblue}{rgb}{0.0,0.24313725490196078,1.0}
\title{{\Huge The Art of Digital Publishing} \\ {\Large A foundation of combined standards to support the future of publishing}}
\author{
\textbf{Dan Lynch} \\
UC Berkeley \\
EECS Department \\
D@nLynch.com \\
}
\date{1st of December 2012}
\begin{document}
\maketitle
\newpage
\tableofcontents
\newpage
\begin{abstract}
Scientific content increasingly relies on the presentation and authoring of complex multimedia diagrams and figures, sometimes interactive, to convey information in a non-textual way. Wikis and user-generated hyper-linked content have both been very successful in the case for text---this is what we aim to do for mathematical diagrams. Many professors in higher education who write textbooks know TeX, however, they don't often know how to program the Web. The future of building interactive user interfaces should lie not in the hands of programmers, but in the hands of the expert of a given field---the goal of this project is to supply math, physics, and engineering professors with a platform to express mathematical concepts to students to provide immersive learning environments. Ideally, this projects serves twofold: First, in closing the gap for non-web-technical authors to express ideas and concepts through Web technology without the knowledge of coding or user interface design, by mapping a typesetting language to interactive programming. Second, in providing deep, educational experiences for our youth to engage more in the sciences, and begin to use exploration and creativity in learning through interactive textbooks. The loose structure and nature of user interface design poses a problem for documenting science and related interfaces in a consistent manner. TeX provides us with some "laws" to obey in order to design the output of a text and graphical language around. Hence, we can attempt to create a synthesis of a structured user interface specification (TeX) and a structured functional specification (HTML5) to provide a publishing platform for the current and next generation. The Art is where we can blend these two standards bodies; higher levels of abstraction allow people to express their ideas without having to worry about the mechanisms by which the technology is rendering their works. It is in these environments when people can express themselves freely.
\end{abstract}
\newpage
\section{Preface}
\subsection{A note about this transmission of information}
This paper serves as the documentation, philosophy, and implementation of a web-based typesetting platform called \LaTeX$2$HTML$5$
\begin{interactive}
It's hard to say whether this is a document, paper, or web page because it's intended to be viewed on either paper or a computer, on a phone or a tablet. The concept is to communicate an idea, and to transmit information to the reader in a consistent manner, no matter which method the reader decides to consume that information (although parts are more interactive online).
\end{interactive}
\begin{print}
It's hard to say whether this is a document, paper, or web page because it's intended to be viewed on either paper or a computer, on a phone or a tablet. The concept is to communicate an idea, and to transmit information to the reader in a consistent manner, no matter which method the reader decides to consume that information (although parts are more interactive online).
You seem to be reading the \emph{static} version of this text. You can access the online version here (where most of the diagrams are interactive): https://mathapedia.com/books/31
\end{print}
\begin{interactive}
\img{/app/assets/paper/results.png}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics[width=400pt]{images/results.ps}
\end{center}
\end{print}
It's almost impossible to go any further without the mention of Donald Knuth, arguably one of the most influential computer scientists alive today. Knuth created \TeX, which is the {\it standard de facto} for academic writing. In was using this typesetting language in which he wrote ``The Art of Computer Programming'', which is one of the largest texts on computer science available. In one of the many volumes, he writes:
\begin{quotation}
Several programs that implement the algorithms in this book can be found on the diskette that comes with the book, as well as on the WorldWideWeb. The programs are two kinds: some Maple programs and some Mathematica programs. It should be noted at once that both the individual programs and the packages in their entirety will continue to evolve after the publication of this book \cite[205]{artofcomp}.
\end{quotation}
The dichotomy of the function of an algorithm and its description interesting---the reader must go to a web site and download the functionality after reading. In today's world, we don't need diskettes with programs, we have the ability to run interpreted programs in a web browser---today, a digital version of his book could now implement the algorithms described, and perhaps as mentioned, this could be next next evolution of his text.
In this paper I present a web-based typesetting language for building interactive mathematical user interfaces and learning environments using \TeX\ as the syntax for authorship.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{Introduction}
\subsection{Education}
Technology is growing faster than the rate at which the educational system is evolving, and the distance between these two vital functions of our society needs to be reduced. Utilizing computer science we can provide optimized learning methods to match this proliferating technology and accelerate education.
Gleaning knowledge from aggregate arts and sciences, the creation of supplemental learning tools, used by teachers and students, through poly-sensory experiences, can build solid foundations as a precursor to our future's successful and meaningful experiences in higher education.
New learning methods will accelerate education in a way that provides higher standards so that it catches up to technology. These new horizons will empower the future pioneers of science to explore new frontiers progressing from the technology revolution and information exchange era we live in today.
Imagine if middle school students were introduced to calculus concepts through interactive dimensions that provide an instantaneous understanding of a derivative or integral:
\begin{print}
\begin{center}
\begin{pspicture}(-4,-3)(4,6)
\rput(0,4){$f'(x) = \frac{d}{dx}f(x)$}
\psplot[algebraic,linewidth=2pt]{-4}{4}{x^2}
\psplot[algebraic,linecolor=blue,linewidth=3pt]{-4}{4}{4*(x-0.1)*0.1}
\psline{->}(-4,0)(4,0)
\end{pspicture}
\end{center}
\end{print}
\begin{interactive}
\begin{pspicture}(-4,-3)(4,6)
\uservariable{alpha}(0.1,0){x}
\rput(0,4){$f'(x) = \frac{d}{dx}f(x)$}
\psplot[algebraic,linewidth=2pt]{-4}{4}{pow(x,2)}
\psplot[algebraic,linecolor=blue,linewidth=3]{-4}{4}{4*(x-alpha)*alpha}
\psline{->}(-4,0)(4,0)
\end{pspicture}
\end{interactive}
\begin{interactive}
\begin{center}
\psset{unit=1cm}
\begin{pspicture}(-8,-2)(8,2)
\uservariable{alpha}(0.1,0){x}
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-6.28}{alpha}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-6.2831}{6.2831}{sin(x)}
\psline(-6.6831853, 0)(6.6831853, 0)
% begin x-axis labels:
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\rput(-6.2831853, -0.3){$-2\pi$}
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\rput(-4.712388975, -0.3){$-\frac{3\pi}{2}$}
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\rput(-3.14159265, -0.3){$-\pi$}
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\rput(-1.570796325, -0.3){$-\frac{\pi}{2}$}
\psline(0, -0.1)(0, 0.1)
\rput(0, -0.3){$0$}
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\rput(1.570796325, -0.3){$\frac{\pi}{2}$}
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\rput(3.14159265, -0.3){$\pi$}
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\rput(4.712388975, -0.3){$\frac{3\pi}{2}$}
\psline(6.2831853, -0.1)(6.2831853, 0.1)
\rput(6.2831853, -0.3){$2\pi$}
\end{pspicture}
\end{center}
\end{interactive}
\begin{print}
\begin{center}
\psset{unit=1cm}
\begin{pspicture}(-8,-2)(8,2)
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-6.28}{3.14}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-6.2831}{6.2831}{sin(x)}
\psline(-6.6831853, 0)(6.6831853, 0)
% begin x-axis labels:
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\rput(-6.2831853, -0.3){$-2\pi$}
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\rput(-4.712388975, -0.3){$-\frac{3\pi}{2}$}
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\rput(-3.14159265, -0.3){$-\pi$}
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\rput(-1.570796325, -0.3){$-\frac{\pi}{2}$}
\psline(0, -0.1)(0, 0.1)
\rput(0, -0.3){$0$}
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\rput(1.570796325, -0.3){$\frac{\pi}{2}$}
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\rput(3.14159265, -0.3){$\pi$}
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\rput(4.712388975, -0.3){$\frac{3\pi}{2}$}
\psline(6.2831853, -0.1)(6.2831853, 0.1)
\rput(6.2831853, -0.3){$2\pi$}
\end{pspicture}
\end{center}
\end{print}
This changes the meaning of what $ \frac{d}{dx}f(x)$ and $\int_a^b f(x) dx$ mean to a student, and these neurological footprints in our youth can be beneficial to our future. This ingrained solid foundation will allow for the affirmation of knowledge when it is learned in higher education, activating and reinforcing neurological connections, as opposed to learning important information for the first time; this type of preparation will metamorphose education into an edifying enlightenment.
Ideally, this projects serves twofold: First, in closing the gap for non-web-technical authors to express ideas and concepts through Web technology without the knowledge of coding or user interface design by mapping a typesetting language to interactive programming. Second, in providing deep, educational experiences for our youth to engage more in the sciences, and begin to use exploration and creativity in learning through interactive textbooks.
\subsection{Publishing and Standards}
A huge problem an author is faced with upon writing a digital textbook these days, is that in creating such digital learning content, there is no standard format. There exists not a cooperation, but a competition of numerous attempts at forming ``eBook'' and digital textbook formats by myriad corporations. Are today's authors equipped for the numerous publishing platforms?
I argue we should throw out all this noise and use what we already have. There exists a standard, in fact two---HTML5 and \TeX, and they aren't going anywhere. In fact, both happen to be the standard for their respective fields (Web and Academics).
Just as music notation is what enables an orchestra to play in a synchronized manner, standards can enable us to document science in a harmonious way.
HTML5 has proven itself as evolving from connected static documents to a viable computing platform for interactive applications and resources. \TeX\ has also lasted the last 30+ years as the standard for publishing academic text.
Many professors in higher education who write textbooks know \TeX, however, they don't often know how to program the Web. The future of building interactive user interfaces should lie not in the hands of programmers, but in the hands of the expert of a given field---the goal of this project is to supply math, physics, and engineering professors with a platform to express mathematical concepts to students to provide immersive learning environments.
I claim we can use existing standards to achieve the rapid adoption of utilizing technology to help education and solve the race to finding a viable digital publishing format.
\subsection{The Art of Communicating Ideas}
It's hard to see how the divergence of publishing formats affects us because authors represent a small percentage of our population. Science is good for society, and people need to share information---organizing education and learning can improve the articulation of scientific ideas. Can authors fully express ideas and concepts through existing publishing channels?
\begin{quotation}
In order to understand the phenomena surrounding a new technology, we must open the question of {\it design}---the interaction between understanding and creation. In speaking here of design, we are not restricting our concert to the methodology of conscious design. We address the broader question of how society engenders inventions whose existence in turn alters that society \cite[4]{understanding}
\end{quotation}
A new technology for publishing should facilitate {\it the transmission of ideas}---a professor doesn't just write a book, they are impacting many students across the globe.
Overtime, through {\it increased levels of abstraction}, like \TeX\ $\rightarrow$ \LaTeX, authors have been able to publish more freely, because they can adopt and learn the standard typesetting languages. The distance between their intentions and articulations remains somewhat small. However, if an author must use a new interface for publishing, this increases the distance between the expression of their ideas and the actual concepts at hand.
The hope is that by accelerating the authorship of academic work digitally, as well as increasing the interactivity and immersion of the resulting documents, both publishing and learning are positively influenced.
\subsection{The Web and Typesetting}
Many attempts and standards have been introduced to standardize the transmission and display of scientific text, formulae, and diagrams across the web. These include, but are not limited to MathML, SVG, and the canvas HTML5 element. The issue with these is that although they are supported on most browsers, the creation of content within these constructs can be verbose or require programming.
New tools have produced great value, namely MathJAX, which has solved rendering of mathematical formulae online. However, MathJAX is {\it only} focused on the math, not typesetting or generating graphics.
Tools such as {\tt latex2html} have been released for converting typeset documents to HTML, however, they require a terminal, are not real-time, and do not render interactive graphics and diagrams. This solution also generates several static pages on a user's system, which still requires an upload for them to be made useful.
Since the successes of typesetting and word-processing, authoring the web through various forms of HTML has grown into myriad expressions. Today thousands of web frameworks exist, at a time where the common Web browser is a viable computing platform, and through programming we can provide real-time authoring of interactive mathematics across multiple devices with poly-sensory interactivity.
The Web has an infinite number of expressions, although it has strict functional specification. The general idea of this project is to combine two standards; \LaTeX\ for how things should ``look'', and HTML5 as the standards for how things should ``function''.
The gap that should be filled is simple. Static HTML pages are not enough---diagrams need to be generated, and if interactivity is required, then dynamic computations need to be made, which requires a dynamic language such as JavaScript. However, the authorship of HTML and JavaScript is not easy, thus using an existing standard de facto language like \LaTeX\ for generating interactive documents can optimize the authorship of interactive material to help accelerate education.
Donald Knuth, who was the first man to call programming an Art, successfully paved the way for us to document science in a consistent and beautiful way through \TeX. His creation was the result of frustration in producing mathematical books digitally, and to enable the authorship of {\bf beautiful} books, ``Gentle Reader: This is a handbook about TeX, a new typesetting system intended for the creation of beautiful books---and especially for books that contain a lot of mathematics'' \cite[5]{texbook}.
This text is about LaTeX2HTML5, a new web-based typesetting system intended for creation of beautiful interactive books---and especially for books that contain of lot of mathematics. Donald Knuth, in his book ``The Art of Computer Programming'', said: ``Science is what we understand well enough to explain to a computer. Art is everything else we do''. It is the Art that allows us to bridge the gap for those that are interested, and that is the expression at which this project strives.
\begin{interactive}
\img{/app/assets/paper/devices.jpg}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics[width=400pt]{images/devices.ps}
\end{center}
\end{print}
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{The Evolution of Ideas and Text}
\subsection{From Ideograms to the Alphabet}
We've been on the planet Earth thousands upon thousands of years with the ability and need to communicate. Spoken word eventually became written word, and the genealogy of letters, text, and publishing can show us how the transmission of information has shaped our lives and launched publishing history down its current path.
Using text and images dates back to our primates who painted on caves---hieroglyphs were the standard for ``writing'' for over 3,000 years during the fourth millennium BC, which marked the beginning age of writing \cite[12]{hieroglyphs}. The first systems of picture writing date back to ages ``prior even to the taming of any domestic animal, or the cultivation of cereals; earler, so far as we know, than the construction of any kind of human habitation'' \cite[17]{alphabet}.
We know there are at least five systems of ``picture writing'' that were each formed independently of one another, the Egyptian, the Cuneiform, the Chinese, the Mexican, and the Hittite \cite[14]{alphabet}. Through studying the history of these systems, we have seem the development of alphabets, starting from graphics that represent ideas and concepts called an ``ideogram'':
\begin{quotation}
The history of the cuneiform writing also illustrates with great completeness the successive stages through which writing tends to pass; the primitive ideograms developing themselves, through verbal phonograms, into syllabic signs, until finally the alphabetic stage is reached \cite[40]{alphabet}
\end{quotation}
This paved the way for us to have a standard for communication as a civilization---this event spawned a new conduit for ideas.
\subsection{Age of Scribes to the Printing Press}
Before Johannes Gutenberg's invention of the printing press in the late fifteenth century, books were created during the age of the scribes, where people copied books manually by hand, making it slow and expensive \cite[4]{printing}. The shift from script to print was one of the most important events of our civilization \cite[5]{press}.
Gutenberg's idea was to combine \emph{two existing technologies}, printing and the press. Printing was done using carved wooden blocks, and the press was used to crush grapes to extract juice \cite[4]{printing}. Another advancement was to use pieces of metal instead of carved wooden blocks so they could be continued to be used \cite[4]{printing}.
\begin{interactive}
\img{/app/assets/paper/press.jpg}
\end{interactive}
\begin{print}
\img{images/press.ps}
\end{print}
Gutenberg had spent over 20 years and his life savings into building the printing press \cite[10]{gutenberg}, and never received a penny for his invention. It wasn't until the $16^{th}$ century that he was given credit as the inventor \cite[15]{gutenberg}, however, his impact on the world has not gone unseen since. In 1453, Gutenberg began working on a three volume bible. At that time, one bible would take four years to complete, but with the advent of the printing press, it could be produced 90 times faster. This meant that books were not only for the wealthy, but for everyone, which ultimately began the movement for the democratization of knowledge \cite[5]{printing}.
``After the advent of printing however, the transmission of written information became much more efficient. It was not only the craftsman outside universities who profited from the new opportunities to teach himself. Of equal importance was the chance extended to bright undergraduates to reach beyond their teachers' grasp'' \cite[66]{press}.
\subsection{Evolution of Text and Literacy}
People became literate with the help of the alphabet and the printing press. One was a standard, the other was a process of dissemination. For the case of learning through text, alphabets and languages provide syntax and rules for the ways characters combine to map to ideas in the same way that more advanced systems of picture writing synthesized simple ideograms to facilitate transmission of more complex ideas.
Although intellectuals in $13^{th}$ century Europe had read Aristotle, Euclid, Ptolemy, Cicero, Galen, Hippocrates, it wasn't until the Protestant Reformation that was led by Martin Luther, when his translation of the New Testament when written in the vernacular in 1529. Books contained alphabet and syllable tables in the vernacular by the late $16^{th}$ century, with intention of enabling children to learn \cite[41]{literacy}.
The first press was established in the the mid-$17^{th}$ century in Cambridge, Massachusetts, and textbooks were published within the original Colonies. The American textbook today is a product of the later half of the $19^{th}$ century when the school was a profitable market and the transportation infrastructure allowed it \cite[41]{literacy}. The authorship of textbooks became more important over time as school and literacy popularized, and more children and people were learning, which further increased the amount of educated people in the population \cite[9]{literacy}.
\subsection{The Information Age}
As society's aggregate technological knowledge progressed, developments in science enabled the production of complex systems, which allowed for the advancement of hardware and software in the 1930's through the 1950's. This created a foundation for the formation of the personal computer in the 1960's and 1970's.
\begin{quotation}
The next revolution in the mass production of machines was software. The late 1970s saw the rise of the personal computer, a device capable of behaving as any machine—typewriter, adding machine, filing cabinet, arcade game---when given the right instructions. Manufacturing a ``machine'' was now just a matter of printing its instructions onto a disk, and production costs plummeted \cite[42]{victor}.
\end{quotation}
What started out as a mission to seek a military defense system, founded what is known as computer graphics and the Internet today. Around the same time, the aerospace industry developed the first plotting software and CAD system, and academia created user interfaces to input graphical data into computers. Eventually, technology advanced, and software that at one point was proprietary to engineering firms and the military, became available to anyone with a personal computer.
\subsection{Computer Graphics and Networks}
The design of systems has been greatly influenced by computers. For instance, the development of automated design and drafting came about in the 1950's and 1960's within the military and US Air Force. In the search for new defense systems, an innovative system was created that used a visual display to transmit vital, spatial information regarding a possible enemy threat. Since then the technology has continuously evolved at an accelerated rate, and spawned the fields of Computer Graphics (CG) and Computer-aided Design (CAD). Computer-aided manufacturing (CAM) was a well-developed industry which used computers to aid in production of metal parts. CAD was not more than an idea until CAM catalyzed its existence. Although CAD systems had been developed, graphical input data was cumbersome until Ivan Sutherland's sketchpad was developed in academia. These systems were almost all proprietary until AutoDesk brought CAD to the home market and onto the personal computer, streamlining the design process.
Halfway through the $20^{th}$ century, the United States was faced with two major international struggles: in June of 1948 the Berlin Blockade occurred, a major crisis of the Cold War; just two years later, the Korean war broke out in June of 1950. During these times it became imperative for the US to build an efficient military defense \cite[1]{sage}. A new type of defense gave promise on April $20^{th}$, 1951, when a team of electrical engineers from MIT and radar engineers from Air Force's Cambridge Research Laboratories demonstrated how computers could be used to defend the continent from an airborne attack:
\begin{quotation}
For the first time, radar data on an approaching ``enemy'' aircraft had been sent over telephone lines and entered into an electronic digital computer, which had almost instantaneously calculated and posted instructions directing the pilot of a ``defending'' aircraft to his target \cite[1]{sage}.
\end{quotation}
\begin{interactive}
\img{/app/assets/paper/ibm-sage.jpg}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics{images/sage.ps} \\
\addcontentsline{lof}{figure}{The Semi-Automatic Ground Environment (SAGE) computer was used by the US Air Force.}
The Semi-Automatic Ground Environment (SAGE) computer was used by the US Air Force. \\
(source: http://www.computermuseum.li/Testpage/IBM-SAGE-computer.gif)
\end{center}
\end{print}
This system was the world's first to use a computer to generate graphics. The US Air Force used this command and control system known as Semi-Automatic Ground Environment (SAGE) to display radar data and relevant information on an interactive \emph{cathode-ray tube}. Information that traveled over a network between computers was then processed in real-time, enabling Air Force personnel to detect intruding aircraft and respond accordingly \cite[1]{bozdoc}. SAGE was a system that later spawned what became the foundation for the rapidly-growing fields of computer networking and computer graphics.
\subsection{Computer-Aided Design}
The Boeing 707 aircraft began flight in 1954, and by 1958 flew commercially in the airline service industry, which then helped Boeing to design its now famous 727 aircraft. This meant that in succeeding years more and more industries would require large amounts of computing power \cite[130]{sanders}. During that time the industry turned from using computers explicitly for design, to using them for numerical calculations and in manufacturing. Then in 1956, the Boeing Aerospace department acquired its first Numerical Computing (NC) machines, which where then used to produce fairly complex aluminum parts. By 1960, for the aerospace industry, these NC machines were ``a part of life'' \cite[131]{sanders}.
At this time, the industrialized world was acquiring large super-computers, even though there was not a way to generate \emph{renderings}. Then an engineer named of Norman Sanders who was at Boeing in 1959 describes how renderings were created: ``All design drawings were made by hand; the definition of every motorcar, aircraft, ship, and mousetrap consisted of lines drawn on paper'' \cite[129]{sanders}. This meant that with every drawing created by hand, even minor changes incurred labor-intensive re-drawing; some changes required that a print be completely re-drawn from scratch. At this time computers were used only as an intermediary doing calculations for an engineer which were then drafted by hand.
Input was entered into computers via punch cards, and then at night would generate output via a printer. This data could then be used by an engineer to create a draft, a procedure that had obvious inefficiencies: ``[t]here were cases of engineers spending three months drawing curves resulting from a single night's computer run'' \cite[130]{sanders}. This cumbersome method compelled Sanders to question whether or not computers could perform the task of drawing continuous lines and curves. But soon, with the help of Art Dietrich, Boeing sold their first software used to generate computer plots with printers. These plots, however, were far from accurate, and the Boeing drafting department refused to use them for design projects. To make matters worse, at this time Boeing would not invest any money in this type of research and development, because it wasn't efficient enough for their own use. In addition, no independent companies would engage in this venture because no market existed for it \cite[132]{sanders}. However, the world of \emph{computer-aided manufacturing} (CAM) came to the rescue. Computers had already been used to operate milling machines that accurately cut metal in three dimensions. After a stroke of insight, in 1961, a Boeing design team replaced the cutter head of these machines with a small diamond scribe, which allowed these machines to plot in two dimensions on aluminum sheets. And ``[p]resto! The computer had drawn the world's first accurate lines by machine'' \cite[132]{sanders}. However, as in any major engineering firm, the accuracy of this system required proof. So, in order to prove the competency of these drawings for the design of the Boeing 727, the project manager required that Norman's team generate 19 renderings of the Boeing 707's wing using this technology:
\begin{quotation}
We trucked the inscribed sheets of aluminum from the factory to the engineering building and for a month or so engineers on their hands and knees examined the lines with microscopes ... The chief engineer stood on his feet and said simply that the design lines that we had developed had been under the microscope for several weeks and were the most accurate lines ever drawn---by anybody, anywhere, at any time ... That is the closest I believe anyone every came to the birth of \emph{Computer-aided Design} \cite[132]{sanders}.
\end{quotation}
The success of this technology bound the Boeing 727 project to the computer not only for the manufacturing process, but for the design process as well: ``We computed the definition of the outer surface of the 727 and stored it inside the computer, making all recourse to the definition via a computer run as opposed to an engineer looking at drawings using a magnifying glass'' \cite[130]{sanders}. To confirm the value of these developments, the Boeing 727 was completed on time and on budget, which ``would not have happened had we not used CAD'' \cite[133]{sanders}.
\subsection{Human Computer Interaction}
Despite these breakthroughs, the industry had still not developed a practical means to input graphics, or any sort of graphical communication system for designing with computers. Then, in 1960, Ivan Sutherland used the TX-2 computer produced at MIT's Lincoln Laboratory to produce a system known as ``Sketchpad'', which is considered to be the first step towards the creation of the CAD industry \cite[1]{bozdoc}.
This system was designed to be a ``man-machine graphical communication system'' that eliminates cumbersome input methods, such as manually typing coordinates and commands \cite[501]{sutherland}. Instead of a complex, typed syntax, an intuitive ``light pen'' allows a user to interact immediately with Sketchpad by touching the pen to a monitor. Ronald Baecker recently wrote an article on human-computer interaction, and discusses the influential role that Sketchpad system had in the 1960's: ``Sketchpad demonstrated the potential for effective computer-aided sketching and design through innovative concepts'' \cite[23]{baecker}. This potential inspired many other pioneering ideas within interactive computer graphics, and provided a working prototype for CAD applications.
\begin{interactive}
\img{/app/assets/paper/sutherland.jpg}
Ivan Sutherland using the TX-2 computer to demonstrate ``Sketchpad''
\end{interactive}
\begin{print}
\begin{center}
\includegraphics{images/sutherland.ps} \\
\addcontentsline{lof}{figure}{Ivan Sutherland using the TX-2 computer to demonstrate ``Sketchpad''.}
Ivan Sutherland using the TX-2 computer to demonstrate ``Sketchpad''. \\
(source: http://design.osu.edu/carlson/history/images/ivan-sutherland.jpg)
\end{center}
\end{print}
\subsection{The Internet}
Joseph Carl Robnett Licklider, was a visionary and Internet pioneer whose contributions to computer science are great---a computer scientist from MIT who worked on SAGE, and later saw the value in connecting various communities together \cite[1]{bisson}, is known for contributing his ideas to the formation of the Internet \cite[1]{pioneers}.
At a time where computers were run using holes in punch cards, ``Lick'', as he asked to be called \cite[5]{lickliderpdf}, had a better idea for how computers should work. In 1960 he wrote ``Man-Computer Symbiosis'', and talked about real-time communication between man and machine, and also modern topics that still remain somewhat unsolved such as speech recognition---he was ahead of his time.
It was in 1962 when J.C.R. was asked to take command of the Behavioral Sciences and Command and Control departments of the Pentagon's Advanced Research Projects Agency (ARPA) \cite[1]{pioneers}, where his role was to manage a department to fund researchers to build new technology and teams. Lick had at his disposal a funding amount that at that time was greater than any other funded computer science projects \cite[5]{lickliderpdf}.
Although Lick left ARPA, where he coined the name ``ARPANET'' \cite[1]{pioneers}, it was shortly after he left when ARPANET connected four computers together in 1969 \cite[1]{bisson}. The chief architect of ARPANET, Larry Roberts, years later claimed that Lick was responsible for the ideas of the Internet, even though Lick wasn't present at ARPANET during the time it was implemented:
\begin{quotation}
The vision was really Lick's originally. None of us can really claim to have seen that before him nor{can} anybody in the world. Lick saw this vision in the early sixties. He didn't have a clue how to build it. He didn't have any idea how to make this happen. But he knew it was important, so he sat down with me and really convinced me that it was important and convinced me into making it happen \cite[1]{pioneers}.
\end{quotation}
It is clear that Lick was an Internet Visionary. Written in 1968, ``The Computer as a Communication Device'' was another influential paper that Lick wrote a paper that envisioned the future of digital communication, in which he envisioned ``[i]n a few years, men will be able to communicate more effectively through a machine than face to face'' \cite[26]{licklider2}. Lick also wrote about shared computer programs and hinted at what today is know as the ``cloud'', and even online communities: ``[b]ut let us be optimistic. What will on-line interactive communities be like?'' \cite[37]{licklider2}.
\subsection{TCP/IP}
Before the World Wide Web came into existence, the Internet needed a way for computers to speak to one another. This is where Vinton Cerf, known to some as ``the father of the Internet'' \cite[1]{cerf}, brought us {\it Transmission Control Protocol} (TCP) and {\it Internet Protocol} (IP), the standardized protocols that enables any two computers to communicate.
It was October 29th, 1969 when the first transmission was sent across the ARPANET between Stanford and UCLA \cite[1]{cerf}, and by December that year the first four packet-switching nodes were up and running. The four nodes were located at Stanford Research Institute, UCLA, UCSB, and University of Utah \cite[1]{cerf}.
Robert Kahn came to UCLA to help test the ARPANET, and with Cerf found that the ARPANET needed to handle transmission failures. Kahn specifically ``foresaw the need to link together packet-switched networks with different designs so that any computers could communicate freely, no matter what the communication path'' \cite[1]{cerf}.
Then by 1973, Cerf and Kahn came up with the basis for transmission control protocol (TCP), and in May of 1974, they co-authored a paper ``A Protocol For Packet Network Intercommunication'', describing the protocol, which the basis our our Internet today \cite[1]{cerf}:
\begin{quotation}
In particular, we have described a simple but very powerful and flexible protocol which provides for variation in individual network packet sizes, transmission failures, sequencing, flow control, and the creation and destruction of process-to-process associations. \cite[647]{cerfkahn}.
\end{quotation}
Kahn and Cerf created the protocol on top of the technology that had been created at ARPANET. Their technology provided a platform upon which any computers that ran on different software could communicate. It also provided a mechanism to handle failures, which is extremely important due to instabile nature of computer networks. The point here is that they created a protocol, or on some level, a standard for computers to speak to each other. It is the standard that enabled the World Wide Web possible.
\subsection{HTTP/HTML}
After TCP/IP provided a standardized protocol for computers to communicate, {\it HyperText Markup Language} (HTML) provided a language to describe documents that can be transported via {\it HyperText Transfer Protocol} (HTTP). The beauty of these documents was that they could link to one another \cite[1]{pioneersberners}.
\begin{quotation}
Neither the ARPANET nor the Internet and its constituent networks were purpose-built for particular applications. This design philosophy has allowed these systems to support a broad array of new techniques and applications including packetized voice, streaming video and, of course, the myriad applications built atop the World Wide Web, under the leadership of Tim Berners-Lee, first at CERN, the European particle-physics laboratory near Geneva, now at the Massachusetts Institute of Technology in Cambridge \cite[1]{cerf}.
\end{quotation}
Tim Berners-Lee had been contracted to work at CERN, a particle physics lab. There he had created a program that used HyperText ``for his personal use to help him remember connections between various people and projects at the lab'' \cite[1]{pioneersberners}.
A few years later, Tim took two {\it existing} technologies, HyperText and TCP/IP, and combined them to provide a way for people to share documents that can link to one another. He built what we know today as a web browser and a web server, which communicate via HTTP, which is the standard protocol for the Web today. This technology enabled people to share documents that could connect to one other. The first web browser he called ``WorldWideWeb'' \cite[1]{pioneersberners}.
\subsection{Web Browsers}
Shortly after the first text-based browsers were in use, in 1992 Marc Andreesen and his co-worker Eric Bina started to build a browser called ``MOSAIC''. This was the first popular web browser, and a major factor was that it could display images inside of a Web page whereas other browsers could only show images as a separate file. \cite[1]{pioneersmarc}.
\begin{interactive}
\img{/app/assets/paper/mosaic-1993.jpg}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics{images/mosaic.ps} \\
\addcontentsline{lof}{figure}{MOSAIC was the first web browser to embed images inside of documents.}
MOSAIC was the first web browser to embed images inside of documents. \\
(source: http://www.cedmagic.com/history/mosaic-1993.jpg)
\end{center}
\end{print}
This development led to what became known as ``Netscape'', which became the most widely used Web browser of its time. \cite[1]{pioneersmarc}. Within a matter of months, millions of people around the world began to use the Internet.
\subsection{Evolution}
As a civilization, the development of language and alphabets allowed us to communicate. After the printing press, a revolution in mass production of media and books advanced our education system and drove literacy rates up. As our accomplishments in technology expanded, the information age was born, and new digital tools accelerated the fields of design and engineering which impels great scientific fascination in its own right. Computer-aided design allows us to build the homes and communities in which we live. Computer graphics enabled us to have a view into computer processes that represent things in the physical world. HCI has provided us with many tools and perspectives for thinking about how we should interact with computers. We've reached the point in our society where the Web is an integral part of many peoples everyday lives.
Each of these events required adopting a system, or a definitive and agreed upon standard to enable such advancement. Combinations of ideograms progressed into alphabets, which formed from utilizing repeating characters which helped spawn languages. The printing press was built by combining two existing processes used successfully for other means. The Internet and family of technologies as we know it today is a manifestation of a confluence of standards: TCP/IP provided a language for computers to speak. HTML provided a way for documents to speak to one another, and HTTP provided a way for a browser to communicate with a server. Each of these technologies has played a role in providing us the technological infrastructure of computers and systems as we know it today.
The various parts of history in computer science seem to converge on the presumption that utilizing standards for communication systems does indeed have positive consequences for the people utilizing those systems.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{The Human Element}
\subsection{What Humans do with Computers}
We simply cannot doubt our consciousness. We know qualia---internally accessed qualities that make up the phenomenal character of experience. Understanding the nature of consciousness is the Philosophy of Mind's underlying impetus for sagacious study of unanswered questions. At the crux of these questions lies the Mind-Body problem: What is the relation between the mind and the body? Is our existence completely physical, completely mental, or a confluence of both realms?
The personal computer was made with the vision of extending and improving the human mind and human condition: ``the ideal of the then-hypothetical personal computer was a brain supplement, enhancing human memory and amplifying human reasoning'' \cite[7]{victor}. If computers can bestow such raw augmentation such that software we write can act as extensions of our minds, then code is a manifestation of ideas that can interact!
\begin{quotation}
One of the major themes of the past century has been the growing replacement of human thought by computer programs. Whole areas of business, scientific, medical, and governmental activities are now computerized, including sectors that we humans had thought belonged exclusively to us. \cite[13]{artofcomp}.
\end{quotation}
Dr. Knuth delineates the fact that our lives are becoming enveloped by technology. Undoubtedly, you probably use a computer or smart device on a daily basis. Here are some thought-provoking questions for you:
\begin{enumerate}
\item does the computer expand your mind?
\item does the computer extend your physical life?
\end{enumerate}
Your consciousness is the sum of the neurological patterns and circuitry that embody the knowledge you've accumulated over your lifetime. Computers facilitate the transmission of ideas and concepts that are more complex than words. If software exists as representations of our consciousness, then through software we can express our ideas to others in ways that words may not have been able to otherwise.
\begin{quotation}
Every computer program is a model, hatched in the mind, of a real or mental process. These processes, arising from human experience and thought, are huge in number, intricate in detail, and at any time only partially understood. They are modeled to our permanent satisfaction rarely by our computer programs. Thus even though our programs are carefully handcrafted discrete collections of symbols, mosaics of interlocking functions, they continually evolve: we change them as our perception of the model deepens, enlarges, generalizes until the model ultimately attains a metastable place within still another model with which we struggle. The source of the exhilaration associated with computer programming is the continual unfolding within the mind and on the computer of mechanisms expressed as programs and the explosion of perception they generate. If art interprets our dreams, the computer executes them in the guise of programs! \cite[10]{sicp}
\end{quotation}
\subsection{The Human Visual System}
The transmission of information is not limited to text or language---the human visual system has capabilities that allow us to absorb large amounts of information in parallel \cite[9]{victor}. This channel for information thus implies that images are an important way for us to learn about our environment.
``To the thinking soul images serve as if they were contents of perception ... [t]hat is why the soul never thinks without an image'' \cite[60]{aristotle}. This quote from Aristotle describes a theory for how humans process information; simply, thought is not possible without images in his view. Humans harness an innate ability to process visual information---visualizations enable high-bandwidth communication of ideas between humans \cite[309]{kamat}.
Beyond images are \emph{diagrams}---a structured representation of a concept or object with graphical components laid out in a simplified way. The properties of diagrams present information in a manner that allows the human visual system to process the data in parallel \cite[2]{diagrams}. There exists systems where a diagram greatly improves transmission, or may even be required, for example, in representing a data structure in a programming language such as Lisp \cite[67]{diagrams}, or a the representation of a dynamical system in physics. To try and describe an environment diagram in a computer science class without a blackboard would be more than difficult.
\begin{quotation}
[P]roblem solvers in domains like physics and engineering make extensive use of diagrams, a form of pictures, in problem solving, and many distinguished scientists and mathematicians (e.g., Einstein, Hadamard) have denied that they ``think in words'' \cite[2]{10000words}
\end{quotation}
If images and diagrams are so important for the transmission of information, then it should be an important focus for the creation of academic works and documentation.
\subsection{Design of Learning Systems}
When approaching the design of a system designed to author content for learning, we have to best attempt to allow the author to freely express their ideas. The author should be able to communicate their vision with clarity and a way that allows for impact.
It has been shown that students learn more information through Web-based exercises than traditional tools \cite[12]{compare}, so how can we build these systems? Previous attempts at studying the design of learning systems has proven its difficulty:
\begin{quotation}
It is difficult to establish a framework to symbolize and express learning contents design because the design of the target phenomenon, i.e. learning, is so abstract \cite[294]{learning}.
\end{quotation}
Learning is too abstract! They key is to realize that \emph{it is too abstract to abstract} into a graphical user interface. The author of a learning system should use a generalized framework to support the authorship of learning concepts, and thus, a programming language, or language of the sorts should be used directly by the author.
Their conclusion is a result of the fact that what they developed was simply {\it their own expression} of a system to design learning systems. For the last century, teachers and books have proven to work as a ``learning environment''. Any graphical interface is simply creating more distance between the idea of what needs to be expressed and the actual articulation. The existing instructional systems are working---if it's not broken, don't fix it. Language is what teachers and academics should be using to create books.
\subsection{Some Principles of Design}
Perhaps we've all played the game ``telephone'' when we were kids. By the end of the transmission, the sentence was completely changed form its original form! When building a system to facilitate the conduction of ideas between humans, it is important to cause as little distortion as possible---an important concept in design known as \emph{direct manipulation} mitigates this issue.
\begin{quotation}
Here the critical issues involve minimizing the effort required to bridge the gulf between the user's goals and the way they must be specified to the system \cite[318]{directmanipulation}.
\end{quotation}
Imagine our world sometime in the future, and digital textbooks are ubiquitous. However, the mathematicians and physicists who author these textbooks must outsource the design of the diagrams and interactivity to programmers and engineers. Is it possible for the goals of the author to met with accuracy?
\begin{quotation}
Alternately, a designer can draw a series of mockups, snapshots of how the graphic should look for various data sets, and present these to an engineer along with a verbal description of what they mean. The engineer, who is skilled in manipulating textual abstractions, then implements the behavior with a programming language. This results in ridiculously large feedback loops—--seeing the effect of a change might take a day instead of a second. It involves coordination and communication between at least two people, and requires that the designer justify herself---she must convince the engineer and possibly layers of management that each change is worth the engineer’s time. This is no environment for creative exploration \cite[43]{victor}.
\end{quotation}
As Bret Victor's argument is laid out, this solution poses many issues, and ultimately people should render their own ideas if they want them to be expressed as close as possible to the representation in their minds.
\begin{quotation}
Historically, most interfaces have been built on the conversation metaphor. There is power in the abstractions that language provides (we discuss some of this later), but the implicit role of interface as an intermediary to a hidden world denies the user direct engagement with the objects of interest. Instead, the user is in direct contact with linguistic structures, structures that can be interpreted as referring to the objects of interest, but that are not those objects themselves. \cite[319]{directmanipulation}
\end{quotation}
A famous paper describes to main important points regarding {\it semantic distance} \cite[321]{directmanipulation}:
\begin{enumerate}
\item ``Is it possible to say what one wants to say in this language?''
\item ``Can the things of interest be said concisely?''
\end{enumerate}
Below are graphics re-interpreted and reproduced version of the graphic from the paper:
\begin{center}
\begin{pspicture}(0,-3.5)(8,2)
\psline{<->}(3.5,-2)(3.5,0)
\rput(3.5,0.5){Meaning of Expression}
\rput(3.5,-2.5){Form of Expression}
\rput(5.5,-0.75){Articulatory Distance}
\end{pspicture}
\end{center}
``Semantic distance concerns the relation of the meaning of an expression in the interface language to what the user wants to say'' \cite[321]{directmanipulation}. The diagram below describes \emph{semantic distance},
\begin{center}
\begin{pspicture}(-2,-2)(7,2)
\psline{<->}(1,0)(4,0)
\rput(6,0){Meaning of Expression}
\rput(-0.5,0){Goals}
\rput(2.5,-0.75){Semantic Distance}
\end{pspicture}
\end{center}
\begin{quotation}
The gulfs of execution and evaluation. Each gulf is unidirectional: The gulf of execution goes from goals to system state; the gulf of evaluation goes from system state to goals \cite[319]{directmanipulation}.
\end{quotation}
\begin{center}
\begin{pspicture}(0,0)(11,6)
\psline(0,0)(4,0)
\psline(0,1)(4,1)
\psline(4,0)(4,1)
\rput(1.1,2.4){Physical System}
\psline(4,1)(1,4)
\psline(1,4)(0,4)
\psline(10,0)(11,0)
\psline(10,0)(10,1)
\psline(10,1)(11,1)
\rput(9.4,2.5){Goals}
\pspolygon(10,1)(6,4)(6,3)(10,0)
\psline(6,4)(11,4)
\rput(4,3.25){Gulf of Execution}
\psline{<-}(2,3)(6.5,3)
\rput(5,1.75){Gulf of Evaluation}
\psline{->}(3.5,1.5)(8.5,1.5)
\end{pspicture}
\end{center}
We need to minimize the distance between the concepts in science and math and the articulation of these ideas, and especially these expressions on the Web and interactive devices. As technology advances, the technical knowledge required to produce interactivity is domain expertise to that of an engineer---to minimize the distance means enabling the professor or academician to express interactive ideas through an expressive language that is close as possible to the actual content they are describing.
\subsection{Ethnographic Design}
``[E]thnographers are interested in gaining an insider's view of a situation'' \cite[967]{ethnographic}. We can use \emph{ethnographic design} to build a system around the existing behavior of a ``user'', so that they can use the system in their natural state, and it adapts to their natural behavior.
When looking to build a digital system for expressing diagrams in the realm of mathematics, how can we adapt to their existing behavior? Given than the goal of this project is to support academics, using \TeX\ as a basis makes sense from an ethnographic standpoint, given that it has been around for over 30 years and still remains the {\it de facto standard}. Now, not all of the academic population knows \TeX, however, not all people are authors, either. It only takes one good book to propagate information to thousands of minds.
Going forward with a digital system using \TeX\ as its syntax, it's of paramount importance to understand not only the language of \TeX\ and its syntax, but also how it is structured. This can provide a technology that is engaging and productive for authors.
This system was genuinely designed to optimize development of structured documents in \TeX. The structure was developed from my experience in authoring \TeX. This project is just as much a project for other \TeX\ people as it is for myself. I strive to be a part of my community, and I am a strong believer that we can use technology for learning. For example, I wrote a database application during my undergraduate years at Berkeley to categorize and store my entire lecture notes and output a structured version in \TeX. I used this program to write a series of useful academic material---a 55-page reference manual for CS61A (The Structure and Interpretation of Programming Languages), a 35-page review for Math 55 (Discrete Mathematics), lecture notes for Math 54 (Linear Algebra), final and midterm papers for a series of liberal arts courses, and later used it to author over 300 pages of signal processing documentation for EE20 and EE120 in the EECS department.
Admittedly, much of this product was built while authoring textbooks within the platform itself (including \emph{this} text). It was a symbiotic process where I stuck to using \TeX\ as the standard, and even if it made programming more painful, I forced myself to implement it in a way that made sense for typesetting. In fact, the original diagrams were much more interactive in the Objective-C and JavaScript versions of the authorship interface than this current implementation, but they required the knowledge of programming! I believe the success of this platform solely lies on the adherence to \TeX\ as the syntax for expression. My goal with this platform is to deliver tools that will accelerate education from both directions---the professors teaching, and the students learning---so that it stays in step with technology.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{Standards and Languages}
\subsection{Ability to Express Ideas through Technology}
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}
\subsection{TeX: Art and 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}.
\subsection{LaTeX: TeX evolved}
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}
\subsection{PSTricks: Graphics and Diagrams}
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{/latex}{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}
\subsection{HTML5: The Living Standard}
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.
\subsection{From Digital to Paper}
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!
\subsection{The Convergence of Standards}
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.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{The Mathematical Web}
\subsection{Rendering Math}
The rendering of online mathematics has been a struggle to say the least. There have been advancements made in recent years, but for some professors, the Internet still remains a poor fit for mathematics:
\begin{quotation}
It has been an extremely frustrating experience teaching math online... [t]his aspect of my internet course is the most discouraging. I find myself spending an exorbitant amount of time responding to students mathematically [because the infrastructure does not support it] and not enough time teaching. If this doesn't change, it will eventually be the reason why I give up teaching mathematics on the internet. \cite[2]{diagrams}
\end{quotation}
\subsection{Server Side Rendering}
In the beginning there was server-side rendering, providing online math as a Web service. That meant that the \LaTeX\ was sent from the client to the server, where image files were generated and then served back to the client for display within an {\tt img} tag in an HTML document.
I attempted this quite some years ago with some success. I utilized the ``textogif'' command on a server and enabled real-time AJAX communication to dynamically serve generated images. The results were similar to that of MathTRAN, another server-side rendering solution.
A major downside of this is that the server has to generate files and serve them, and the client must make HTTP requests for every single equation, which is very inefficient.
Another issue with MathTRAN was that the syntax was verbose. You had to set an HTML element's attribute to the \LaTeX\ code you wanted rendered, so it was a very disconnected editing experience, since you had to combine HTML and \TeX.
MathTRAN was some sort of \TeX\ and HTML:
\begin{print}
\begin{verbatim}
<p>The equation of the unit circle <img alt="tex:x^2+y^2=1" /> and
a related trignometric identity <img alt="tex:\sin^2\theta +
\cos^2\theta = 1" />. </p>
\end{verbatim}
\end{print}
\begin{interactive}
\begin{verbatim}
<p>The equation of the unit circle <img alt="tex:x^2+y^2=1" /> and
a related trignometric identity <img alt="tex:sin^2theta +
cos^2theta = 1" />. </p>
\end{verbatim}
\end{interactive}
This type of authorship interface cannot put an author into a ``flow''. HTML, as much as I love it, is starting to resemble a sort of assembly language.
\subsection{Equation Editors}
In addition to \TeX\ rendering, there are also the equation editors that exist out there, which provide a graphical user interface for generating equations. Although the market is potentially larger, because fewer professors know \LaTeX\ than those who do, it is typically difficult to modify or copy the equations that are generated, since they are graphical \cite[6]{diagrams}.
\subsection{MathML}
The W3C came up with a recommendation called MathML, which is a form of XML used to describe mathematical symbols online. Unfortunately, support for MathML is low and it is extremely verbose.
For example, here is an equation $x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$, that is rendered in \TeX\ like so:
\begin{verbatim}
x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{verbatim}
and rendered in MathML like this (source \href{http://en.wikipedia.org/wiki/MathML}{wikipedia}):
\begin{print}
\begin{verbatim}
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq></eq>
<ci>x</ci>
<apply>
<frac></frac>
<apply>
<csymbol definitionURL="http://www.example.com/mathops/multiops.html#plusminus">
<mo>±</mo>
</csymbol>
<apply>
<minus></minus>
<ci>b</ci>
</apply>
<apply>
<power></power>
<apply>
<minus></minus>
<apply>
<power></power>
<ci>b</ci>
<cn>2</cn>
</apply>
<apply>
<times></times>
<cn>4</cn>
<ci>a</ci>
<ci>c</ci>
</apply>
</apply>
<cn>0.5</cn>
</apply>
</apply>
<apply>
<times></times>
<cn>2</cn>
<ci>a</ci>
</apply>
</apply>
</apply>
</math>
\end{verbatim}
\end{print}
\begin{interactive}
\begin{verbatim}
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<ci>x</ci>
<apply>
<frac/>
<apply>
<csymbol definitionURL="http://www.example.com/mathops/multiops.html#plusminus">
<mo>&PlusMinus;</mo>
</csymbol>
<apply>
<minus/>
<ci>b</ci>
</apply>
<apply>
<power/>
<apply>
<minus/>
<apply>
<power/>
<ci>b</ci>
<cn>2</cn>
</apply>
<apply>
<times/>
<cn>4</cn>
<ci>a</ci>
<ci>c</ci>
</apply>
</apply>
<cn>0.5</cn>
</apply>
</apply>
<apply>
<times/>
<cn>2</cn>
<ci>a</ci>
</apply>
</apply>
</apply>
</math>
\end{verbatim}
\end{interactive}
Pretty obvious why it didn't really catch on. However, probably a bigger problem with MathML is that it cannot be used to create diagrams \cite[686]{diagrams}.
\subsection{Other formats}
Many people resorted to using third-party plug-ins in browsers such as Java applets within web pages to make them interactive or mathematical. These have numerous problems. The first is that the browser blocks these plug-ins these days as a security feature, and the install process is not always intuitive or successful.
Other formats exist that are more promising, such as Wolfram's computable document format, however, you still have to download it! We need to look at Adobe's flash as a metaphor here. It's dead. Browsers are ready, are you?
\subsection{MathJAX}
Organizations including the American Mathematical Society, Design Science, Inc., and the Society for Industrial and Applied Mathematics have provided major funding to produce what is known as MathJax. It is a way to create beautiful math on all browsers. It is a simple JavaScript library that you can include on your site, and you can type \LaTeX\ and it will handle all the rendering for you.
MathJax, however, only does math (although it does it extremely well!). There still needs to be additional work done to create diagrams and also general typesetting via \TeX\ syntax online.
\subsection{Diagrams}
So there are a number of JavaScript libraries out there that render amazing graphics. However, not a single one does for diagrams what MathJax does for math formulae.
Even if they make it easy, things like D3, or paper.js, people that don't code the Web simply won't use even the simplest JavaScript libraries. That's why it's important to take an enthographic approach to design.
In the end, there are no solutions for blending mathematics and diagrams together using \TeX\ online. Seems as though instructors out there are still waiting for something that works:
``Either way, since mathematics is emphasized as an educational priority for many developed countries, one would think the longstanding woes of online mathematics instructors would shortly be solved. However, like the long overdue artificial intelligence (AI) revolution which never arrives, most online mathematics instructors still wait for a simple and convenient way to communicate two-way with their students in the very language of mathematics.'' \cite[6]{diagrams}
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{LaTeX2HTML5}
\subsection{How it works}
The primary concern of this platform is rendering on the Web, \TeX\ already handles rendering to PDF and paper. The primary duties include controlling the DOM and DOM events, and also managing and multiplexing environments into their respective rendering hierarchies
The platform calls MathJAX on the pieces it wants to, but not on all parts, and also prepares \TeX\ items for MathJAX that it would not normally render without some modification.
\begin{center}
\begin{pspicture}(0,-1.5)(12,3.5)
\rput(1.5,1){\LaTeX}
\rput(4.5,1){Parser}
\rput(7.5,1){Renderer}
\rput(10.5,1){HTML5}
\rput(6,2){LaTeX2HTML5}
\psframe(3,-0.5)(9,2.5)
\psframe(0.5,0.5)(2.5,1.5)
\psline{->}(2.5,1)(3.5,1)
\psframe(3.5,0.5)(5.5,1.5)
\psline{->}(5.5,1)(6.5,1)
\psframe(6.5,0.5)(8.5,1.5)
\psline{->}(8.5,1)(9.5,1)
\psframe(9.5,0.5)(11.5,1.5)
\end{pspicture}
\end{center}
The parser generates the various environments after parsing the \TeX, and the renderer manages views that generate HTML, CSS, and JavaScript to create interactive content on the fly.
{\bf This is done completely in the browser}, no server-side rendering is required. The server is purely used to store \LaTeX\ in a database.
\subsection{Expressions and Parsing}
The code was designed to have extendability, and uses a basic parsing and evaluation model. Every command has a hash that references a regular expression in the {\tt Expressions} object defined in {\tt expressions.js}, and a function in the {\tt Functions} object also defined in {\tt expressions.js} for what to do once the expression matches.
To add new commands, you can simply add a new regular expression inside the {\tt Expressions} object, and a match function in {\tt Functions} object of the same hash name. If you defined a new command to be evaluated within a PSTricks environment, then you should also add a graphing function inside of {\tt psgraph.js}. If you want to add a new environment, then you can add a regular expression to the {\tt Delimiters} object in {\tt expressions.js} and add a new block inside of the {\tt renderer.js} file's {\tt beforeRender} method.
The parser located in {\tt parse.js} chops and dices all text into an array of lines using the newline character as the delimiter. This is a very simple model for parsing, as it enabled focus to be on the commands instead of writing a full grammar. Writing a full parser would be ideal for future versions to be able to properly parse multi-line environments that use opening braces '{' and closing braces '}' on separate lines.
After the parser creates an array of text it passes all the lines through the defined regular expressions, first parsing any text-based expressions primarily for \TeX\ commands, and then parses more advanced expressions such as PSTricks variables and expressions as they are defined within their respective environments.
The parser instantiates and manages environments during parsing, and creates new environments packing them with state when any delimiters are detected, which are also defined as regular expressions inside of {\tt expressions.js}.
Each environment has its own execution context, and a hash of matched objects that map to \TeX\ commands. It also stores the intial settings, which can be modified during evaluation. When the match functions are called, they are given the context using the JavaScript {\tt Function.call} passing the context to be evaluated for {\tt this} object. The reason for this is to properly address coordinate transformations, which requires access to the current environment's variables and context and is at the core of the platform.
Certain expressions can modify the current environment variables and settings, so that during evaluation, the graphics and text can update accordingly. Some commands that modify the environment are {\tt pspicture} and {\tt psset}, because they define the size of pictures and units or dimensions.
\subsection{Rendering and Graphing}
The renderer contains a set of view objects that inject themselves with subviews that are rendered in specific ways depending on the environment. After the parser is complete, it then passes the completed objects into the renderer's main view, called {\tt TEX} located inside of {\tt renderer.js}.
Upon initialization of the {\tt TEX} view, it stores the current scroll position of the document, to enable flawless real-time editing upon re-render, which we will discuss more in detail later. Once the {\tt TEX} view's {\tt render} method is called, this triggers the {\tt beforeRender} method, which multiplexes the injection of various views depending on the environment, and passes in the appropriate contexts.
It is within these subviews where the magic happens. The view associated with a {\tt verbatim} environment will wrap the text in {\tt pre} tags, for example, and the view associated with the {\tt enumerate} environment will iterate over the items and generate the HTML elements {\tt ul} and {\tt li} to render lists.
The views have access to their representation in the DOM via a variable {\tt this.el}. The math environment will simply make a call to MathJax in its {\tt afterRender} method. This method means that {\tt this.el} exists in the DOM, thanks to the layout manager. The view specifically calls the MathJax {\tt Typeset} method for {\it only} that DOM element. This controls the rendering so that we do not attempt to render the entire page, which we do not want. It is this fine grained control that enables the system to function as expected.
The more advanced view is probably for the PSTricks environment, however. Upon initialization, the PSTricks view will store a reference to the environment and execution context that was passed in. It then creates a new SVG element based on these parameters, and then registers touch and mouse events that call a user event function to trigger re-rendering of various graphical elements when the user interacts with the SVG.
In the PSTricks view's {\tt afterRender} method, it iterates over all objects that are not {\tt rput} first, rendering those using the graphing function that matches the hash inside of the {\tt psgraph.js} file. For example, a {\tt psline} expression that may be defined in the {\tt Expressions} object inside of {\tt expressions.js} corresponds to a {\tt psline} function defined inside of {\tt psgraph.js}. So the corresponding graph function is called, and the context of the environment is passed along, as well as the reference to the SVG element.
The various functions within the {\tt Functions} object inside of {\tt psgraph.js} contain the drawing commands for the respective PSTricks commands. Most employ turtle drawing to create {\tt svg:path} elements using notation such as:
\begin{verbatim}
M 0 150 L 0 3 4 5 6 6
\end{verbatim}
What this means is move to position {\tt (0,150)}, then draw a line to {\tt (0,3)}, then draw a line to {\tt (4,5)}, and so on. Then the associated styles and settings are applied, for example, if there is a fillcolor or a stroke width specified.
Before the {\tt afterRender} method is complete, the {\tt rput} elements are ``absolutely relatively'' positioned on top of the {\tt this.el} which is enabled because it's parent's {\tt width} is set, and it
s parent's {\tt position} is set to {\tt relative}. The {\tt rput} method defined in {\tt psgraph.js} generates a new {\tt div} element, and sets the CSS properties to be {\tt position:absolute}, and {\tt top} and {\tt left} properties mapped {\tt this.x} and {\tt this.y}, which are the transformed coordinates specified form the original {\tt rput} command written in text. The second to last step is calling the MathJax {\tt Typeset} method on the DOM element for math rendering.
Because {\tt rput}'s definition is that it is centered at the specified position, and we require the MathJax rendering to be complete to get the width of the resulting div element, we use a {\tt setTimeout} of 0 milliseconds, which is a trick to get access to the DOM element during the next repaint of the browser. Think of it as an {\tt afterAfterRender} method. If this code could be included in the MathJax library, perhaps this step would be unnecessary. It is in this critical step where we get the width and height of the div, and offset the {\tt top} and {\tt left} CSS parameters by half of the height and width respectively.
In totality, this system of managing the rendering of DOM and SVG elements enables us to fully control the rendering of math and any related graphics or diagrams, so that they can be rendered on the Web, and match those graphics that are output to PostScript, PDF, or paper.
\subsection{Coordinate Systems}
A core component of the platform is coordinate transformations. \TeX\ has its own coordinate system, as well as the {\tt pspicture} and {\tt psset} commands, which can modify the coordinate systems. The Web has a system for describing the DOM elements on the page, and even the SVG element that we use to render graphics has its own local coordinate system for describing the graphical elements that it contains. Touch and mouse events from user input are associated with these coordinate systems, and it is the harmonious transformation between the various coordinate systems that enables the flawless rendering of mathematical diagrams and figures.
A change of coordinates is required to map PSTricks code to the SVG coordinate system, as well as inverse transformations to go from SVG back to PSTricks in the case of user mouse or touch events.
If you recall, we store an execution context within each environment. This also contains references to the scale of the current environment, which can be manipulated using {\tt pspicture} and {\tt psset}.
The transformations are as follows:
\begin{nicebox}
Let $X$ be the transformation function that maps a x-coordinate $v$ from PSTricks $\rightarrow$ SVG:
$$
X(v) = \left( w - \left( x_1 - v\right)\right) x_{unit}
$$
\end{nicebox}
\begin{nicebox}
Let $X^{-1}$ be the transformation function that maps a x-coordinate $v$ from SVG $\rightarrow$ PSTricks:
$$
X^{-1}(v) = \frac{v}{x_{unit} - w + x_1}
$$
\end{nicebox}
\begin{nicebox}
Let $Y$ be the transformation function that maps a y-coordinate $v$ from PSTricks $\rightarrow$ SVG:
$$
Y(v) = \left( y_1 - v \right) y_{unit}
$$
\end{nicebox}
\begin{nicebox}
Let $Y^{-1}$ be the transformation function that maps a y-coordinate $v$ from SVG $\rightarrow$ PSTricks:
$$
Y^{-1}(v) = y_1 - \frac{v}{y_{unit}}
$$
\end{nicebox}
The values {\tt this.x1}, {\tt this.y1}, {\tt this.xunit}, {\tt this.yunit}, {\tt this.w}, {\tt this.h} are associated with every PSTricks environment. The $x_{unit}$, which corresponds to {\tt this.xunit} is the amount the diagram gets scaled in the $x$-axis. The same true for $y_{unit}$ in the $y$-axis.
Note that if an author uses the {\tt psplot} environment with any interactivity, we must first apply an inverse transformation, apply the function, and then apply the transformation function to get the accurate values.
The two X transformation functions utilize {\tt this.w} which represents the width of the graphic which is determined by {\tt psset} and {\tt pspicture}. However, because of the CSS positioning, the height is irrelevant in these calculations.
\subsection{Privacy and DRM}
As soon as information is digitized today, it becomes a sequence of bits that by the nature of the operating system can be copied very easily. To address the digital rights issues associated with digital publishing, this platform has taken a few steps.
Every page is dynamically generated after the first HTML page is served to the client. The JavaScript that is included in the HTML page generates a series of interface components on the client side to render the page. If somebody tried to view the source of a page, they would not get any information about the book, whatsoever. They also do not get any access to the \LaTeX.
You would have to know quite a bit about networks to get access to the source of the book. Every page is sent to a client via {\it Secure Sockets Layer} (SSL), a cryptographic protocol, over a Secure HTTP connection (HTTPS).
Last but not least, authors can make their writing public or private. Private books will only be viewable by the author themselves, or by any authenticated users that have permissions. Readership and authorship permissions are stored in the database, and enable an author to create a white-list of readers or collaborative authors.
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/public-private.ps}
\end{center}
\end{print}
\begin{interactive}
\img{/app/assets/paper/public-private.png}
\end{interactive}
\subsection{Optimizing the Editing Flow}
Often, rendering graphics is a very disconnected process from the editing of the \TeX\ source. First, the author must write or edit a .tex file, that contains the source to generate the graphic, usually describing the digram using PSTricks or TikZ. The author then runs a series of commands to generate a PostScript or PDF file, which they can then open to preview the results. For example, to render a latex document often requires use of terminal and you may use these commands:
\begin{verbatim}
latex paper.tex
dvipdfm paper.dvi
xpdf paper.pdf
\end{verbatim}
That required {\it three} steps in order to view the actual graphic. But that is not the only step required by the user. They also have to context switch between the text editor and the terminal and the graphics display program. The process then becomes more fragmented. Here is a graphic where each arrow represents a context switch:
\psset{unit=1.5cm}
\begin{center}
\begin{pspicture}(-1,-2)(6,2)
\rput(0.5,0.5){text edit}
\rput(2.5,0.5){compile}
\rput(4.5,0.5){preview}
\rput(2.5,-1.25){repeat if needed}
\psframe(0,0)(1,1)
\psline{->}(1,0.5)(2,0.5)
\psframe(2,0)(3,1)
\psline{->}(3,0.5)(4,0.5)
\psframe(4,0)(5,1)
\psline(4.5,0)(4.5,-1.5)
\psline(4.5,-1.5)(0.5,-1.5)
\psline{->}(0.5,-1.5)(0.5,0)
\end{pspicture}
\end{center}
The user has a series of steps within these contexts:
\begin{enumerate}
\item switch to text editor
\item edit the .tex
\item switch to terminal
\item run {\tt latex} command on .tex file
\item run {\tt dvipdfm} command on generated .dvi file
\item open preview the pdf
\item if the graphic is incorrect, repeat
\end{enumerate}
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(0,0)(9,2)
\rput(1.5,1){.tex}
\rput(4.5,1){.dvi}
\rput(7.5,1){.pdf}
\psframe(0.5,0.5)(2.5,1.5)
\psline{->}(2.5,1)(3.5,1)
\psframe(3.5,0.5)(5.5,1.5)
\psline{->}(5.5,1)(6.5,1)
\psframe(6.5,0.5)(8.5,1.5)
\end{pspicture}
\end{center}
This process takes anywhere from seconds to minutes. If the user must make a change, they have to repeat the entire process which can be frustrating. How can we minimize amount of time and space it takes to render a document? Enable real-time editing and preview.
\begin{interactive}
\img{/app/assets/paper/realtime.png}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/realtime.ps}
\end{center}
\end{print}
This platform provides an editing experience where the text editor and preview are on the same page, hence, updates appear in real-time within the same context. The real-time authoring aspects allow a user to get instantaneous feedback while creating these diagrams, and making changes becomes simple and the results are displayed right away.
The user interface continuously evolved. At first, there was a text box that would scroll off the page as you scrolled down the preview content. It make it extremely hard to edit continuously. Then I created a fixed position text area, but then every re-render initially caused the page preview to scroll to the top of the page, so to mitigate this, at the initialization of a {\tt TEX} view, the platform stores a reference to the scroll height and repositions the window accordingly, so the user doesn't have to re-scroll the window to the point of interest. In fact, the experience is seamless now. You can scroll through the text and the preview independently on the same page while editing in real-time.
Another issue was using {\tt keyup} events to trigger a re-render. Every time the user would type in the text editor, the page would re-render sometimes causing a lag for larger pages. A way to fix this was to use throttling. The framework stores a reference to an id that points to a callback function supplied by a {\tt setInterval} function that has a value of 500 milliseconds. Basically the system then only calls the function every half second, and only then. If a new {\tt keyup} event occurs, it only adds a callback if there isn't a reference to one already. This ensures a streamlined editing experience for the author.
\subsection{Results}
\begin{nicebox}
The purpose is to create a {\it beautiful} pages, whether on paper or the Web
\end{nicebox}
Using two standards, HTML5 and \TeX, we were able to produce a consistent look and feel across all devices, including paper:
\begin{interactive}
\img{/app/assets/paper/results.png}
\end{interactive}
\begin{print}
\begin{center}
\includegraphics[width=400pt]{images/results.ps}
\end{center}
\end{print}
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{TeX Implementation}
\subsection{structure}
\subsubsection{sections and subsections}
As an avid \LaTeX\ author, I've mapped the data structure of a typical document to the database structure that the books are based upon.
This can be viewed as a feature or a flaw, but the user of this particular system doesn't have to type {\tt section} or {\tt subsection} commands. Users can use the UI to partition their work.
When the user outputs a .tex file, the {\tt section, subsection, and subsubsection} commands are automatically put into the .tex file for the user, if they decide they want to export their book.
The philosophy is to quickly generate the structure of a paper, and then just focus on the sections. Then an author can manage a larger paper consisting of hundreds of sections if needed.
This also played into the navigation quite well. The pages on mobile devices initially caused a JavaScript execution timeout, where the script was running too long and the operating system cut the script off for security reasons. Thus, dividing pages into sections also enabled a good construct for rendering portions of a book onto smaller mobile and touch devices.
\subsection{elements}
\subsubsection{accents, styles, and typeface}
Directly from ``The TeXbook'':
{\tt \rm} switches to the normal ``roman'' typeface
{\tt \sl} switches to a slanted roman typeface
{\tt \it} switches to italic style
{\tt \tt} switches to a typewriter-like face
{\tt \bf} switches to an extended boldface style
\cite[13]{texbook}
\begin{example}
You can {\bf see} what it's {\sl like} to use {\tt different} types of {\it styles} within your {\rm words}
\begin{verbatim}
You can {\bf see} what it's {\sl like} to use {\tt different} types of {\it styles} within your {\rm words}
\end{verbatim}
\end{example}
\subsubsection{quotes}
Quotes begin with two ` symbols, and end with two ' symbols.
\begin{example}
Quotes are often uses in literary work, and can be ``added to text'' very easily.
\begin{verbatim}
Quotes are often uses in literary work, and can be ``added to text'' very easily.
\end{verbatim}
\end{example}
\subsubsection{hyphens and dashes}
for a hyphen, type a hyphen (-)
for an en-dash, type two hyphens (--)
for an em-dash, type three hyphens (---)
for a minus sign, type a hyphen in mathematics mode ($-$)
\cite[4]{texbook}
This can be created using the following \TeX:
\begin{verbatim}
for a hyphen, type a hyphen (-)
for an en-dash, type two hyphens (--)
for an em-dash, type three hyphens (---)
for a minus sign, type a hyphen in mathematics mode ($-$)
\end{verbatim}
\subsection{math}
\subsubsection{the beauty of mathematics}
Math has provided us a method for which we can {\bf derive} through proofs and create theorems, and corollaries or even Laws.
This section describes some details about what you can do with MathJAX and LaTeX2HTML5!
$$\int\!\!\!\int_D dx\,dy$$
$$\int\int_D dx\,dy$$
$$x+y^2\over k+1 + 2$$
$$
n \choose k
$$
$$\sum\nolimits_{n=1}^m$$
$$\int\limits_0^{\pi\over2}$$
$$\int_{-\infty}^{+\infty}$$
\subsubsection{proof}
You can write a proof using {\tt proof} environment.
The platform will automatically apply the Q.E.D symbol at the end of your proof, and also make a nice bold {\bf Proof} at the beginning of the proof. In case you are curious, Q.E.D. comes from Latin, which means that that was asked to be demonstrated, or \emph{quod erat demonstrandum}. The mathematical symbol looks like this: $\qed$.
You can write a proof using this notation:
\begin{verbatim}
\begin{proof}
% some typsetting + math goes here
\end{proof}
\end{verbatim}
Here is an example that proves that multiplication in the time domain is the product of a scalar and the convolution in the frequency domain. In other words, prove $f(t)g(t) \ftp \frac{1}{2\pi} (F * G) (\omega)$
\begin{proof}
\begin{align*}
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}(F*G)(\omega)e^{i\omega t}d\omega \\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}\int_{-\infty}^{\infty}F(W)G(\omega-W) dW e^{i\omega t}d\omega \\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}F(W)\int_{-\infty}^{\infty}G(\omega-W) e^{i\omega t} d\omega dW \\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}F(W)\int_{-\infty}^{\infty}G(\Omega) e^{i(\Omega+W) t} d\Omega dW \\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}F(W)\lr{\int_{-\infty}^{\infty}G(\Omega) e^{i\Omega t} d\Omega }e^{iWt}dW \\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\int_{-\infty}^{\infty}F(W)e^{iWt}dW \lr{\int_{-\infty}^{\infty}G(\Omega) e^{i\Omega t} d\Omega}\\
\iftrans{(F*G)(\omega)} &= \frac{1}{2\pi}\lr{2\pi f(t)}\lr{2\pi g(t)} \\
\iftrans{(F*G)(\omega)} &= 2\pi f(t)g(t) \\
\iftrans{\frac{1}{2\pi}(F*G)(\omega)} &= f(t)g(t) \\
\end{align*}
Which shows that multiplication in the time domain is the product of a scalar and the convolution in the frequency domain.
\end{proof}
\subsubsection{example}
Sometimes it is useful to include examples within text, and for this the {\tt example} environment works well.
You can add an example with the following syntax:
\begin{verbatim}
\begin{example}
% some math + typesetting here
\end{example}
\end{verbatim}
Here is an example (no pun intended):
\begin{example}
Consider the causal signal $x(t) = e^{-3t}u(t)$. What is the Laplace Transform for $x(t+T)$?
\begin{align*}
y(t) &= x(t+T) \\
y(t) &= e^{-3(t+T)}u(t+T) \\
\end{align*}
Note that the signal is no longer causal, although it is still right-sided. We know the transform for $x(t)$ and can utilize the shifting property:
\begin{align*}
x(t)&\ltp \hat{X}(s) = \frac{1}{3+s} \\
x(t+T) &\ltp e^{sT}\hat{X}(s) = \frac{e^{sT}}{3+s} \\
\end{align*}
The $RoC$ is the same in this case, except that it excludes $\infty$:
$$
RoC(y) : \{ s \st -3 \lt \Real{s} \lt \infty \}
$$
\end{example}
\subsubsection{definition}
\begin{definition}
If the function $x \in X$ is defined as $x : A \to B$, and $A$ is uncountable, then we say that the signal $x$ is a \emph{Continuous-Time Signal} (a.k.a. CT Signal).
\end{definition}
{\bf Tip:} You can use {\tt nicebox} to make it stand out if you like:
\begin{nicebox}
\begin{definition}
The function $f$ is a \emph{one-to-one correspondence}, or a \emph{bijection}, if it is both one-to-one and onto.
\end{definition}
\end{nicebox}
\subsubsection{claim}
\begin{claim}
if a signal is real-valued, then its Fourier transform is conjugate symmetric. In other words,
$$ x(n) \in \R \mbox{ } \forall n \Rightarrow X(\omega) = X^*(\omega) $$
\end{claim}
\subsubsection{theorems and corollaries}
The platform also supports corollary and theorem environments. You can define them like so:
\begin{verbatim}
\begin{corollary}
corallary goes here!
\end{corollary}
\begin{theorem}
theorem goes here!
\end{theorem}
\end{verbatim}
\begin{theorem}
{\bf The Chinese Remainder Theorem}
Let $m_1, m_2, \cdots , m_n \in \mathbb{Z}$ such that $ \gcd(m_i, m_j) = 1$ where $i \neq j$ Let $a_1, \cdots , a_n$ are arbitrary. This system of congruences
$$x \equiv a_1 \bmod m_1$$
$$x \equiv a_2 \bmod m_2$$
$$ \cdots $$
$$x \equiv a_n \bmod m_n$$
has a solution modulo $m= \prod_{i=1}^{n}m_i$. Basically we can find a value $x$ that is a solution by the formula
$$x=a_1M_1y_1 + a_2M_2y_2 + \cdots a_nM_ny_n$$
where $0 \leq x < m$, and all other solutions are congruent modulo $m$.
\end{theorem}
\subsubsection{problems and solutions}
The platform also supports {\tt problem} and {\tt solution} environments:
\begin{verbatim}
\begin{problem}
Given the complex number $z = e^{i\frac{2\pi}{3}}$, determine $\sqrt[4]{z}$ . Be mindful of how many fourth roots $z$ has and identify each
of them.
\end{problem}
\begin{solution}
\begin{align*}
z &= e^{i\frac{2\pi}{3}} \\
z &= e^{i(\frac{2\pi}{3} + 2\pi k) } \mbox{ for some } k \in \Z \\
\sqrt[4]{z} &= e^{i(\frac{2\pi}{3} + 2\pi k) \frac{1}{4}} \\
\sqrt[4]{z} &= e^{i(\frac{\pi}{6} + \frac{\pi}{2} k) \frac{1}{4}}
\end{align*}
So we can determine that within the range [$0,2\pi$), we find that $\sqrt[4]{z} = e^{i\frac{\pi}{6}}, e^{i\frac{2\pi}{3}}, e^{i\frac{7\pi}{6}}, e^{i\frac{5\pi}{3}}$
\end{solution}
\end{verbatim}
\begin{problem}
Given the complex number $z = e^{i\frac{2\pi}{3}}$, determine $\sqrt[4]{z}$ . Be mindful of how many fourth roots $z$ has and identify each
of them.
\end{problem}
\begin{solution}
\begin{align*}
z &= e^{i\frac{2\pi}{3}} \\
z &= e^{i(\frac{2\pi}{3} + 2\pi k) } \mbox{ for some } k \in \Z \\
\sqrt[4]{z} &= e^{i(\frac{2\pi}{3} + 2\pi k) \frac{1}{4}} \\
\sqrt[4]{z} &= e^{i(\frac{\pi}{6} + \frac{\pi}{2} k) \frac{1}{4}}
\end{align*}
So we can determine that within the range [$0,2\pi$), we find that $\sqrt[4]{z} = e^{i\frac{\pi}{6}}, e^{i\frac{2\pi}{3}}, e^{i\frac{7\pi}{6}}, e^{i\frac{5\pi}{3}}$
\end{solution}
\subsection{Environments}
\subsubsection{verbatim}
This is probably one of the most important environments to implement! This is because it's required to show syntax to the reader who wishes to learn about \TeX\ and \LaTeX.
\begin{verbatim}
begin{verbatim}
some \LaTeX\ here will not get parsed!
end{verbatim}
\end{verbatim}
which looks like this when rendered:
\begin{verbatim}
some \LaTeX\ here will not get parsed!
\end{verbatim}
\begin{example}
This method based on the Chinese Remainder Theorem, is used to factor a large number N.
Pick a random integer for a starting number $ = y_0 = z_0 $ Then recursively apply the function $f(x) = x^2 + a \bmod N$ twice to $z$, and once to $y$, where $a$ is the random remainder to start with.
$$y_1 = f(y_0)$$
$$z_1 = f(f(y_0))$$
We use this process to generate remainders until we hit a loop and one of them is divisible by $p$, where $N=pq$. which has a good chance of being achieved by $\sqrt{p}$ factors.
We test this at each iteration by taking the greatest common divisor of the difference between the values and the number you are trying to factor.
$$\gcd(| y_k-x_k| , N)$$
If the $\gcd$ 1, then find $x_k $ and $ y_k$ and recursively apply the algorithm. If you do not get a one, then the number is a factor of $N$.
An algorithm written in Scheme emulates this procedure:
\begin{verbatim}
(define (pollards n y z fn)
(let* ((n-y (fn y))
(n-z (fn (fn z)))
(g (gcd (abs (- n-y n-z)) n)))
(if (= g 1) (pollards n n-y n-z fn) g)))
\end{verbatim}
\end{example}
Here is an example of a program written in an assembly language called MIPS:
\begin{example}
This emulates {\tt *x = *y } where {\tt x} and {\tt y} are pointers
\begin{verbatim}
.data
x: .word 4
y: .word 5
.text
main:
la $s0, x
la $s1, y
lw $t1, 0($s1) # read y into temp var
sw $t1, 0($s0) # store into x
lw $t1, 0($s0) # read from x into temp var
move $a0, $t1
li $v0, 1
syscall
li $v0, 10
syscall
\end{verbatim}
\end{example}
\subsubsection{math}
Thanks to MathJax, we can render \LaTeX\ equations in the browser. Here is an example
Using ``\$'' symbols, you can create a math environement. Also using the {\tt align} environment also works (thanks to MathJAX).
You can produce math {\it within} sentences.
We can see that differentiation of a rational function will produce a rational Z-transform. If you recall, the set of signals that produce rational Z-transforms are obtained from, and only from, linear combinations of $\alpha^n u(n)$, $\alpha^n u(-n)$, $n^k \alpha^n u(n)$, and $n^k \alpha^n u(-n)$, where $k \in \N$, and shifted versions thereof.
\begin{verbatim}
We can see that differentiation of a rational function will produce a rational Z-transform.
If you recall, the set of signals that produce rational Z-transforms are obtained from, and only from, linear combinations of
$\alpha^n u(n)$, $\alpha^n u(-n)$, $n^k \alpha^n u(n)$, and $n^k \alpha^n u(-n)$, where $k \in \N$, and shifted versions thereof.
\end{verbatim}
Using two ``\$'' symbols makes a centered math environment.
\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}
\begin{align*}
\hat{G}(z) &= \sum \limits_{n\in\Z} g(n) z^{-n} \\
\frac{d}{dz}\hat{G}(z) &= -\sum \limits_{n\in\Z} ng(n) z^{-n-1} \\
\frac{d}{dz}\hat{G}(z) &= -z^{-1}\sum \limits_{n\in\Z} ng(n) z^{-n} \\
\end{align*}
\subsubsection{nicebox}
You can create ``nice'' boxes by using the {\tt nicebox} environment, which produces something like this:
\begin{nicebox}
$$ \frac{\delta}{\delta u} \int_{birth}^{death} f(life) du = \mbox{your life} $$
\end{nicebox}
\subsubsection{quotation}
Using the {\tt quotation} environment, you can do quotation blocks!
\begin{verbatim}
\begin{quotation}
a very long quote here... \cite[10]{sicp}
\end{quotation}
\end{verbatim}
Here is an example of what it looks like (a great quote from Abelson and Sussman):
\begin{quotation}
Our traffic with the subject matter of this book involves us with three foci of phenomena: the human mind, collections of computer programs, and the computer. Every computer program is a model, hatched in the mind, of a real or mental process. These processes, arising from human experience and thought, are huge in number, intricate in detail, and at any time only partially understood. They are modeled to our permanent satisfaction rarely by our computer programs. Thus even though our programs are carefully handcrafted discrete collections of symbols, mosaics of interlocking functions, they continually evolve: we change them as our perception of the model deepens, enlarges, generalizes until the model ultimately attains a metastable place within still another model with which we struggle. The source of the exhilaration associated with computer programming is the continual unfolding within the mind and on the computer of mechanisms expressed as programs and the explosion of perception they generate. If art interprets our dreams, the computer executes them in the guise of programs! \cite[10]{sicp}
\end{quotation}
\subsection{PSTricks}
\subsubsection{basic graphics parameters}
You can specify {\tt linewidth, linecolor, fillstyle, fillcolor} on most PSTricks objects. For example:
\begin{center}
\begin{pspicture}(-2,-2)(2,2)
\psline[linecolor=green]{->}(0,0)(1.2,1.2)
\psline[linecolor=red]{->}(0,0)(-1.2,-1.2)
\psline[linecolor=purple]{->}(0,0)(1.2,-1.2)
\psline[linecolor=lightblue]{->}(0,0)(-1.2,1.2)
\end{pspicture}
\end{center}
Which can be created with the following source:
\begin{verbatim}
\begin{pspicture}(-2,-2)(2,2)
\psline[linecolor=green]{->}(0,0)(1.2,1.2)
\psline[linecolor=red]{->}(0,0)(-1.2,-1.2)
\psline[linecolor=purple]{->}(0,0)(1.2,-1.2)
\psline[linecolor=lightblue]{->}(0,0)(-1.2,1.2)
\end{pspicture}
\end{verbatim}
Fill modes can be useful to show things like integration and area:
\begin{interactive}
\begin{center}
\begin{pspicture}(-4,-3)(4,3)
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-1.5}{1.5}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{sin(x)}
\psline{->}(-4,0)(4,0)
\end{pspicture}
\end{center}
\end{interactive}
\begin{print}
\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}
\end{print}
Which can be created with the following source:
\begin{verbatim}
\begin{pspicture}(-4,-3)(4,3)
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-1.5}{1.5}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-4}{4}{sin(x)}
\psline{->}(-4,0)(4,0)
\end{pspicture}
\end{verbatim}
\subsubsection{units}
You can use {\tt psset} to set units before a graphic is rendered.
\begin{center}
\psset{unit=0.5cm}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\psline[linewidth=1.5 pt]{->}(0,0)(1,1)
\end{pspicture}
\psset{unit=0.75cm}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\psline[linewidth=1.5 pt]{->}(0,0)(1,1)
\end{pspicture}
\psset{unit=1cm}
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\psline[linewidth=1.5 pt]{->}(0,0)(1,1)
\end{pspicture}
\end{center}
The way you do this is by supplying {\tt psset} before the {\tt pspicture} environment.
\subsubsection{arrows}
Arrows are much more complicated that at first glance. If you use turtle style drawing to draw everything on the page, how to you render an arrowhead on a given line?
\begin{center}
\begin{pspicture}(0,-6)(6,0)
% y-axis
\rput(3.3,-0.5){ $\Im$ }
\psline{->}(3,-5.5)(3,-0.5)
% x-axis
\rput(5.5,-2.7){ $\Re$ }
\psline{->}(0.5,-3)(5.5,-3)
% quadrants
\rput(3.3,-0.8){ $\pi/2$ }
\rput(3.3,-5.5){ $\pi$ }
\rput(0.5,-2.7){ $3\pi/2$ }
\rput(5.2,-2.7){ $0$ }
% the circle
\pscircle(3,-3){ 2 }
% new vector
\rput(4.8,-1){$\mathbf{z}_0$}
\psline[linewidth=1.5 pt]{->}(4.73205124983367,-2.00000076602549)(5,-1)
% new vector
\rput(4.21421450055845,-1.58578737581288){$\mathbf{z}_1$}
\psline[linewidth=1.5 pt]{->}(4.73205124983367,-2.00000076602549)(4.41421450055845,-1.58578737581288)
\end{pspicture}
\end{center}
After much frustration, I found something promising, and note that the hope for this platform is to benefit people like this: \href{http://mathforum.org/library/drmath/view/54146.html}{mathforum.org}
Ironically, below is a snippet from the link above, where a person asked Dr. Math a question about arrows, and the responses were all in ASCII text! Imagine if Dr. Math had a mathematical diagramming system at his disposal!
\begin{verbatim}
Hi, Johan.
Now that I've given you a chance to work this problem out, I want to
let you know what I came up with, because I recognize it may be
difficult for you to do on your own. It's an interesting problem.
We have a line segment from A(x0,y0) to B(x1,y1), and want to draw
segments BC and BD of length d, at a t degree angle on either side of
the segment at (x1,y1):
B
d ---o
------ //
D o-- t / /
/ t/ d
/ /
/ /
/ o
/ C
/
slope m /
/
/
/
/ s
o - - - - - - -
A
\end{verbatim}
The solution was this following formula:
\begin{nicebox}
\begin{align*}
x &= x1 - \left[\left(x1-x0\right)cos(t) - \left(y1-y0\right)sin(t)\right]\frac{d}{l} \\
y &= y1 - \left[\left(y1-y0\right)cos(t) + \left(x1-x0\right)sin(t)\right]\frac{d}{l}
\end{align*}
\end{nicebox}
This enables us to use pslines and have arrows!
Here are four example lines with and without arrows:
\begin{center}
\begin{pspicture}(-3,-1)(3,4)
\psline{<->}(0,3)(1,3)
\psline{<-}(0,2)(1,2)
\psline{->}(0,1)(1,1)
\psline(0,0)(1,0)
\end{pspicture}
\end{center}
Which can be produced with the following \TeX:
\begin{verbatim}
\begin{pspicture}(-3,-3)(3,3)
\psline{<->}(0,3)(1,3)
\psline{<-}(0,2)(1,2)
\psline{->}(0,1)(1,1)
\psline(0,0)(1,0)
\end{pspicture}
\end{verbatim}
\subsection{PSTricks elements}
\subsubsection{pstrick docs}
All decisions on how to implement the PSTricks commands came from Timothy Van Zandt's PSTricks User Guide which can be found \href{http://ctan.tug.org/tex-archive/graphics/pstricks/base/doc/}{here}
\subsubsection{pspicture}
The very first step in creating a graphic to use the {\tt pspicture} command:
\begin{verbatim}
\begin{pspicture}(x0,y0)(x1,y1)
% pstricks goes here
\end{pspicture}
\end{verbatim}
This will create a picture object where the lower left-hand corner is at {\tt (x0,y0)} and upper right-hand corner is at {\tt (x1,y1)} \cite[40]{pstricks}.
\subsubsection{psframe}
{\tt psframe} will simply create a box.
\begin{verbatim}
\begin{pspicture}(-1,-1)(2,2)
\psframe(0,0)(1,1)
\end{pspicture}
\end{verbatim}
This will create a box where the lower left-hand corner is at {\tt (x0,y0)} and upper right-hand corner is at {\tt (x1,y1)}:
\begin{center}
\begin{pspicture}(-1,-1)(2,2)
\psframe(0,0)(1,1)
\end{pspicture}
\end{center}
\subsubsection{psplot}
The {\tt psplot} command is powerful. This allows you to create graphs.
{\bf An important note: } if you want your work to work on {\it both} Web and paper, you must specify {\tt algebraic} in the parameters. This platform actually uses JavaScript syntax for evaluating the formulae, which is almost identical to the syntax used normally.
\psset{unit=0.5}
\begin{center}
\begin{pspicture}(-13,-1.25)(13,3)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-12.56}{12.56}{2*sin(x)/x}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-12.6,0)(12.6,0)
\rput(5.7, 1){$a/b$}
\psline[linestyle=dashed](0,2)(5,2)
\psline{<->}(5,0)(5,2)
\rput(3.14, -0.5){$\frac{\pi}{a}$}
\rput(6.28, -0.5){$\frac{2\pi}{a}$}
\rput(9.42, -0.5){$\frac{3\pi}{a}$}
\rput(12.56, -0.5){$\frac{4\pi}{a}$}
\rput(-3.14, -0.5){$\frac{-\pi}{a}$}
\rput(-6.28, -0.5){$\frac{-2\pi}{a}$}
\rput(-9.42, -0.5){$\frac{-3\pi}{a}$}
\rput(-12.56, -0.5){$\frac{-4\pi}{a}$}
\rput(0, -0.5){$0$}
% begin x-axis labels:
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\psline(0, -0.1)(0, 0.1)
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\psline(6.2831853, -0.1)(6.2831853, 0.1)
% end x-axis labels:
\end{pspicture}
\end{center}
\begin{verbatim}
\begin{pspicture}(-13,-1.25)(13,3)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-12.56}{12.56}{2*sin(x)/x}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-12.6,0)(12.6,0)
\rput(5.7, 1){$a/b$}
\psline[linestyle=dashed](0,2)(5,2)
\psline{<->}(5,0)(5,2)
\rput(3.14, -0.5){$\frac{\pi}{a}$}
\rput(6.28, -0.5){$\frac{2\pi}{a}$}
\rput(9.42, -0.5){$\frac{3\pi}{a}$}
\rput(12.56, -0.5){$\frac{4\pi}{a}$}
\rput(-3.14, -0.5){$\frac{-\pi}{a}$}
\rput(-6.28, -0.5){$\frac{-2\pi}{a}$}
\rput(-9.42, -0.5){$\frac{-3\pi}{a}$}
\rput(-12.56, -0.5){$\frac{-4\pi}{a}$}
\rput(0, -0.5){$0$}
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\psline(0, -0.1)(0, 0.1)
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\psline(6.2831853, -0.1)(6.2831853, 0.1)
\end{pspicture}
\end{verbatim}
\begin{center}
\psset{xunit=1,yunit=2}
\begin{pspicture}(-8,-2)(8,2)
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-3.14}{3.14}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-6.2831}{6.2831}{sin(x)}
% function name
\rput(6.2831853,1.3){$\left|H(\omega)\right|$}
% x-axis
\psline(-6.6831853, 0)(6.6831853, 0)
\rput(6.6831853,-0.3){$\omega$}
% begin x-axis labels:
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\rput(-6.2831853, -0.3){$-2\pi$}
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\rput(-4.712388975, -0.3){$-\frac{3\pi}{2}$}
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\rput(-3.14159265, -0.3){$-\pi$}
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\rput(-1.570796325, -0.3){$-\frac{\pi}{2}$}
\psline(0, -0.1)(0, 0.1)
\rput(0, -0.3){$0$}
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\rput(1.570796325, -0.3){$\frac{\pi}{2}$}
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\rput(3.14159265, -0.3){$\pi$}
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\rput(4.712388975, -0.3){$\frac{3\pi}{2}$}
\psline(6.2831853, -0.1)(6.2831853, 0.1)
\rput(6.2831853, -0.3){$2\pi$}
% end x-axis labels:
\end{pspicture}
\end{center}
\begin{verbatim}
\begin{pspicture}(-8,-2)(8,2)
\psplot[algebraic,linewidth=2pt,fillstyle=solid, fillcolor=lightblue]{-3.14}{3.14}{sin(x)}
\psplot[algebraic,linewidth=2pt]{-6.2831}{6.2831}{sin(x)}
\rput(6.2831853,1.3){$\left|H(\omega)\right|$}
\psline(-6.6831853, 0)(6.6831853, 0)
\rput(6.6831853,-0.3){$\omega$}
\psline(-6.2831853, -0.1)(-6.2831853, 0.1)
\rput(-6.2831853, -0.3){$-2\pi$}
\psline(-4.712388975, -0.1)(-4.712388975, 0.1)
\rput(-4.712388975, -0.3){$-\frac{3\pi}{2}$}
\psline(-3.14159265, -0.1)(-3.14159265, 0.1)
\rput(-3.14159265, -0.3){$-\pi$}
\psline(-1.570796325, -0.1)(-1.570796325, 0.1)
\rput(-1.570796325, -0.3){$-\frac{\pi}{2}$}
\psline(0, -0.1)(0, 0.1)
\rput(0, -0.3){$0$}
\psline(1.570796325, -0.1)(1.570796325, 0.1)
\rput(1.570796325, -0.3){$\frac{\pi}{2}$}
\psline(3.14159265, -0.1)(3.14159265, 0.1)
\rput(3.14159265, -0.3){$\pi$}
\psline(4.712388975, -0.1)(4.712388975, 0.1)
\rput(4.712388975, -0.3){$\frac{3\pi}{2}$}
\psline(6.2831853, -0.1)(6.2831853, 0.1)
\rput(6.2831853, -0.3){$2\pi$}
\end{pspicture}
\end{verbatim}
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-3.5,-3.25)(3.5,2)
\psplot[algebraic,linewidth=1.5pt]{-3.14}{3.14}{cos(x/2)}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-3.25,0)(3.25,0)
\rput(3.14, -0.35){$\pi$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\rput(1.25,1.25 ){$\left| H(\omega) \right| =\cos(\omega/2)$}
\end{pspicture}
\end{center}
\begin{verbatim}
\begin{pspicture}(-3.5,-3.25)(3.5,2)
\psplot[algebraic,linewidth=1.5pt]{-3.14}{3.14}{cos(x/2)}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-3.25,0)(3.25,0)
\rput(3.14, -0.35){$\pi$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\rput(1.25,1.25 ){$\left| H(\omega) \right| =\cos(\omega/2)$}
\end{pspicture}
\end{verbatim}
\begin{center}
\begin{pspicture}(-3.5,-1.25)(3.5,2)
\psplot[algebraic,linewidth=1.5pt]{-3.14}{3.14}{abs(sin(x/2))}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-3.25,0)(3.25,0)
\rput(3.14, -0.35){$\pi$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\rput(1,1.25 ){$\left| G(\omega) \right| =\left| \sin(\omega/2) \right|$}
\end{pspicture}
\end{center}
\begin{verbatim}
\begin{pspicture}(-3.5,-1.25)(3.5,2)
\psplot[algebraic,linewidth=1.5pt]{-3.14}{3.14}{abs(sin(x/2))}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-3.25,0)(3.25,0)
\rput(3.14, -0.35){$\pi$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\rput(1,1.25 ){$\left| G(\omega) \right| =\left| \sin(\omega/2) \right|$}
\end{pspicture}
\end{verbatim}
\subsubsection{pscircle}
Circles are simple, just specify an origin and a radius:
\begin{center}
\begin{pspicture}(-2,-2)(2,2)
\pscircle(0,0){ 1 }
\end{pspicture}
\end{center}
\begin{verbatim}
\begin{pspicture}(-2,-2)(2,2)
\pscircle(0,0){ 1 }
\end{pspicture}
\end{verbatim}
\subsubsection{psaxes}
The {\tt psaxes} command is somewhat unfinished, but it does generate the x and y axes:
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-3.5,-1)(3.75,3.5)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-3.14}{3.14}{cos(4*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}
\end{center}
\begin{verbatim}
\begin{pspicture}(-3.5,-1)(3.75,3.5)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-3.14}{3.14}{cos(4*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}
\end{verbatim}
\subsubsection{psline}
The {\tt psline} command can be used in a multitude of ways.
There is a special option on {\tt psline} that allows you to specify dots and arrows.
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-2.5,-1)(7.6,4)
\psline(-2,0)(-2,2)
\psline{-*}(-1,0)(-1,2)
\psline{*-}(0,0)(0,2)
\psline{*-*}(1,0)(1,2)
\psline{<-*}(2,0)(2,2)
\psline{*->}(3,0)(3,2)
\psline{<->}(4,0)(4,2)
\psline{<-}(5,0)(5,2)
\psline{->}(6,0)(6,2)
\psline(7,0)(7,2)
\end{pspicture}
\end{center}
Which can be produced with the following source:
\begin{verbatim}
\begin{pspicture}(-2.5,-1)(7.6,4)
\psline(-2,0)(-2,2)
\psline{-*}(-1,0)(-1,2)
\psline{*-}(0,0)(0,2)
\psline{*-*}(1,0)(1,2)
\psline{<-*}(2,0)(2,2)
\psline{*->}(3,0)(3,2)
\psline{<->}(4,0)(4,2)
\psline{<-}(5,0)(5,2)
\psline{->}(6,0)(6,2)
\psline(7,0)(7,2)
\end{pspicture}
\end{verbatim}
They can be useful for creating kronecker delta plots:
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-3,-1)(4,4)
\rput(-2.5,1.5){$\cdots$}
\rput(3.5,1.5){$\cdots$}
\psline{-*}(-2,0)(-2,2)
\rput(-1.7,2){(2)}
\rput(-2,-0.3){-2}
\psline{-*}(-1,0)(-1,3)
\rput(-0.7,3){(3)}
\rput(-1,-0.3){-1}
\psline{-*}(0,0)(0,2)
\rput(0.3,2){(2)}
\rput(0,-0.3){0}
\psline{-*}(1,0)(1,3)
\rput(1.3,3){(3)}
\rput(1,-0.3){1}
\psline{-*}(2,0)(2,2)
\rput(2.3,2){(2)}
\rput(2,-0.3){2}
\psline{-*}(3,0)(3,3)
\rput(3.3,3){(3)}
\rput(3,-0.3){3}
\psline{->}(-3,0)(4,0)
\rput(4,-0.3){ $n$ }
\rput(4,3){ $x(n)$ }
\end{pspicture}
\end{center}
\psset{unit=1cm}
\begin{verbatim}
\begin{pspicture}(-3,-1)(4,4)
\rput(-2.5,1.5){$\cdots$}
\rput(3.5,1.5){$\cdots$}
\psline{-*}(-2,0)(-2,2)
\rput(-1.7,2){(2)}
\rput(-2,-0.3){-2}
\psline{-*}(-1,0)(-1,3)
\rput(-0.7,3){(3)}
\rput(-1,-0.3){-1}
\psline{-*}(0,0)(0,2)
\rput(0.3,2){(2)}
\rput(0,-0.3){0}
\psline{-*}(1,0)(1,3)
\rput(1.3,3){(3)}
\rput(1,-0.3){1}
\psline{-*}(2,0)(2,2)
\rput(2.3,2){(2)}
\rput(2,-0.3){2}
\psline{-*}(3,0)(3,3)
\rput(3.3,3){(3)}
\rput(3,-0.3){3}
\psline{->}(-3,0)(4,0)
\rput(4,-0.3){ $n$ }
\rput(4,3){ $x(n)$ }
\end{pspicture}
\end{verbatim}
Other uses include creating representations of vectors:
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-3,-6)(3,6)
\psline{->}(0,-6)(0,-1)
\psline{->}(-2.5,-3.5)(2.5,-3.5)
\rput(0.8,-4.8){$\Psi_1 = \left[ \begin{array}{r} 1 \\ -1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(1,-4.5)
\rput(2.22487174976714,-2){$\vec{x}$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(2.42487174976714,-2.10000107243568)
\rput(0.8,-2.5){$\Psi_0 = \left[ \begin{array}{r} 1 \\ 1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(1,-2.5)
\psline{->}(0,0)(0,5)
\psline{->}(-2.5,2.5)(2.5,2.5)
\rput(2.22487174976714,3.95){$\vec{x}$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(2.42487174976714,3.89999892756432)
\rput(1,2){$\Psi_0 = \left[ \begin{array}{r} 1 \\ 0 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(0,3.5)
\rput(0,3.5){$\Psi_1 = \left[ \begin{array}{r} 0 \\ 1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(1,2.5)
\end{pspicture}
\end{center}
Which can be created with the following source:
\psset{unit=1cm}
\begin{verbatim}
\begin{pspicture}(-3,-6)(3,6)
\psline{->}(0,-6)(0,-1)
\psline{->}(-2.5,-3.5)(2.5,-3.5)
\rput(0.8,-4.8){$\Psi_1 = \left[ \begin{array}{r} 1 \\ -1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(1,-4.5)
\rput(2.22487174976714,-2){$\vec{x}$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(2.42487174976714,-2.10000107243568)
\rput(0.8,-2.5){$\Psi_0 = \left[ \begin{array}{r} 1 \\ 1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,-3.5)(1,-2.5)
\psline{->}(0,0)(0,5)
\psline{->}(-2.5,2.5)(2.5,2.5)
\rput(2.22487174976714,3.95){$\vec{x}$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(2.42487174976714,3.89999892756432)
\rput(1,2){$\Psi_0 = \left[ \begin{array}{r} 1 \\ 0 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(0,3.5)
\rput(0,3.5){$\Psi_1 = \left[ \begin{array}{r} 0 \\ 1 \\ \end{array} \right]$}
\psline[linewidth=1.5 pt]{->}(0,2.5)(1,2.5)
\end{pspicture}
\end{verbatim}
You can also use {\tt linestyle=dashed} in the options.
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-2.5,-1)(7.6,4)
\psline[linestyle=dashed](-2,0)(-2,2)
\psline[linestyle=dashed]{-*}(-1,0)(-1,2)
\psline[linestyle=dashed]{*-}(0,0)(0,2)
\psline[linestyle=dashed]{*-*}(1,0)(1,2)
\psline[linestyle=dashed]{<-*}(2,0)(2,2)
\psline[linestyle=dashed]{*->}(3,0)(3,2)
\psline[linestyle=dashed]{<->}(4,0)(4,2)
\psline[linestyle=dashed]{<-}(5,0)(5,2)
\psline[linestyle=dashed]{->}(6,0)(6,2)
\psline[linestyle=dashed](7,0)(7,2)
\end{pspicture}
\end{center}
Which can be produced with the following source:
\begin{verbatim}
\begin{pspicture}(-2.5,-1)(7.6,4)
\psline[linestyle=dashed](-2,0)(-2,2)
\psline[linestyle=dashed]{-*}(-1,0)(-1,2)
\psline[linestyle=dashed]{*-}(0,0)(0,2)
\psline[linestyle=dashed]{*-*}(1,0)(1,2)
\psline[linestyle=dashed]{<-*}(2,0)(2,2)
\psline[linestyle=dashed]{*->}(3,0)(3,2)
\psline[linestyle=dashed]{<->}(4,0)(4,2)
\psline[linestyle=dashed]{<-}(5,0)(5,2)
\psline[linestyle=dashed]{->}(6,0)(6,2)
\psline[linestyle=dashed](7,0)(7,2)
\end{pspicture}
\end{verbatim}
\subsubsection{rput - place math anywhere}
Probably the best part of using PSTricks is that you can mix both graphics and mathematics:
\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[linewidth=1.25 pt]{->}(0.5,0)(1.5,0)
\psline[linewidth=1.25 pt]{->}(1.5,1.5)(3,1.5)
\psline[linewidth=1.25 pt]{->}(1.5,-1.5)(3,-1.5)
\psline[linewidth=1.25 pt]{->}(6.5,1.5)(6.5,0.25)
\psline[linewidth=1.25 pt]{->}(6.5,-1.5)(6.5,-0.25)
\psline[linewidth=1.25 pt]{->}(6.75,0)(7.75,0)
\psline[linewidth=1.25 pt](1.5,-1.5)(1.5,1.5)
\psline[linewidth=1.25 pt](5,1.5)(6.5,1.5)
\psline[linewidth=1.25 pt](5,-1.5)(6.5,-1.5)
\psline[linewidth=1.25 pt](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 code:
\begin{verbatim}
\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[linewidth=1.25 pt]{->}(0.5,0)(1.5,0)
\psline[linewidth=1.25 pt]{->}(1.5,1.5)(3,1.5)
\psline[linewidth=1.25 pt]{->}(1.5,-1.5)(3,-1.5)
\psline[linewidth=1.25 pt]{->}(6.5,1.5)(6.5,0.25)
\psline[linewidth=1.25 pt]{->}(6.5,-1.5)(6.5,-0.25)
\psline[linewidth=1.25 pt]{->}(6.75,0)(7.75,0)
\psline[linewidth=1.25 pt](1.5,-1.5)(1.5,1.5)
\psline[linewidth=1.25 pt](5,1.5)(6.5,1.5)
\psline[linewidth=1.25 pt](5,-1.5)(6.5,-1.5)
\psline[linewidth=1.25 pt](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{verbatim}
\subsubsection{pspolygon}
The {\tt pspolygon} is a great way to create arbitrary shapes!
\begin{verbatim}
\pspolygon(x0,y0)(x1,y1)(x2,y2) ... (xn,yn)
\end{verbatim}
You can provide an array of coordinates that will render a polygon \cite[10]{pstricks}
You can add an aribitray number of coordinates onto the end of the command, and produce any shape you'd like!
\begin{center}
\begin{pspicture}(-3,-3)(3,3)
\pspolygon(-1,-1)(-1,2)(1,0)(-2,0)(1,1)
\end{pspicture}
\end{center}
which can be produced with the following code:
\begin{verbatim}
\begin{pspicture}(-3,-3)(3,3)
\pspolygon(-1,-1)(-1,2)(1,0)(-2,0)(1,1)
\end{pspicture}
\end{verbatim}
\begin{center}
\begin{pspicture}(0,-3.5)(8,2)
\rput(0,0){$x$}
\rput(7.2,0){$y$}
\rput(5.5,-1.25){$z^{-1}$}
\rput(3.65,-2){$\alpha$}
\rput(1.5,-2.5){$H$}
% plus or minus for adder
\rput(2.1,-0.5){$-$}
\rput(1.45,0.35){$+$}
\psframe(1,-3)(6.5,1)
\pspolygon(4,-1.5)(4,-2.5)(2.5,-2)
\psline{->}(0.25,0)(1.5,0)
\psline{->}(1.75,-2)(1.75,-0.25)
\psline{->}(5.5,-2)(4,-2)
\psline(2.5,-2)(1.75,-2)
\psline{->}(2,0)(7,0)
\psline(5.5,-1.7)(5.5,-2)
\psline{->}(5.5,0)(5.5,-0.75)
\psframe(5, -1.7)(6,-0.75)
\pscircle(1.75,0){0.25}
\psline(1.5,0)(2,0)
\psline(1.75,0.25)(1.75,-0.25)
\end{pspicture}
\end{center}
Which can be produced with the following \TeX:
\begin{verbatim}
\begin{pspicture}(0,-3.5)(8,2)
\rput(0,0){$x$}
\rput(7.2,0){$y$}
\rput(5.5,-1.25){$z^{-1}$}
\rput(3.65,-2){$\alpha$}
\rput(1.5,-2.5){$H$}
\rput(2.1,-0.5){$-$}
\rput(1.45,0.35){$+$}
\psframe(1,-3)(6.5,1)
\pspolygon(4,-1.5)(4,-2.5)(2.5,-2)
\psline{->}(0.25,0)(1.5,0)
\psline{->}(1.75,-2)(1.75,-0.25)
\psline{->}(5.5,-2)(4,-2)
\psline(2.5,-2)(1.75,-2)
\psline{->}(2,0)(7,0)
\psline(5.5,-1.7)(5.5,-2)
\psline{->}(5.5,0)(5.5,-0.75)
\psframe(5, -1.7)(6,-0.75)
\pscircle(1.75,0){0.25}
\psline(1.5,0)(2,0)
\psline(1.75,0.25)(1.75,-0.25)
\end{pspicture}
\end{verbatim}
\subsection{Backwards Compatability}
\subsubsection{Rendering issues}
Because of the Web, there are a few inherent issues that we cannot really get around directly. HTML uses brackets to enclose HTML tags, '$\lt$' and '$\gt$', therefore, it is {\bf not} a good idea to use them in your mathematics.
MathJax addresses this on their website \href{http://docs.mathjax.org/en/latest/tex.html}{here} if you'd like to read more about it. The main reason is that the browser has access to the text before MathJax has a chance to render it. Now in the case of this platform, we actually {\it do} have access to the math before the DOM does, however, to keep consistent with the MathJax community, we've also decided to use the {\tt lt} and {\tt gt} commands to replace less than and greater than symbols.
\begin{align*}
a \lt b \\
b \gt a
\end{align*}
which can be produced using the following \LaTeX:
\begin{verbatim}
\begin{align*}
a \lt b \\
b \gt a
\end{align*}
\end{verbatim}
\subsubsection{Online and Offline environments}
Also there are two environments to encourage keeping your work both online (Web) and offline (PDF): {\tt print} and {\tt interactive}.
\begin{verbatim}
begin{print}
stuff for your PDF version goes here
end{print}
\end{verbatim}
\begin{verbatim}
begin{interactive}
stuff for your Web version goes here
end{interactive}
\end{verbatim}
We have provided, however, our .sty files for some sort of backwards and forwards compatibility \href{https://mathapedia.com/app/assets/tex/latex2html5.sty}{here}.
\subsubsection{Printing your work}
Download the .tex, save it as {\tt paper.tex}:
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/download-tex.ps}
\end{center}
\end{print}
\begin{interactive}
\img{/app/assets/paper/download-tex.png}
\end{interactive}
Download the .bib, save it as {\tt sources.bib}:
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/download-bib.ps}
\end{center}
\end{print}
\begin{interactive}
\img{/app/assets/paper/download-bib.png}
\end{interactive}
Then download the .sty files \href{https://mathapedia.com/app/assets/tex/latex2html5.sty}{here}.
Now, a number of different commands work for this, {\tt latex, pdflatex, xelatex}, but here is what I've gotten the best results with:
\begin{verbatim}
xelatex -shell-escape paper.tex
bibtex paper
xelatex -shell-escape paper.tex
xelatex -shell-escape paper.tex
\end{verbatim}
\subsection{extended interactivity}
\subsubsection{slider}
We have provided some useful elements to expose basic interactive functionality for an end user. The first of these is the {\tt slider} command.
Arguments for the {\tt slider} command are:
\begin{verbatim}
\slider{min}{max}{variable}{latex}{default}
\end{verbatim}
The min and max values are for specifying the minimum and maximum of the range of the slider.
The {\tt 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 {\tt variable} argument. The {\tt variable} specifies the variable that is changed based on the values of the slider, and can be used in the equations of {\tt psplot} commands.
Note that using these ``extended'' features are not backwards compatible, a.k.a they don't work on paper!
\begin{interactive}
\psset{unit=1cm}
\begin{center}
\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}
\end{center}
\end{interactive}
\begin{print}
\psset{unit=1cm}
\begin{center}
\begin{pspicture}(-3.5,-1)(3.75,3.5)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-3.14}{3.14}{cos(4*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}
\end{center}
\end{print}
Which can be created using the following \TeX:
\begin{verbatim}
\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}
\end{verbatim}
You can also add more than one slider (variable):
\begin{interactive}
\psset{unit=0.5cm}
\begin{center}
\begin{pspicture}(-13,-5)(13,10)
\slider{1}{8}{a}{amplitude}{4}
\slider{1}{8}{n}{frequency}{4}
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-12.56}{12.56}{a*sin(n*x)/(n*x)}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-12.6,0)(12.6,0)
\rput(0, -0.5){$0$}
\end{pspicture}
\end{center}
\end{interactive}
\begin{print}
\psset{unit=0.5cm}
\begin{center}
\begin{pspicture}(-13,-5)(13,10)
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-12.56}{12.56}{4*sin(4*x)/(4*x)}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-12.6,0)(12.6,0)
\rput(0, -0.5){$0$}
\end{pspicture}
\end{center}
\end{print}
which can be created with the following:
\begin{verbatim}
\begin{pspicture}(-13,-5)(13,10)
\slider{1}{8}{a}{amplitude}{4}
\slider{1}{8}{n}{frequency}{4}
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-12.56}{12.56}{a*sin(n*x)/(n*x)}
\psaxes[showorigin=false,labels=none, Dx=3.14](0,0)(-12.6,0)(12.6,0)
\rput(0, -0.5){$0$}
\end{pspicture}
\end{verbatim}
\subsubsection{userline}
{\tt userline} is just like {\tt psline}, except you can have extra arguments on the end to represent a user action. Suppose you'd like a vector to follow the user's cursor or finger on a computer or touch device. You can simply do
\begin{verbatim}
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{verbatim}
This places a vector at $(0,0)$ and initial value of the head at $(2,2)$. This will produce the following interaction
\begin{interactive}
\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}
\end{interactive}
\begin{print}
\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}
\end{print}
This can be produced with the following source:
\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}
If you specify more arguments, you can create functions for the head and and tail of the vector, which each takes the current $x$ and $y$ position of the users finger or cursor and they move.
2 extra arguments provide functions for the head, 4 extra arguments allows you to control both and tail
\begin{verbatim}
\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{verbatim}
and produce the following interaction
\begin{interactive}
\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}
\end{interactive}
\begin{print}
\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}
\end{print}
Then you can have fun with math!
\begin{interactive}
\begin{center}
\begin{pspicture}(-5,-5)(5,5)
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }
\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}
\end{pspicture}
\end{center}
\end{interactive}
\begin{print}
\begin{center}
\begin{pspicture}(-5,-5)(5,5)
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }
\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)
\end{pspicture}
\end{center}
\end{print}
\begin{verbatim}
\begin{pspicture}(-5,-5)(5,5)
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }
\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}
\end{pspicture}
\end{verbatim}
\subsubsection{uservariable}
The {\tt uservariable} command represents a variable that changes with user interaction such as touch or mouse events over the graphic.
\begin{verbatim}
\uservariable{variable}(x1,y1){f(x,y)}
\end{verbatim}
{\tt variable} is the variable that you can use in {\tt psplot} and {\tt userline} parameters and equations. Eventually it should be something you can use everywhere, but for the scope of this project, we kept it limited.
{\tt x1} and {\tt y1} are the initial values of {\tt x} and {\tt y} for the function $f(x,y)$ that is that last argument for the command. If there are no user interactions, the function is evaluated with the specified inital values.
On any user event, such as a touch or mouse event, the function $f(x,y)$ is evaluated and any dependent commands, namely {\tt psplot} and {\tt userline} are immediately notified and re-rendered with updated execution contexts.
Here is an example of teaching somebody integration, for example, you can represent $\int_a^b f(x) dx$ as:
\begin{interactive}
\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}
\end{interactive}
\begin{print}
\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}
\end{print}
which can be produced with the following \TeX:
\begin{verbatim}
\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{verbatim}
The next example allows you to move the height of the graph and also demonstrates how to specify an interval:
\begin{interactive}
\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}
\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}
which can be produced with the following source:
\begin{verbatim}
\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{verbatim}
\subsection{additional and proposed elements}
\subsubsection{img}
the {\tt img} command allows you to include an image.
\begin{interactive}
\img{https://c328740.ssl.cf1.rackcdn.com/mathjax/badge/badge-square-3.png}
\end{interactive}
\begin{print}
\img{images/mathjax.ps}
\end{print}
can be produced with the following source:
\begin{verbatim}
\img{https://c328740.ssl.cf1.rackcdn.com/mathjax/badge/badge-square-3.png}
\end{verbatim}
\subsubsection{youtube}
Sometimes the need to display videos is appropriate. For this, we provided a {\tt youtube} command. This only works online, and takes the youtube video id as an argument.
\begin{verbatim}
\youtube{QYMLMUKJyFc}
\end{verbatim}
\begin{interactive}
\youtube{QYMLMUKJyFc}
\end{interactive}
\subsection{BiBTeX}
\subsubsection{citations}
This platform would offer academics no value if it couldn't support citations, hence the {\tt cite} command has been added, with the ability to add BiBTeX references into the database.
The syntax right now is limited to this form:
\begin{verbatim}
\cite[pagenum]{name}
\end{verbatim}
where {\tt pagenum} must be a number, and {\tt name} is the has in the name provided in the BiBTeX.
First, navigate to the main table of contents for the book you are editing, and you will see a button that says ``Add Reference'':
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/add-reference.ps}
\end{center}
\end{print}
\begin{interactive}
\img{/app/assets/paper/add-reference.png}
\end{interactive}
Click on that and you can enter a BiBTeX reference. Here is an example in use:
``In a single stroke, Engelbart experienced a complete vision of the information age. He saw hiself sitting in front of a large computer screen full of different symbols ''
\cite[9]{dormouse}
\begin{verbatim}
@book{dormouse,
author = {John Markoff},
title = {What the Dormouse Said},
publisher = {Penguin Group},
year = {2005}
}
\end{verbatim}
When you are finished, you can download your .bib file:
\begin{print}
\begin{center}
\includegraphics[width=300pt]{images/download-bib.ps}
\end{center}
\end{print}
\begin{interactive}
\img{/app/assets/paper/download-bib.png}
\end{interactive}
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{JS Implementation}
\subsection{Frontend}
Some may notice that this application is what they call a ``single page application''. That means that the entire page is loaded once, and after that, only small pieces of the page are re-rendered. The Web page performs more like an application than traditional Web pages.
A lot of work went into ensuring an extensible and modular frontend infrastructure was in place. Managing the hierarchy of view rendering with many complex components on a web page can get tricky. As the system grew, it's complexity did as well. It became very important to build a system to last, a system that enables the addition of new features and makes it easy to find bugs.
\begin{quotation}
Unfortunately, as programs get large and complicated, as they almost always do, the adequacy, consistency, and correctness of the specifications themselves become open to doubt, so that complete formal arguments of correctness seldom accompany large
programs. Since large programs grow from small ones, it is crucial that we develop an arsenal of standard program structures of whose correctness we have become sure \cite[10]{sicp}
\end{quotation}
The ``arsenal'' of programming structures includes utilizing a multitude of programming patterns such as: module pattern, facade pattern, mediator pattern, observer pattern, and model-view-controller to name a few. It was crucial for the success of this platform, which was achieved with the help of aggregate technologies, and I would like to list off a few:
\begin{enumerate}
\item MathJax:
used to render math
\item Aura:
used for message passing infrastructure to decouple the application enabling modular development
\item Backbone:
provided an MVC and some communication between server and client
\item RequireJS:
provided a way to dynamically include and manage JavaScript libraries
\item Backbone Layout Manager:
managed the rendering of nested views, particular provided great interface for ``beforeRender'' and ``afterRender''
\item Async.js:
provided great interface for asynchronous control flow, facilitated development of application controller and data flow
\item CodeMirror:
great, super simple code editor used to edit the \TeX
\item D3:
jQuery-like interface to manipulating SVG, didn't really use it for what it can really do, but was useful
\item bootstrap:
provided CSS and JS for respsonsive design enabling display on multiple screen sizes
\item jQuery:
required by Backbone, but also in general a good way to manipulate the DOM
\item underscore.js:
a JavaScript utility belt that provides a lot of functionality while maintaining cross-browser gotchas
\item handlebars.js:
a great library for rendering client side templates
\end{enumerate}
\subsection{End to End JavaScript}
This entire website was built with one language, JavaScript. The main duties of the backend was to provide an {\it Application Programming Interface} (API) to the frontend. The data was stored in a MySQL database, and the server was built on top of node.js. The list of technologies that comprise the backend are:
\begin{enumerate}
\item nginx:
a super fast, light-weight web server
\item node.js:
a server-side JavaScript platform to build scalable applications
\item express.js:
a web application framework built on top of node.js
\item jugglingdb:
great library for handling MySQL connections through a standard ORM interface
\end{enumerate}
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{Limitations and Improvements}
\subsection{A Sketch}
Because I am only one person, I had to scope this project in many areas, and it is not a perfect system. There are many elements to create a mapping for, beyond the scope of this project, in the web to provide socket connections between devices, and also various recording and other uses of device sensors that could be expressed through typesetting.
Think of this project as the first sketch or proof of concept of a much bigger idea with much broader strokes---deeper in mathematics and even across other fields. The main point is to bring mathematicians closer to Web publishing that they are currently, by mapping typesetting to interactive programming:
\begin{quotation}
Another way to span the gulf is for the users to change their own conceptualization of the problem so that they come to think of it in the same terms as the system. In some sense, this means that the gulf is bridged by moving the user
closer to the system \cite[328]{directmanipulation}
\end{quotation}
\subsection{Additions}
New features that could make the platform better would be the ability to easily upload images and datasets. I think it would be great if a researcher could visualize the data that they are writing about in real-time.
Also, there could be some post-processing of \TeX\ to optimize some of the generated elements instead of requiring everything to be done at the client. This could improve some areas of performance and do syntax checking for PDF output, etc. It would also provide the ability to determine objects referenced in the bibliography better.
Figures aren't as structured as they could be, and tables don't exist yet. They definitely should be implemented.
The ability to allow users to upload their own macros. This can be very useful, espcially for porting a lot of older documentation that relies on macros to render properly without a major refactor.
Enabling the ability to add functions that generate PSTricks code in JavaScript. This way the platform can evolve with the authors, and abstract the \TeX\ away over time as people become more programming literate.
From a Web standpoint, caching could be implemented, and a few other improvements as time permits.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}
\section{Conclusion}
\subsection{What is the Assembly Language of Digital Publishing?}
In 1984, Abelson and Sussman brought up an intriguing idea: ``An exquisite engineering art has been developed balancing between multiplicity of function and density of devices. In any event, hardware always operates at a level more primitive than that at which we care to program'' \cite[1]{sicp}. Today, software operates at a level more primitive than at which (some) care to program.
More specifically, aspects of digital publishing concerning things like the user interface are also at a level more primitive than at which some care to program. If we simply look at blogging platforms or Facebook, we can see that people like to ``publish'', but don't want to have to worry about creating the user interface. Especially with books, it is the \emph{text} that is creative, the layout is expected.
\TeX\ has already been the de facto standard for publishing academic work, so why not combine the standard in academia for authoring with the standard de facto for Web consumption (HTML)? This bridges the gap between academic publishing and cutting edge technology.
``Unlike programs, computers must obey the laws of physics'' \cite[1]{sicp}. This quote suggests the loose structure and nature of the software developing environment, and user interface design is far more free from structure. \TeX\ provides us with some ``laws'' to obey in order to design the output of a text and graphical language around. Hence, we can attempt to create a synthesis of a structured user interface specification (\TeX) and a structured functional specification (HTML5) to provide a publishing platform for the current and next generation.
This project presents itself as a Sketch of what authoring the academic Web could be like, if we can take two standards bodies and combine them. It also opens up the door to cross more people over the Web authoring bridge, because not all \LaTeX\ authors know HTML5.
That's not to say people shouldn't learn to program, but some should still be able to express ideas digitally without having to worry about how to structure their ideas. That was the beauty of \TeX\ and \LaTeX, they provided a means to create beautiful published documents. The Art is where we can blend these two standards bodies; contributions like MathJAX, Backbone, Aura, and others can help people express their ideas by {\it providing higher levels of abstraction so the authors don't have to worry about the mechanisms by which the technology is rendering their works}. It is in these environments when people can express themselves freely.
\subsection{Interactive Text and Learning}
Just as it became important to author textbooks near the end of the $19^{th}$ century, in the $21^{st}$ century we've seen it's become important to program. More and more students are learning to program, but not everyone is a programmer, just like everyone wasn't an author in the $19^{th}$ century. Programmers are like the modern authors during an era when computer literacy is increasing. However, if we can use programming to enable some non-programmers to communicate technical ideas, then we can enable a larger population of ``modern'' authors.
What about \emph{interactive} authorship?
History has told us about how the democratization of knowledge has been inhibited by literacy, and that it's been used over societies to exercise power and dominance over subpopulations \cite[8]{power}. How can educators make students literate if the ability to control machines is indeed the key to a new era of literacy of this century?
As society progresses today, the amount of people who work in front of computer are increasing \cite[1]{power}. It's becoming more important in the modern world to be computer literate in general. Programming languages are built on top of languages like English, and can be used to express extremely complex ideas. If a person learns to code, perhaps the ability to express their ideas more closely to the actual concept of it in their mind can increase, or at least the number of ways they can store an idea in their mind. The analogy for the current use of the alphabet becomes like an ideogram, and programming will emulate the combination of ideograms to represent more complexity.
We speak more than words these days through technology---it's Time that software is accessible to everyone through Language, and the Web is the next big step towards this movement. But we also have to understand that it takes time, and not everyone is an ``author''. But for those who are interested, how can we bridge the gap?
\TeX\ is and has been the academic publishing standard, and HTML5 is the {\it lingua franca} of the Web. Within the unification of these two languages we can find a simple prescription---using \TeX\ for how things should ``look'' and HTML5 for how things should ``function''. \TeX\ is also closer to what most people understand as language, since it primarily uses text to write papers and books as opposed to programs---it is less abstact. Mapping a typesetting language to programming can help us build a robust online platform for documenting math and science, and one that is built to last.
Interactive experiences provide deeper learning because we use more parts of our brain, so authorship of these types of systems can catalyze the learning process. Students can learn concepts more effectively when presented with a digital textbook that provides interactive, mathematical diagrams, than compared to their dusty, scholastic counterparts.
When questioning whether or not computers are providing something positive in our lives---the computer is good. It {\it is} the future of the textbook. We {\it learn} from computers.
\begin{quotation}
Most of the time, a person sits down at her personal computer not to create, but to read, observe, study, explore, make cognitive connections, and ultimately come to an understanding. This person is not seeking to make her mark upon the world, but to rearrange her own neurons. The computer becomes a medium for asking questions, making comparisons, and drawing conclusions---that is, for learning \cite[7]{victor}.
\end{quotation}
To accelerate education, we need to first provide immersive learning experiences, and also accelerate the authorship of such interactive material. We can do the later by providing a language that expresses interactivity in a syntax that is as close to resembling mathematics as possible, to enable the common math professor to express their ideas through digital medium that their students can engage with.
\subsection{The Future of Education}
The convergence of standards proves to be a viable platform for moving society forward. The result of such agreements is a conduit for human ideas.
The aggregate history of computer science, literacy, and language all seem to assemble the idea that taking advantage of {\it existing} standards is conducive to the democratization of knowledge through communication systems formed as a result of the collective system. Gutenberg's life work took existing technology of the press and printing to create a movable type system that revolutionized literacy and education. The infrastructure of the Internet and the agreed standard of TCP/IP enabled Tim Berners-Lee to write HTTP, spawning the World Wide Web, which has exploded information across our Earth and made us a more global society in general.
Ideograms have metamorphosed into alphabets and languages, which have transformed into written words in books and now travel through the Internet as bits that make up 1's and 0's. The Information Age is here, and we can use computers for something positive: learning.
Computers have shown to be a positive part of our civilization, and history may be telling us that command of the computer is the future of literacy. In the future, end user programming will become more important. People will go from coding for others to coding for themselves---this is how we can \emph{truly} minimize the gulf of execution.
The expert in a given field may not be able to fully express their ideas if they must hire a developer or programmer, thus providing an interface to creating interactive environments through a language that they already use can close this gap, enabling the most optimal experiences for students learning.
\begin{quotation}
Alternately, a designer can draw a series of mockups, snapshots of how the graphic should look for various data sets, and present these to an engineer along with a verbal description of what they mean. The engineer, who is skilled in manipulating textual abstractions, then implements the behavior with a programming language. This results in ridiculously large feedback loops—--seeing the effect of a change might take a day instead of a second. It involves coordination and communication between at least two people, and requires that the designer justify herself---she must convince the engineer and possibly layers of management that each change is worth the engineer’s time. This is no environment for creative exploration \cite[43]{victor}
\end{quotation}
It's like letting somebody build a robot to do something for you, it's kind of clunky if you could just do it yourself! People should be writing their own software. Today's Web feeds and interfaces are the metastable relation between the next interfaces created by non-web-developers with written and spoken languages.
Until then, we can use current standards as a bridge until we reach new technological horizons. It is the Art that allows us to bridge the gap for those that are interested in \TeX\ and \LaTeX, and that is the expression which this project strives.
This platform is not a silver bullet, but it's a first step toward looking at our history to see what worked---combining standards. There are systems for graphics creation that are more powerful, but not as powerful in the audience they can reach as a result of the interface they provide. It's important to indoctrinate our society towards a new literacy, and guide them using small steps, instead of taking giant leaps where only a portion of society is literate.
The future of education will be affected by the future of programming and technology---the work done in the late 1950's and early 1960's set the stage for contributions that have shaped the technology timeline today. {\it What we build today will be used by our children tomorrow}. As ubiquitous computing pushes forward (e.g. when printed electronics are embedded in milk cartons and a kid can buy a Popsicle from the ice cream truck with his glasses), we need to find what will push us further.
In the end, the crucial point is that computers push us far beyond what we were ever capable of before, and will continue to do so. Using technology to create {\it increased levels of abstraction} for the documentation of science can push education and society forward. Higher-level learning will result in a smarter society. Using knowledge from aggregate sciences in the creation of supplemental learning tools can build positive foundations for our future's successful and meaningful experiences in higher education.
\newpage
\bibliographystyle{cell}
\bibliography{sources}
\end{document}