LINEAR-COMBINATIONS
<p>
The diagram below can be used to construct linear combinations whose
weights \(a\) and \(b\) may be varied using the sliders at the top.  The
vectors \({\mathbf v}\) and \({\mathbf w}\) are drawn in gray while the
linear combination
$$
a{\mathbf v} + b{\mathbf w}
$$
is in red.
</p>

<p>
  <div style="text-align:center">
  <canvas id="topsliders" width="350" height="100">
    Your browser does not support HTML5 Canvas.
  </canvas>
  <br>
  <canvas id="topcanvas" width="350" height="350" hspace=5>
    Your browser does not support HTML5 Canvas.
  </canvas>
  <script type='text/javascript' src='jslibrary/figures.js'></script>
  <script type='text/javascript' src='jslibrary/linearcomb.js'></script>
  </div>
</p>
=======================================

The diagram available at
\href{http://gvsu.edu/s/0Je}{http://gvsu.edu/s/0Je}
can be used to construct linear combinations whose
weights $a$ and $b$ may be varied using the sliders at the top.  The
vectors ${\mathbf v}$ and ${\mathbf w}$ are drawn in gray while the
linear combination
$$
a{\mathbf v} + b{\mathbf w}
$$
is in red.

=======================================
SPAN1
<p>
The diagram below can be used to construct linear combinations whose
weights \(a\) and \(b\) may be varied using the sliders at the top.  The
vectors \({\mathbf v}\) and \({\mathbf w}\) are drawn in gray while the
linear combination
$$
a{\mathbf v} + b{\mathbf w}
$$
is in red.
</p>

<p>
  <div style="text-align:center">
  <canvas id="bottomsliders" width="350" height="100">
    Your browser does not support HTML5 Canvas.
  </canvas>
  <br>
  <canvas id="bottomcanvas" width="350" height="350" hspace=5>
    Your browser does not support HTML5 Canvas.
  </canvas>
  </div>
</p>
=======================================

The diagram available at the top of
\href{http://gvsu.edu/s/0Jg}{http://gvsu.edu/s/0Jg}
can be used to construct linear combinations whose
weights $a$ and $b$ may be varied using the sliders at the top.  The
vectors ${\mathbf v}$ and ${\mathbf w}$ are drawn in gray while the
linear combination
$$
a{\mathbf v} + b{\mathbf w}
$$
is in red.


=======================================
SPAN2
<p>
In a similar way, the diagram below can be used to construct
  linear combinations 
$$
a{\mathbf v} + b{\mathbf w}\text{.}
$$
</p>

<p>
  <div style="text-align:center">
  <canvas id="topsliders" width="350" height="100">
    Your browser does not support HTML5 Canvas.
  </canvas>
  <br>
  <canvas id="topcanvas" width="350" height="350" hspace=5>
    Your browser does not support HTML5 Canvas.
  </canvas>
  <script type='text/javascript' src='jslibrary/figures.js'></script>
  <script type='text/javascript' src='jslibrary/linearcomb1.js'></script>
  </div>
</p>
=======================================

The diagram available at the bottom of
\href{http://gvsu.edu/s/0Jg}{http://gvsu.edu/s/0Jg}
can be used to construct
  linear combinations 
$$
a{\mathbf v} + b{\mathbf w}\text{.}
$$

=======================================
MATRIX-MULT-1
<p>
The diagram below depicts a matrix transformation \(T\text{.}\)  In the plane
  on the left is shown the vector \(\xvec\) in red;  the plane on the
  right shows the vector \(T(\xvec)\).  You may vary the vector
  \(\xvec\) by clicking in the head of the arrow.
</p>
<p>
  <div style="text-align:center">
    <canvas id="topleft" width="250" height="250" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
    <canvas id="topright" width="250" height="250" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
  </div>
</p>
=======================================

There is an interactive figure to explore a matrix transformation that
goes here.  More later.

=======================================
MATRIX-MULT-2
<p>
The diagram below demonstrates the effect of a matrix transformation
  on the plane.  You may modify the matrix \(A\) defining the matrix
  transformation \(T\) through the sliders at the top.  You may also move
  the red vector \({\mathbf x}\) on the left, by clicking in the head of the
  vector, and observe \(T({\mathbf x})\) on the right.
</p>

<p>
  <div style="text-align:center">
    <canvas id="bottomsliders" width="450" height="100">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <br>
    <canvas id="bottomleft" width="250" height="250" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
    <canvas id="bottomright" width="250" height="250" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src="jslibrary/figures.js"></script>
    <script type='text/javascript' src="jslibrary/mult.c.js"></script>
  </div>
<p>
=======================================

The diagram available at
\href{http://gvsu.edu/s/0Jf}{http://gvsu.edu/s/0Jf}
demonstrates the effect of a matrix transformation
  on the plane.  You may modify the matrix $A$ defining the matrix
  transformation $T$ through the sliders at the top.  You may also move
  the red vector ${\mathbf x}$ on the left, by clicking in the head of the
  vector, and observe $T({\mathbf x})$ on the right.

=======================================
ANIMATE
<p>
The diagram below allows you to create matrix transformations of this
  form to move our character into different poses.  You may use it to help
  address the following questions.
</p>

<p>
  <div style="text-align:center">

  	<table cellpadding = 5 align=center>
	  <tr> <td>
              <canvas id="a" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	    <td>
              <canvas id="b" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	    <td>
              <canvas id="c" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	  </tr>

	  <tr> <td>
              <canvas id="d" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	    <td>
              <canvas id="e" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	    <td>
              <canvas id="f" width="150" height="45">
		Your browser does not support HTML5 Canvas.
              </canvas>
	    </td>
	  </tr>
	</table>

	<table cellpadding = 10 align = center>
	  <tr> <td>
	      <canvas id="left" width="250" height="250" hspace="10">
		Your browser does not support HTML5 Canvas.
	      </canvas>
	    </td>
	    <td>
	      <canvas id="right" width="250" height="250" hspace="10">
		Your browser does not support HTML5 Canvas.
	      </canvas>
	    </td>
	  </tr>
	</table>
	<button type="button" id="compose"> Compose </button>
	<button type="button" id="reset"> Reset </button>
        <script type='text/javascript' src='jslibrary/animate.js'></script>

  </div>
<p>
=======================================

The diagram available at
\href{http://gvsu.edu/s/0Jb}{http://gvsu.edu/s/0Jb}
allows you to create matrix transformations of this
  form to move our character into different poses.  You may use it to help
  address the following questions.


=======================================
COLOR-RGB
<p>
The diagram below enables you to create colors using various
amounts of red, green, and blue.  For each of these three quantities, the
slider varies between 0 and 255.
</p>
<p>
  <div style="text-align:center">
    <canvas id="rgb" width="350" height="70">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src='jslibrary/figures.js'></script>
    <script type='text/javascript' src='jslibrary/rgb.js'></script>
  </div>
=======================================

The diagram available at the top of
\href{http://gvsu.edu/s/0Jc}{http://gvsu.edu/s/0Jc}
enables you to create colors using various
amounts of red, green, and blue.  For each of these three quantities, the
slider varies between 0 and 255.

=======================================
COLOR-YCbCr
<p>
The diagram below enables you to create colors using various
amounts of luminance \(Y\), blue chrominance \(C_b\), and red
chrominance \(C_r\).
The lumninance slider moves between 0 and 255 while the chrominance
sliders move between -127.5 and 127.5.
</p>
<p>
  <div style="text-align:center">
    <canvas id="ycbcr" width="350" height="70">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src='jslibrary/ycbcr.js'></script>
  </div>
</p>
=======================================

The diagram available in the middle of
\href{http://gvsu.edu/s/0Jc}{http://gvsu.edu/s/0Jc}
enables you to create colors using various
amounts of luminance $Y$, blue chrominance $C_b$, and red
chrominance $C_r$.
The lumninance slider moves between 0 and 255 while the chrominance
sliders move between -127.5 and 127.5.

=======================================
FOURIER-COEFFS
<p>
The diagram below enables you to vary three of the Fourier
coefficients 
\(F_0\), \(F_3\), and \(F_7\)
and observe the effect on \({\mathbf x}\).
</p>
<p>
  <div style="text-align:center">
    <canvas id="fourier" width="400" height="400">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src='jslibrary/fourier.js'></script>
  </div>
</p>
=======================================

The diagram available at
\href{http://gvsu.edu/s/0Jd}{http://gvsu.edu/s/0Jd}
enables you to vary three of the Fourier
coefficients 
$F_0$, $F_3$, and $F_7$
and observe the effect on ${\mathbf x}$.

=======================================
HSV-DIAGRAM
<p>
The diagram below enables you to vary the three parameters \(H\),
\(S\), and \(V\) in the \(HSV\) color model.
</p>
<p>
  <div style="text-align:center">
    <canvas id="hsv" width="350" height="70">
       Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src='jslibrary/hsv.js'></script>
  </div>
</p>
=======================================

The diagram available at the bottom of
\href{http://gvsu.edu/s/0Jc}{http://gvsu.edu/s/0Jc}
enables you to vary the three parameters \(H\),
$S$, and $V$ in the $HSV$ color model.


=======================================
DETERMINANTS
<p>
The sliders in the diagram below allow you to choose a matrix \(A\).
The two vectors representing the columns of the matrix, along with the
parallelogram they define, are shown below.  
</p>

<p>
  <div style="text-align:center">
    <canvas id="bottomsliders" width="450" height="100">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <br>
    <canvas id="bottomright" width="400" height="400" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src="jslibrary/figures.js"></script>
    <script type='text/javascript' src="jslibrary/det.js"></script>
  </div>
<p>
=======================================

The sliders in the diagram available at
\href{http://gvsu.edu/s/0J9}{http://gvsu.edu/s/0J9}
allow you to choose a matrix $A$.
The two vectors representing the columns of the matrix, along with the
parallelogram they define, are shown below.  

=======================================
EIGENVECTORS
<p>
The sliders in the diagram below allow you to choose a matrix \(A\).
The vector \({\mathbf v}\) is shown in red and may be varied by clicking
in the head of the vector.  The vector \(A{\mathbf v}\) is then shown in
gray.
</p>

<p>
  <div style="text-align:center">
    <canvas id="sliders" width="350" height="100">
      Your browser does not support HTML5 Canvas.
    </canvas>
    <br>
    <canvas id="eigenvector" width="300" height="300" hspace=5>
      Your browser does not support HTML5 Canvas.
    </canvas>
    <script type='text/javascript' src="jslibrary/figures.js"></script>
    <script type='text/javascript' src="jslibrary/eigenvectors.js"></script>
  </div>
<p>
=======================================

The sliders in the diagram available at
\href{http://gvsu.edu/s/0Ja}{http://gvsu.edu/s/0Ja}
allow you to choose a matrix $A$.
The vector ${\mathbf v}$ is shown in red and may be varied by clicking
in the head of the vector.  The vector $A{\mathbf v}$ is then shown in
gray.

=======================================
