\documentclass[12pt,letterpaper]{article}

\usepackage{graphicx,color}
\usepackage{natbib}
\usepackage{amsmath,amsfonts,amsthm,amssymb,euscript,mathrsfs,url,bbm}
\usepackage{algorithmic, stmaryrd}
\usepackage[tight]{subfigure}
\usepackage{psfrag}
\usepackage{multirow}
\usepackage{fancyhdr,lastpage}

% some formatting from http://www.tedpavlic.com/post_homework_tex_example.php:
% In case you need to adjust margins:
\topmargin=-0.45in      %
\evensidemargin=-0.1in     %
\oddsidemargin=-0.4in      %
\textwidth=7.3in        %
\textheight=9.0in       %
\headsep=0.25in         %
\headheight=30pt

% Setup the header and footer
\pagestyle{fancy}
\lhead{CS 240: Computer Graphics, Prof. Mathieson \\\hmwkTitle:\ Fall 2016}
\cfoot{}
\rfoot{Page\ \thepage\ of\ \protect\pageref{LastPage}}
\renewcommand\headrulewidth{0.4pt}
\renewcommand\footrulewidth{0.4pt}

\newcommand{\R}{\mathbb{R}}
\newcommand{\Z}{\mathbb{Z}}
\newcommand{\N}{\mathbb{N}}
\newcommand{\Q}{\mathbb{Q}}

\newcommand{\var}{\mathop{\mbox{Var}}}
\newcommand{\cov}{\mathop{\mbox{Cov}}}
\newcommand{\grad}{\nabla}

\newcommand{\sCol}[1]{\mathscr{#1}}
\newcommand{\sCmp}[1]{#1^{\text{c}}}
\newcommand{\sigF}{\sigma\text{-field}}

\newcommand{\iidsim}{\stackrel{\mathrm{iid}}{\sim}}

\DeclareMathOperator{\leb}{Leb}
\DeclareMathOperator{\cl}{cl}
\DeclareMathOperator{\Ber}{Ber}
\DeclareMathOperator{\Poi}{Poi}
\DeclareMathOperator{\Gam}{Gam}
\DeclareMathOperator{\Bin}{Bin}
\DeclareMathOperator{\IG}{IG}
\DeclareMathOperator{\Max}{Max}
\DeclareMathOperator{\Exp}{Exp}
\DeclareMathOperator{\Nor}{Normal}
\DeclareMathOperator{\Uni}{Unif}
\DeclareMathOperator{\Par}{Pareto}
\DeclareMathOperator{\Dir}{Dir}
\DeclareMathOperator{\Bet}{Beta}
\DeclareMathOperator{\Cau}{Cau}
\DeclareMathOperator{\TN}{TN}
\DeclareMathOperator{\Null}{Null}

\DeclareMathOperator{\E}{E}

\newcommand{\probnumber}[1]{\noindent\textbf{(#1)}}

% Homework Specific Information
\newcommand{\hmwkTitle}{Transformation Notes}
\begin{document}

\section{Vectors}

The classical definition of a vector is quantity that has both a direction and a magnitude.  In this class, that definition still holds, but often we will be thinking of a vector as representing the location of a point in a Euclidean coordinate system.  So the point $\mathbf{v} = (4,3)$ could also be represented as the vector
\[ \bf{v} = \left[ \begin{array}{c} 4 \\ 3 \end{array} \right]. \]

\noindent Here we're using bold font to denote vectors.  If we drew an arrow from the origin (0,0) to (4,3), that would represent our vector $\bf{v}$.  Its direction is the direction of the arrow, and its magnitude $|\bf{v}|$ is the length of the arrow, in this case 5.  In general, if
\[ \mathbf{v} = \left[ \begin{array}{c} x \\ y \end{array} \right], \quad \text{then} \quad  |\mathbf{v}|  = \sqrt{x^2 + y^2}. \]


\subsection{Vector addition}

To add two (or more) vectors together, we can add their $x$ components and $y$ components separately, which has a very visual representation, shown in Figure \ref{fig:addition}.  In this example, adding the components separately gives us
\[ \mathbf{v}_1 + \mathbf{v}_2 = \left[ \begin{array}{c} 8 \\ 3 \end{array} \right] + \left[ \begin{array}{c} 1 \\ 5 \end{array} \right] = \left[ \begin{array}{c} 8+1 \\ 3+5 \end{array} \right] = \left[ \begin{array}{c} 9 \\ 8 \end{array} \right],  \]

which is exactly what we obtain from placing the vectors head to tail in the figure.  


\begin{figure}[h!]
\center
\includegraphics[width=0.3\textwidth]{figs/addition1.pdf} \hfill \includegraphics[width=0.3\textwidth]{figs/addition2.pdf} \hfill \includegraphics[width=0.3\textwidth]{figs/addition3.pdf}
\caption{Addition of two vectors $\mathbf{v}_1 = (8,3)$ in green and $\mathbf{v}_2 = (1,5)$ in red.  If we place the vectors head to tail, the resulting vector is their addition, which is the same as adding the $x$ and $y$ components separately. Either way we get that $\mathbf{v}_1 + \mathbf{v}_2 = (9,8)$, represented by the blue vector.}
\label{fig:addition}
\end{figure}

We will also be using 3D vectors, but the same notation and algebra still applies.  Vector notation displays the components as a column, which is important for matrix-vector multiplication later on.  However, to save space we can also use transpose (switch rows and columns) notation:
\[ \mathbf{v} = \left[ \begin{array}{c} x \\ y \end{array} \right] =  \left[ \begin{array}{cc} x \quad y \end{array} \right]^\text{T} \]

\section{Matrices}

In this class, a matrix is an array of numbers, arranged in rows and columns.  For us matrices will almost always represent a transformation or a collection of points.  It is important to note that a vector is also a matrix.  Matrices are not the only way to encode transformations - they happen to be convenient and well-studied for this purpose, which is why we are using them. Usually we denote matrices by a bold capital letter, for example
\[ \mathbf{A} = \left[ \begin{array}{rrr} 4 \ & 1 \ & 10 \\ -3 \ & 2 \ & 0 \end{array} \right] \]

\noindent The dimension of $\mathbf{A}$ is ordered ``rows $\times$ columns'', so in this case it is $2\times3$.

\subsection{Matrix addition}

Matrices can be added together component-wise just like vectors, provided they are of the {\em same} dimension.  In fact, we can think of each column of a matrix as being a vector (i.e. point).  So the following addition of matrices $\bf{A}$ and $\bf{B}$ can be thought of as adding $[a \quad c]^\text{T}$ + $[e \quad g]^\text{T}$ (first column of each matrix) and $[b \quad d]^\text{T}$ + $[f \quad h]^\text{T}$ (second column of each matrix):
\[ \mathbf{A} + \mathbf{B} = \left[ \begin{array}{cc} a \quad b \\ c \quad d \end{array} \right] + \left[ \begin{array}{cc} e \quad f \\ g \quad h \end{array} \right] = \left[ \begin{array}{cc} a+e \quad b+f \\ c+g \quad d+h \end{array} \right]. \]



\subsection{Matrix multiplication}

We can also multiply matrices, but this is not as straightforward as addition.  Matrix multiplication is defined in a particular way, and later on when we look at different transformations, there will be a better visual representation of what matrix multiplication is doing. Using the matrices from our addition example, we can build up $\bf{A}\bf{B}$ one entry at a time:
\vspace{2mm}

\begin{figure}[h!]
\center
\includegraphics[width=0.42\textwidth]{figs/mult1.pdf} \hspace{10mm} \includegraphics[width=0.42\textwidth]{figs/mult2.pdf} \\
\vspace{7mm}
\includegraphics[width=0.42\textwidth]{figs/mult3.pdf} \hspace{10mm} \includegraphics[width=0.42\textwidth]{figs/mult4.pdf}
\end{figure}

\noindent Therefore overall:

\[ \mathbf{AB} = \left[ \begin{array}{cc} a \quad b \\ c \quad d \end{array} \right] \left[ \begin{array}{cc} e \quad f \\ g \quad h \end{array} \right] = \left[ \begin{array}{cc} ae+bg \quad ab+fh \\ ce+dg \quad cf+dh \end{array} \right]. \]

\vspace{2mm}

Here we multiplied two $2\times2$ matrices, but, unlike addition, we can multiply matrices that do not have exactly the same dimension. However, the number of columns of the first matrix {\em must} match the number of rows of the second matrix.  So we could multiply a $4 \times 2$ matrix and a $2 \times 3$ matrix to obtain a $4 \times 3$ matrix.  One way to remember this is that the ``inner'' dimensions must match (2 in this example), and the ``outer'' dimensions will be the dimensions of the resulting matrix.  Note that swapping the multiplication order in this case would not be valid (we cannot multiply a $2 \times 3$ matrix and a $4 \times 2$ matrix in that order).

This brings us to an important point: matrix multiplication is not commutative, which means that $\mathbf{AB}$ is not necessary equal to $\mathbf{BA}$.  Even in the cases when both operations are valid (i.e. two square matrices), they do not always produce the same result.  In fact, if we were to select two random square matrices (for some definition of random), it's more likely that $\mathbf{AB} \neq \mathbf{BA}$ than $\mathbf{AB} = \mathbf{BA}$.  To practice, multiply the following two matrices in both orders:

\[ 
\mathbf{A} = \left[
\begin{array}{rr}
1 & -1 \\ 3 & 2
\end{array}
\right]
\quad
\text{and} \quad \mathbf{B} = \left[
\begin{array}{rr}
0 & 2 \\ -4 & 1
\end{array}
\right].
\]

\noindent You should get

\[ \mathbf{AB} = \left[
\begin{array}{rr}
-4 & 1 \\ -8 & 8
\end{array}
\right]
\quad
\text{and} \quad \mathbf{BA} = \left[
\begin{array}{rr}
6 & 4 \\ -1 & 6
\end{array}
\right].
\]


\section{Transformations} 

Now we are going to use matrices to represent different transformations of vectors.  In fact, every matrix is a transformation in that if we multiply vector $\bf{v}$ by matrix $\bf{T}$, we'll obtain some new vector $\bf{v}'$.  In this class, we want the transformations to mean something intuitive, like rotating a ball or reflecting an image in a mirror.  So we will use a specific set of transformation matrices to manipulate digital images in interesting ways.

\subsection{Reflect}

The first transformation we'll consider is reflection across an axis, specifically the $y$-axis.  Imagine we wanted to reflect the vector $\mathbf{v} = (1,1)$ across the $y$-axis, as shown in Figure \ref{fig:reflect1}.  If we imagine doing this, we can probably see that the resulting vector $\mathbf{v}'$ should be (-1,1).  How can we get there using a transformation matrix?

\begin{figure}[h!]
\center
\includegraphics[width=0.32\textwidth]{figs/reflect1.pdf}
\caption{Breaking up the vector $\bf{v}$ (shown in blue) into its $x$ (green) and $y$ (red) component vectors.}
\label{fig:reflect1}
\end{figure}

First we can break up $\bf{v}$ into its $x$ and $y$ components, which are also vectors, denoted $\bf{x}$ and $\bf{y}$.  Like our vector addition example, we know that
\[ \mathbf{v} = \mathbf{x} + \mathbf{y} = \left[ \begin{array}{r} 1 \\ 0 \end{array} \right] + \left[ \begin{array}{r} 0 \\ 1 \end{array} \right] = \left[ \begin{array}{r} 1 \\ 1 \end{array} \right]. \]

\vspace{2mm}
\noindent Now we can reflect $\mathbf{x}$ and $\mathbf{y}$ separately, as shown in Figure \ref{fig:reflect2}.

\begin{figure}[h!]
\center
\includegraphics[width=0.62\textwidth]{figs/reflect2.pdf}
\caption{Reflect the $x$ component and $y$ component separately across the $y$-axis.  The vector $\bf{x}$ (green) becomes $\mathbf{x}'$ (light green), and the vector $\bf{y}$ (red) becomes $\mathbf{y}'$ (pink), which is actually the same vector.} 
\label{fig:reflect2}
\end{figure}

\noindent Finally, we can add together the $\mathbf{x}'$ and $\mathbf{y}'$ to obtain the reflected result $\mathbf{v}'$, as shown in Figure \ref{fig:reflect3}.  
\begin{figure}[h!]
\center
\includegraphics[width=0.32\textwidth]{figs/reflect3.pdf}
\caption{Final vector $\bf{v'}$ (shown in light blue) obtained from the reflected $x$ component $\mathbf{x}'$ (light green) and reflected $y$ component $\mathbf{y}'$ (pink).} 
\label{fig:reflect3}
\end{figure}

These figures help us visualize what is going on, but also help us translate the process into a matrix multiplication problem.  When we're reflecting, we're always multiplying the $x$ coordinate by -1 and leaving the $y$ coordinate alone. So we can make a small modification to the identity matrix to obtain a reflection matrix:
\[   \text{Reflection across the $y$-axis matrix:} \quad \mathbf{R}_y = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right].
\]
\vspace{2mm}
Now we can multiply $\bf{v}$ by this matrix to obtain $\bf{v}'$.  Component-wise, this looks like
\[
\mathbf{R}_y \mathbf{v} = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right] \left[
\begin{array}{r}
1 \\  \color{white}{1}
\end{array}
\right] =  \left[ \begin{array}{r} -1 \ + \color{white}{0} \\  0 \ + \color{white}{0}  \end{array} \right] \quad \quad \quad \quad \text{$x$ component vector } \mathbf{x}
\]

\[
\mathbf{R}_y \mathbf{v} = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right] \left[
\begin{array}{r}
\color{white}{1} \\1
\end{array}
\right] =  \left[ \begin{array}{r} {\color{white}{-1}} + \ 0  \\  {\color{white}{-1}} + \ 1   \end{array} \right] \quad \quad \quad \quad \text{$y$ component vector } \mathbf{y}
\]
\vspace{2mm}

\noindent So the addition part of matrix multiplication is analogous to adding the $x$ and $y$ component vectors as we saw in the figures above.  Overall, we obtain

\[
\mathbf{R}_y \mathbf{v} = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right] \left[
\begin{array}{r}
1 \\1
\end{array}
\right] =  \left[ \begin{array}{r}  -1  \\  1   \end{array} \right] = \mathbf{v}' 
\]

\vspace{2mm}

\noindent as we expected.  And in general, for $\mathbf{w} = (x,y)$:
\[
\mathbf{R}_y \mathbf{w} = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right] \left[
\begin{array}{r}
x \\ y
\end{array}
\right] =  \left[ \begin{array}{r}  -x \\  y   \end{array} \right]. 
\]

 Often we will not only want to transform one point, but a set of points or an entire shape.  For example, if we wanted to reflect a unit square across the $y$-axis, we could transform all the points at once, using our reflection matrix $\mathbf{R}_y$. Let $\mathbf{S}$ be a matrix denoting the points of our unit square (so each column is a point).  To reflect $\mathbf{S}$ to obtain $\mathbf{S'}$, we multiply:
 
 \vspace{2mm}
 
\[
\mathbf{R}_y \mathbf{S} = \left[
\begin{array}{rr}
-1 & 0 \\ 0 & 1
\end{array}
\right] \left[
\begin{array}{rrrr}
0 & 1 & 1 & 0 \\ 0 & 0 & 1 & 1
\end{array}
\right] =  \left[ \begin{array}{rrrr}  0 & -1 & -1 & 0 \\ 0 & 0 & 1 & 1   \end{array} \right] = \mathbf{S}'.
\]

\vspace{3mm}
\noindent If we plot each of these columns as a point, we should obtain the reflected square, as shown in Figure \ref{fig:reflect_square}.

 \begin{figure}[h!]
\center
\includegraphics[width=0.67\textwidth]{figs/reflect_square.pdf}
\caption{Square $\mathbf{S}$ (purple) reflected across the $y$-axis to obtain square $\mathbf{S}'$ (light purple).  Each column of $\mathbf{S}$ is a vertex of the square, which is transformed (i.e. reflected) using the matrix $\mathbf{R}_y$ as shown above.}
\label{fig:reflect_square}
\end{figure}

\noindent {\bf Q}: What is the transformation matrix $\mathbf{R}_x$ for reflection across the $x$-axis?

 \subsection{Scale}
 
 We can write down a similar transformation matrix for rescaling a vector, called $\mathbf{A}_{(a, b)}$.  Let $a$ be the scaling factor for the $x$ component of the vector, and $b$ be the scaling factor for the $y$ component of the vector.  So to transform our generic vector $\mathbf{w} = (x,y)$ into $\mathbf{w}'$, we can multiply:

 
 \[
\mathbf{A}_{(a, b)} \mathbf{w} = \left[
\begin{array}{rr}
a_x & 0 \\ 0 & a_y
\end{array}
\right] \left[
\begin{array}{r}
x \\ y
\end{array}
\right] =  \left[ \begin{array}{r}  a x \\  b y   \end{array} \right] = \mathbf{w}'.
\]

\vspace{2mm}

\noindent Figure \ref{fig:scale_square} shows a scaling transformation applied to our unit square, with $a=2$ and $b=3$. In matrix notation, this transformation looks like

\vspace{1mm}

\[
\mathbf{A}_{(2,3)} \mathbf{S} = \left[
\begin{array}{rr}
2 & 0 \\ 0 & 3
\end{array}
\right] \left[
\begin{array}{rrrr}
0 & 1 & 1 & 0 \\ 0 & 0 & 1 & 1
\end{array}
\right] =  \left[ \begin{array}{rrrr}  0 & 2 & 2 & 0 \\ 0 & 0 & 3 & 3   \end{array} \right] = \mathbf{S}'.
\]

\vspace{2mm}

\noindent So we can again see that the columns of $\mathbf{S}'$ are the 4 vertices of the transformed square (now a rectangle). 

 
 \begin{figure}[h!]
\center
\includegraphics[width=0.67\textwidth]{figs/scale.pdf}
\caption{Square $\mathbf{S}$ (purple), with the $x$ component scaled by 2 and the $y$ component scaled by 3 to obtain square $\mathbf{S}'$ (light purple).}
\label{fig:scale_square}
\end{figure}

\subsection{Rotate}

The next transformation we'll investigate is rotating a vector counterclockwise by an angle $\theta$.  Figure \ref{fig:rotate1} shows an example vector $\mathbf{v}  = (x,y)$, which we would like to rotate by an angle $\theta$ to obtain $\mathbf{v}'$. As we have done before, we'll decompose $\mathbf{v}$ into its $x$ and $y$ components, shown in green and red.

 \begin{figure}[h!]
\center
\includegraphics[width=0.4\textwidth]{figs/rotate1.pdf}
\caption{We would like to rotate vector $\mathbf{v} = (x,y)$ (blue) by an angle $\theta$, to obtain $\mathbf{v}'$. First we decompose $\mathbf{v}$ into its $x$ component: $\mathbf{x} = (x,0)$ (green) and $y$ component: $\mathbf{y} = (0,y)$ (red).}
\label{fig:rotate1}
\end{figure}

\vspace{2mm}
Now we can rotate each component separately, starting with rotating $\mathbf{x} = (x,0)$ to obtain $\mathbf{x'}$. In Figure \ref{fig:rotate23} on the left, we can see that the yellow lines and the vector $\mathbf{x}'$ (hypotenuse) form a right triangle. Using right triangle trigonometry, we can write down the coordinates of $\mathbf{x}'$:

\[
\mathbf{x}' = \left[
\begin{array}{r}
x \cos \theta \\ x \sin \theta
\end{array}
\right].
\]

Similarly, we can rotate the $y$ component (Figure \ref{fig:rotate23} on the right), and find the new coordinates (in purple) of $\mathbf{y}'$ using right triangle trigonometry:

\[
\mathbf{y}' = \left[
\begin{array}{r}
-y \sin \theta \\ y \cos \theta
\end{array}
\right].
\]

\begin{figure}[h!]
\center
\includegraphics[width=0.4\textwidth]{figs/rotate2.pdf} \hfill \includegraphics[width=0.4\textwidth]{figs/rotate3.pdf}
\caption{On the left, we've rotated the $x$ component (green) and found the new coordinates (yellow) that make up $\mathbf{x}'$. Similarly, on the right we've rotated the $y$ component (red) and found the coordinates (purple) of $\mathbf{y}'$.}
\label{fig:rotate23}
\end{figure}

\noindent After obtaining these separate components, we can add them together:

\[ \mathbf{v}' = \mathbf{x}' + 
\mathbf{y}' = \left[
\begin{array}{r}
x \cos \theta \\ x \sin \theta
\end{array}
\right] + \left[
\begin{array}{r}
-y \sin \theta \\ y \cos \theta
\end{array}
\right] = \left[
\begin{array}{r}
x \cos \theta - y \sin \theta \\ x \sin \theta + y \cos \theta
\end{array}
\right].
\]

\vspace{2mm}
\noindent This is shown visually in Figure \ref{fig:rotate4}.  As a matrix multiplication problem, we can now define a rotation matrix, denoted $\mathbf{R}_\theta$, and make sure it has the correct effect on $\mathbf{v}$:

\[ \mathbf{R}_\theta \mathbf{v} = \left[
\begin{array}{rr}
\cos \theta & - \sin \theta \\ \sin \theta &  \cos \theta
\end{array}
\right]
\left[
\begin{array}{r}
x  \\ y
\end{array}
\right] = 
 \left[
\begin{array}{r}
x \cos \theta - y \sin \theta \\ x \sin \theta + y \cos \theta
\end{array}
\right].
\]

\begin{figure}[h!]
\center
\includegraphics[width=0.5\textwidth]{figs/rotate4.pdf}
\caption{After adding the vectors $\mathbf{x}'$ (green) and $\mathbf{y}'$ (red), we obtain the final rotated vector $\mathbf{v}'$ (blue).}
\label{fig:rotate4}
\end{figure}

\subsection{Translate}


\begin{figure}[h!]
\center
\includegraphics[width=0.5\textwidth]{figs/translate.pdf}
\caption{After adding the vectors $\mathbf{x}'$ (green) and $\mathbf{y}'$ (red), we obtain the final rotated vector $\mathbf{v}'$ (blue).}
\label{fig:translate}
\end{figure}

\end{document}
