From: Sam Moore Date: Tue, 20 May 2014 13:48:17 +0000 (+0800) Subject: Webby DOM stuff X-Git-Url: https://git.ucc.asn.au/?p=ipdf%2Fsam.git;a=commitdiff_plain;h=20f882fefa7e17840ddec6ce1c5c8e15764bb0fa Webby DOM stuff Now I've got that out of my system I should do the previous section "Why Knuth Is Right And Everyone Else Is Wrong" about PostScript, PDF, TeX/LaTeX and METAFONT. Then I really want to write about actual floats I mean it's about floats god dammit There is too many things for this to work It's like, anything that is vaguely related in any way to producing a pixel on a screen is relevant to our literature. Are we just Doing It Wrong?But I can't leave it all out now --- diff --git a/.gitignore b/.gitignore index 57e9477..e022496 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ page*.pdf page*.svg ratings.db *.pyg +*.lof diff --git a/chapters/Background.tex b/chapters/Background.tex index bc3b089..8a85ce0 100644 --- a/chapters/Background.tex +++ b/chapters/Background.tex @@ -30,8 +30,7 @@ Splines are continuous curves formed from piecewise polynomial segments. A polyn A straight line is simply a polynomial of $0$th degree. Splines may be rasterised by sampling of $y(x)$ at a number of points $x_i$ and rendering straight lines between $(x_i, y_i)$ and $(x_{i+1}, y_{i+1})$ as discussed in Section \ref{Straight Lines}. More direct algorithms for drawing splines based upon Brasenham and Wu's algorithms also exist\cite{citationneeded}. -There are many different ways to define a spline. One approach is to specify ``knots'' on the spline and solve for the cooefficients to generate a cubic spline ($n = 3$) passing through the points. Alternatively, special polynomials may be defined using ``control'' points which themselves are not part of the curve; these are convenient for graphical based editors. For example, drawing bezier curves with the mouse is the primary method of constructing paths in the Inkscape SVG editor\cite{inkscape}. - +There are many different ways to define a spline. One approach is to specify ``knots'' on the spline and solve for the cooefficients to generate a cubic spline ($n = 3$) passing through the points. Alternatively, special polynomials may be defined using ``control'' points which themselves are not part of the curve; these are convenient for graphical based editors. Bezier splines are the most straight forward way to define a curve in the standards considered in Section \ref{Document Representations} \subsubsection{Bezier Curves} \input{chapters/Background_Bezier} @@ -55,7 +54,7 @@ Traditionally, vector graphics have been rasterized by the CPU before being sent \rephrase{2. Here are the ways documents are structured ... we got here eventually} -\section{Document Representations} +\section{Document Representations}\label{Document Representations} The representation of information, particularly for scientific purposes, has changed dramatically over the last few decades. For example, Brassel's 1979 paper referenced earlier has been produced on a mechanical type writer. Although the paper discusses an algorithm for shading on computer displays, the figures illustrating this algorithm have not been generated by a computer, but drawn by Brassel's assistant\cite{brassel1979analgorithm}. In contrast, modern papers such as Barnes et. al's recent paper on embedding 3d images in PDF documents\cite{barnes2013embeddding} can themselves be an interactive proof of concept. @@ -88,6 +87,7 @@ Hayes' 2012 article ``Pixels or Perish'' discusses the recent history and curren \item Solves security issues, more efficient \end{itemize} +\pagebreak \subsection{Document Object Model}\label{Document Object Model} \input{chapters/Background_DOM} @@ -107,7 +107,7 @@ The document and the code that produces it are one and the same. \section{Precision in Modern Document Formats} -We briefly summarise the requirements of standard document formats in regards to the precision of number representations: +We briefly summarise the requirements of the standards discussed so far in regards to the precision of mathematical operations: \begin{itemize} \item {\bf PostScript} predates the IEEE-754 standard and originally specified a floating point representation with ? bits of exponent and ? bits of mantissa. Version ? of the PostScript standard changed to specify IEEE-754 binary32 ``single precision'' floats. \item {\bf PDF} has also specified IEEE-754 binary32 since version ?. Importantly, the standard states that this is a \emph{maximum} precision; documents created with higher precision would not be viewable in Adobe Reader. diff --git a/chapters/Background_Bezier.tex b/chapters/Background_Bezier.tex index 2d49de9..2ec2a2f 100644 --- a/chapters/Background_Bezier.tex +++ b/chapters/Background_Bezier.tex @@ -1,3 +1,5 @@ +Cubic beziers form all curves in the PostScript\cite{plrm}, PDF\cite{pdfref17} and SVG\cite{svg2011-1.1} standards which we will discuss in Section \ref{Document Representations}. One of the shapes in Figure \ref{SVG} is a region defined by a cubic bezier spline. Beziers are also used to construct vector fonts for rendering text in these standards. + A Bezier Curve of degree $n$ is defined by $n$ ``control points'' $\left\{P_0, ... P_n\right\}$. Points $P(t)$ along the curve are defined by: \begin{align} @@ -7,9 +9,10 @@ Points $P(t)$ along the curve are defined by: From this definition it should be apparent $P(t)$ for a Bezier Curve of degree $0$ maps to a single point, whilst $P(t)$ for a Bezier of degree $1$ is a straight line between $P_0$ and $P_1$. $P(t)$ always begins at $P_0$ for $t = 0$ and ends at $P_n$ when $t = 1$. Figure \ref{bezier_3} shows a Bezier Curve defined by the points $\left\{(0,0), (1,0), (1,1)\right\}$. -Figure \ref{SVG} shows a more complex spline defined by Bezier curves. A straightforward algorithm for rendering Bezier's is to simply sample $P(t)$ for some number of values of $t$ and connect the resulting points with straight lines using Bresenham or Wu's algorithm (See Section \ref{Straight Lines}). Whilst the performance of this algorithm is linear, in ???? De Casteljau derived a more efficient means of sub dividing beziers into line segments. Recently, Goldman presented an argument that Bezier's could be considered as fractal in nature, a fractal being the fixed point of an iterated function system\cite{goldman_thefractal}. Goldman's proof depends upon a modification to the De Casteljau Subdivision algorithm which expresses the subdivisions as an iterated function system. + + diff --git a/chapters/Background_DOM.tex b/chapters/Background_DOM.tex index bb5d169..f6adfd4 100644 --- a/chapters/Background_DOM.tex +++ b/chapters/Background_DOM.tex @@ -1,12 +1,28 @@ - The Document Object Model (DOM) represents a document as a tree like data structure with the document as a root node. The elements of the document are represented as children of either this root node or of a parent element. In addition, elements may have attributes which contain information about that particular element. -The DOM is described within several W3C standards including XML, HTML and SVG. XML is a general language which is intended for representing any tree-like structure using the DOM, whilst languages such as HTML\cite{citationneeded} and SVG\cite{citationneeded} are specifically intended for representing visual information. SVG is defined as a type of XML, whilst HTML is tecnically distinct from XML. Both HTML and XML are supposedly be based upon a language called SGML which is not actually defined \rephrase{except in the foulest chapters of the necromonicom}. Then there is XHTML which is HTML but also XML. \rephrase{Cut the crap about what is and is not valid XML? We only care about the DOM we're not fucking web designers here}. +The World Wide Web Consortium (W3C) is an organisation devoted to the development of standards for structuring and rendering web pages based on industry needs. The DOM is used by several W3C recommendations including XML\cite{xml2008-1.0}, HTML\cite{html2014-draft} and SVG\cite{svg2011-1.1}. XML is a general language which is intended for representing any tree-like structure using the DOM, whilst HTML and SVG are specifically intended for representing visual information to humans. These languages make use of Cascading Style Sheets (CSS)\cite{css2011-level2} for specifying the appearance of elements. + +Version 5 of the Hypertext Markup Language (HTML5) is currently a candidate recommendation which aims to standardise the state of the art in technologies relating to web based documents. In HTML5 it is possible to achieve almost any level of control over both the structure and rendering of a document desirable. In particular, the interpreted language Javascript included in the HTML5 standard can be used to dynamically alter the document as it is viewed in response to user input or other events such as communication with a remote server. + +The Scalable Vector Graphics (SVG) recommendation defines a language for representing vector images using the DOM. This is intended not only for stand alone images, but also for inclusion within HTML documents. In the SVG standard, each graphics primitive is an element in the DOM, whilst attributes of the element give information about how the primitive is to be drawn, such as path coordinates, line thickness, mitre styles and fill colours. Figure \ref{SVG} shows an example of an SVG image as rendered (left) and represented as text. The textual representation is syntactically a subset of XML and is similar to HTML.\footnote{The exact details of classification of these languages (such as why HTML cannot be defined as a subset of XML) are beyond the scope of this report.} Here we have used \verb// elements to position rectangles and \verb// elements to define a straight line and a filled region bounded by a cubic bezier spline; note that the points and type of curves are defined as a data attribute. + -The HyperText Markup Language (HTML) was, as its name implies, originally intended mostly for text. When combined with Cascading Style Sheets (CSS) control over the positioning and style of the text can be acheived. Images stored in some other format can be rendered within a HTML document, but HTML does not include ways to specify graphics primitives or their coordinates. -The Scalable Vector Graphics (SVG) standard was designed to represent a vector image. In the SVG standard, each graphics primitive is an element in the DOM, whilst attributes of the element give information about how the primitive is to be drawn, such as path coordinates, line thickness, mitre styles and fill colours. Figure \ref{SVG} shows an example of an image defined using the SVG format. The first two lines are only required for a stand alone image; the HTML standard allows for rendering an SVG within a web page using the \verb// tag. \rephrase{Read the standards a bit more carefully here...} +\subsubsection{Javascript and the DOM} +The W3C has produced a primer describing the use of HTML5 Javascript to produce interactive SVG's\cite{w3c2010svghtmlprimer}, and the HTML5 and SVG standards themselves include several examples discussing the use of Javascript to manipulate the DOM. + +In Javascript, an element in the DOM can be selected by its type, class, name, or unique identifier, each of which may be specified as an attribute in the original DOM. Once an element is selected Javascript can be used to modify its attributes, add children below it in the DOM, or remove it from the DOM entirely. + +For example, the following Javascript acting on the DOM described in Figure \ref{SVG} would change the fill colour of the curved shape from red \verb/#ff0000/ to black \verb/#000000/: +\begin{minted}{javascript} +var node = document.getElementById("curvedshape"); // Find the node by its unique id +node.style.fill = "#000000"; // Change the ``style'' attribute and set the CSS fill colour +\end{minted} + +To illustrate the power of this technique we have produced our own example to generate an SVG interactively using HTML. The example generates successive iterations of a particular type of fractal curve first described by Koch\cite{koch, goldman_fractal}. Unfortunately as it is currently not possible to include HTML within a PDF, we are only able to provide some examples of the output as static images in Figure \ref{koch}. + +In HTML5, Javascript is not restricted to merely manipulating the DOM to alter the appearance of a document. The \verb// tag and associated API provide a means to directly set the values of pixels on a display. This sort of low level API is inteded for performance intensive graphical applications such as web based games\footnote{For an example by the author including both the canvas2d and experimental WebGL APIs see \url{http://rabbitgame.net}}. As Hayes points out, there is some similarity between the \verb// API and the PostScript interpreted approach to drawing\cite{hayes2012pixelsor}. \begin{figure}[H] \begin{minipage}[t]{0.3\textwidth} @@ -29,7 +45,7 @@ The Scalable Vector Graphics (SVG) standard was designed to represent a vector i x = "30" y = "20" width = "30" height = "150" style = "fill:#0000ff; fill-opacity:0.5; stroke:#000000;"/> -this link to view the Javascript in koch.js

"; - data += ""; + var data = ""; + data += ""; data += "" var win = window.open("image/svg+xml"); win.document.write(data); diff --git a/figures/koch.svg b/figures/koch.svg new file mode 100644 index 0000000..bdfee6d --- /dev/null +++ b/figures/koch.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/figures/koch1.pdf b/figures/koch1.pdf new file mode 100644 index 0000000..2c11fa8 Binary files /dev/null and b/figures/koch1.pdf differ diff --git a/figures/koch1.svg b/figures/koch1.svg new file mode 100644 index 0000000..0d220a0 --- /dev/null +++ b/figures/koch1.svg @@ -0,0 +1,4 @@ + + + diff --git a/figures/koch2.html b/figures/koch2.html new file mode 100644 index 0000000..bdfee6d --- /dev/null +++ b/figures/koch2.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/figures/koch2.pdf b/figures/koch2.pdf new file mode 100644 index 0000000..d6d8592 Binary files /dev/null and b/figures/koch2.pdf differ diff --git a/figures/koch2.svg b/figures/koch2.svg new file mode 100644 index 0000000..a5de026 --- /dev/null +++ b/figures/koch2.svg @@ -0,0 +1,4 @@ + + + diff --git a/figures/koch3.pdf b/figures/koch3.pdf new file mode 100644 index 0000000..9369146 Binary files /dev/null and b/figures/koch3.pdf differ diff --git a/figures/koch3.svg b/figures/koch3.svg new file mode 100644 index 0000000..3bfed29 --- /dev/null +++ b/figures/koch3.svg @@ -0,0 +1,4 @@ + + + diff --git a/thesis.pdf b/thesis.pdf index 99f62bb..11a8cd9 100644 Binary files a/thesis.pdf and b/thesis.pdf differ