X-Git-Url: https://git.ucc.asn.au/?p=ipdf%2Fsam.git;a=blobdiff_plain;f=chapters%2FBackground_DOM.tex;h=a388230dfb9e17a7daf060d3d7d0d725db579d6f;hp=5768411a326b7fc74cbcf1a323191607c48dfb9d;hb=0d7e6aa4d2966020240ea5b5f2a824502f271eaa;hpb=1e1740165abac91f4f620ef8223a30e37e7124ab diff --git a/chapters/Background_DOM.tex b/chapters/Background_DOM.tex index 5768411..a388230 100644 --- a/chapters/Background_DOM.tex +++ b/chapters/Background_DOM.tex @@ -17,9 +17,9 @@ var node = document.getElementById("curvedshape"); // Find the node by its uniqu 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 an 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{koch1904surune} in 1904 and a popular example in modern literature \cite{goldman_thefractal}. Unfortunately as it is currently possible to directly include W3C HTML in a PDF, we are only able to provide some examples of the output as static images in Figure \ref{koch}. The W3C has produced a primer describing the use of HTML5 and Javascript to produce interactive SVG's\cite{w3c2010svghtmlprimer}, and the HTML5 and SVG standards themselves include several examples. +To illustrate the power of this technique we have produced an 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{koch1904surune} in 1904 and a popular example in modern literature \cite{goldman_thefractal}. Unfortunately as including W3C HTML directly in a standard PDF is not possible, we are only able to provide some examples of the output as static images in Figure \ref{koch}. The W3C has produced a primer describing the use of HTML5 and Javascript to produce interactive SVG's\cite{w3c2010svghtmlprimer}, and the HTML5 and SVG standards themselves include several examples. -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}. +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, the SVG path descriptions and the PostScript interpreted approach to drawing\cite{hayes2012pixels}. \begin{figure}[H] \begin{minipage}[t]{0.65\textwidth}