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. 

Coordinate Systems