<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>

<chapter name="Video and Graphics 5: Jitter Matrix Exploration Part 1">

<previous name="jitterchapter00f_Adding 3D Objects">Adding 3D Objects</previous>
<next name="jitterchapter00h_Jitter Matrix 2">Jitter Matrix Part 2</next>
<parent name="jitindex">Jitter Tutorials</parent>


<openfile name="Jitter Matrix Exploration Part 1" patch="jitter_core_-_5_-_Jitter_Matrix_Exploration_1.maxpat"/>

<h1>Video and Graphics Tutorial 5: Jitter Matrix Exploration Part 1</h1>



<h2>Intro</h2>



<p>The Jitter Matrix is at the core of most of the visual processes you will use in Max - video is a grid of color data, and OpenGL geometry can are represented by a grid of points in space (x,y,z). They're both represented using the same kinds of matrices - understanding how to inspect, set, manipulate, and display that matrix information will open up countless doors.
</p>

<h2>Setup</h2>

<p>For this chapter, we’ll be working with pre-built patchers.</p>

<li>
	<openfilelink filename="jitter_core_-_5_-_Jitter_Matrix_Exploration_1.maxpat">Open the first patch</openfilelink>

</li>



<h2>Planes of a Matrix</h2>

<p>We already know how to load and playback video - and now, we’ll look under the hood at what video is <i>made of</i>. Open up the example patch and take a look at the first section. </p>


<illustration><img src="images/jitter_core - 5a.png"/></illustration>

<p>The <o>jit.movie</o> object is preloaded with an image of color bars. Video data is being sent out to a <o>jit.pwindow</o> as a matrix. We’re also sending that same matrix to a <o>jit.unpack</o> object, a <o>jit.matrix</o> object, and a <o>print</o> object.</p>

<p>Video in jitter is composed of a 4-plane matrix - each of the four individual plane contains data on Alpha, Red, Green and Blue values, in that order. The <o>jit.unpack</o> object breaks this apart and displays each plane separately as a grayscale image. (The argument to <o>jit.unpack</o> determines the number of outputs that the object will have). Brighter pixels indicate higher intensity of the corresponding color. If you aren’t familiar with additive color (RGB), it can seem unintuitive - it reflects how colors of light behave in the real world rather than how colors are mixed using pigments.</p>


<p>Once we have unpacked our matrix, we are free to manipulate the individual planes in any way we want. In this case, we are swapping the red and green planes before we recombine them using the <o>jit.pack</o> object (as with <o>jit.unpack</o>, the argument to <o>jit.pack</o> determines the number of <i>inlets/planes</i> that the object will have). </p>

<illustration><img src="images/jitter_core - 5b.png"/></illustration>

<p>On the right side of the patch, we use the <m>planemap</m> message to a <o>jit.matrix</o> to achieve the same result. When the <o>jit.matrix</o> object receives a <m>jit_matrix</m> message, it automatically fills with the values of the incoming matrix. The <m>planemap</m> message determines the order in which the data from the incoming matrix is used to fill the planes of the jit.matrix. Click on the various maps to see how they affect the image. The default is <m>planemap 0 1 2 3</m>, and tells the matrix to use plane 0 (alpha) from the incoming matrix as plane 0, 1 (red) as 1 and so on, resulting in an unaltered image. Switching the order of these planes, however, allows you to quickly substitute the values of one plane for another (i.e., <m>planemap 0 2 1 3</m>) or even one for multiple (i.e., <m>planemap 0 1 1 3</m>).</p>

<illustration><img src="images/jitter_core - 5c.png"/></illustration>

<div>
	<techdetail>

		<p> Instead of outputting an enormous list of values for every pixel (cell) in a matrix, jitter objects communicate using the <m>jit_matrix</m> message. Look at the <o>print</o> object below the <o>jit.movie</o> and note that the message sent out by our movie object is <m>jit_matrix</m> followed by some numbers and letters. This message acts as an alias to the data contained in a matrix. You can also explicitly set the name of a <o>jit.matrix</o> using and argument (e.g. <b>jit.matrix mydata</b>) and access that data anywhere in a patch (for an in-depth discussion of matrix data, read the document). </p>


	</techdetail>
</div>


<h2>The <o>jit.matrix</o> object</h2>


<p>Video media automatically sets the state of all four planes of a matrix based on the data contained in the current video frame, but sometimes we will want to work with matrix data without using pre-recorded media. The <o>jit.matrix</o> object provides us with a blank slate to create whatever type of matrix we want.</p>

<p>The next section shows how we can set the value of any point in a matrix using the <m>setcell</m> message or all values at once using the <m>setall</m> message.  </p>

<li>
	<openfilelink filename="jitter_core_-_5_-_Jitter_Matrix_Exploration_2.maxpat">Open the second patch</openfilelink>

</li>


<p/>

<p>In the example on the left, <b>jit.matrix 1 char 4 4</b> creates a one-plane matrix containing 16 pixels (4 rows and 4 columns).</p>

<illustration><img src="images/jitter_core - 5d.png"/></illustration>

<p>The fact that the matrix has only one plane means it uses only one value per cell - creating a grayscale image. The value is <i>char data</i> - integer values from 0-255, where 0 is solid black and 255 is solid white. Each pixel or cell in our matrix is addressed using x and y Cartesian coordinates, where the top left pixel is represented as cell 0 0. To manipulate your matrix, select x and y cells from 0-3 and then adjust the value. This composes a message in the format <m>setcell &lt;x&gt; &lt;y&gt; val &lt;int&gt;</m>.</p>
<p>
Note that setting the contents of the matrix does not output the matrix. It is only output when it receives a <m>bang</m> message which we create here by using the <o>trigger</o> object. </p>

<illustration><img src="images/jitter_core - 5e.png"/></illustration>

<p>The right-hand example uses a 4-plane matrix that lets us to set ARGB (alpha, red, green, blue) data such as we find in video pixels. A <o>swatch</o> object (whose <i>compatibility</i> attribute is set to 1, which means that the object outputs integers between 0 - 255 istead of float values from 0. - 1.) is used to quickly set the RGB values.</p>

<illustration><img src="images/jitter_core - 5f.png"/></illustration>

<h2>Displaying the contents of a matrix</h2>

<p>The <o>jit.cellblock</o> object gives us a way to view the contents of our <o>jit.matrix</o> object. Notice that as you manipulate the values in your matrix, the changes are reflected in the cellblock display. When using multi-plane matrices with the <o>jit.cellblock</o> object, the <m>plane</m> message allows you to specify which plane you are viewing the contents of. Sending a negative integer as the value allows you to see all at once.</p>

<illustration><img src="images/jitter_core - 5g.png"/></illustration>

<p>The <o>jit.print</o> object will print the incoming matrix values to the Max console, one row per line.</p>

<illustration><img src="images/jitter_core - 5h.png"/></illustration>

<p>Keep in mind that for many matrices, this is a lot of data for either <o>jit.print</o> or <o>jit.cellblock</o>. A full HD 1920x1080 video matrix would print 1080 lines with 1920 columns. At 4 values per cell, that's 8,294,400 values per frame! In many cases, viewing the data with a <o>jit.pwindow</o> is the quickest way to get a sense of the data.</p>

</chapter>
