<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>
<chapter name="Tutorial 2: Create a Matrix">
<setdocpatch name="02jCreateAMatrix" patch="02jCreateAMatrix.maxpat"/>

<previous name="jitterchapter01">Playing a Movie</previous>
<next name="jitterchapter03">Math Operations on a Matrix</next>
<parent name="jitindex">Jitter Tutorials</parent>



<h1>Tutorial 2: Create a Matrix</h1>
<h2>What's a Matrix?</h2>
<p>This tutorial chapter demonstrates some ways to manage numerical data in a <i>matrix</i>.</p>

<p>If you are in doubt about what a matrix is, please first read the chapter titled <link type="tutorial" module="jit" name="jitterchapter00a_whatisamatrix">What is a Matrix?</link> in the Topics section. To summarize here, a matrix is a scheme for storing and modifying large sets of numerical data, by placing the values in a virtual grid. By storing data in a matrix, we can easily identify a particular value by its location in the grid, and we can modify many values at once by referring to all or part of a matrix.</p>

<p>In the previous tutorial chapter, we used the<b> </b><o>jit.window</o> object to open a window and display the contents of a matrix as colored pixels. The matrix being displayed was from the <o>jit.movie</o> object, an object that continually fills its matrix with the current frame of a QuickTime video. The fact that <o>jit.window</o> was displaying a video, however, was just because that happened to be the contents of the matrix it was being told to display; but in fact <i>any</i> numerical values in a matrix can be visualized similarly. The example patch for this tutorial will show an even simpler example that should help strengthen your understanding of a <i>matrix</i>, the central idea of Jitter.</p>

<h2>The jit.matrix object</h2>

<illustration><img src="images/jitterchapter02a.png"/>Create a 16x12 storage space for single 8-bit values.</illustration>
<p>The <o>jit.matrix</o> object simply creates a matrix, a storage space in memory. We can then store and retrieve numerical values in the matrix, and we can use other objects to print the values or display them visually. The arguments for <o>jit.matrix</o> are an optional <m>[name]</m> argument (not included in this example), the <m>[planecount]</m> (how many values will be stored in each cell of the matrix), the <m>[type]</m> of data (how many bytes to use to represent each number), and then the <m>[dim]</m> (short for "dimensions", describing how large the matrix will be). We use the brackets <m>[]</m> to indicate that this is not the actual word you type in as an argument, but rather a description of the meaning of the argument. The object in this example will create a matrix with 1 <i>plane</i> (one number in each matrix location), using the <i>char</i> data type (single-byte values), with <i>dimensions</i> 16x12 (which equals 192 <i>cells</i>). From this we can deduce that the matrix is capable of holding 192 individual numerical values, with each value ranging from 0 to 255 (that's the range of a single byte).</p>

<div>
<techdetail>Note: We always describe the dimensions of a two-dimensional matrix in <i>x,y</i> (width, height) format, meaning that we first state the extent of the horizontal dimension, then the vertical dimension. This is consistent with the way these dimensions are commonly discussed in video and computer screen layout (a 640x480 video image, for example). An alternative way to think of this is that we first state the number of (vertical) <i>columns</i> of data, then the number of (horizontal) <i>rows</i>. You might want to note, however, if you're applying matrix techniques of linear algebra in Jitter, that this format&#x2014;columns, rows&#x2014;is different from the way matrices are commonly described in linear algebra, which states rows first, then columns.</techdetail>
</div>
<p>We've connected a <o>button</o> object to the inlet of <o>jit.matrix</o>. You'll recall that Jitter objects send out their matrix name when they receive a <m>bang</m> message in their left inlet, so this <o>button</o> will permit us to trigger <o>jit.matrix</o> to send out its matrix name (in the form of a <m>jit_matrix</m> message).</p>

<h2>The jit.print object</h2>
<illustration><img src="images/jitterchapter02b.png"/>Print contents of jit.matrix.</illustration>
<p>Beneath the <o>jit.matrix</o> object there is another new Jitter object, <o>jit.print</o>. This object accepts a matrix name (i.e., a <m>jit_matrix</m> message) in its inlet, and formats the values of the matrix&#x2014;the sheer number of which can be pretty unwieldy&#x2014;for printing in the Max Console. It prints the formatted values directly to the Max Console, much like Max's <o>print</o> object, and then passes the matrix name out its left outlet in a <m>jit_matrix</m> message (in the normal manner for Jitter objects).</p>

<bullet>Click on the <o>button</o> object marked "output". This causes the <o>jit.matrix</o> object to communicate its matrix name to <o>jit.print</o>, which formats the values and prints them in the Max Console.</bullet>

<p>In the Max Console you will now see the text <m>left: jit_matrix [somename]</m>. The word <m>left</m> shows us that this was printed by the <o>jit.print</o>&#8201;<m>left</m> object, so we can see that that is what came out of the outlet of <o>jit.matrix</o>. Because we didn't choose a name for that matrix (we didn't provide a name as the first typed-in argument to <o>jit.matrix</o>), <o>jit.matrix</o> assigned a name of its own choosing. It tries to generate a unique name that's not likely to be used elsewhere, so it usually chooses something strange like "<m>u330000007</m>". In this case we don't really care what the name is, but it does tell the <o>jit.print</o> object what matrix of data to format for printing.</p>

<p>Below that, you will see all of the values in this particular matrix, formatted neatly in 16 columns and 12 rows. Those came from <o>jit.print</o>. They're all <m>0</m> right now, because we haven't placed anything else in the matrix yet.</p>

<h2>Setting and querying values in a matrix</h2>
<p>In the previous chapter we saw how an entire matrix could be filled automatically with frames of color data from a movie. It is also possible to place numerical values in specific individual cells of the matrix, and retrieve values from specific locations. The objects immediately above <o>jit.matrix</o> in this example show a few messages you can use for setting and getting values in a matrix.</p>

<illustration><img src="images/jitterchapter02c.png"/>The messages <m>setcell</m> and <m>getcell</m> allow you to access specific values in a matrix.</illustration>
<p>You can store values in a particular matrix location with the <m>setcell</m> message. The syntax for doing so is: <m>setcell [cell coordinates] val [value(s)]</m>. For example, the message <m>setcell 0 0 val 127</m> to our <o>jit.matrix</o> would set the value of the very first cell of the matrix (i.e., the cell in the upper-left corner) to 127. This is because we number the cell coordinates in each dimension starting with 0 and going up to 1 less than the extent of that dimension. So, in this matrix, locations in the <i>x</i> dimension are numbered from 0 to 15 and locations in the <i>y</i> dimension are numbered 0 to 11. Thus, the cell in the lower right corner would be described with the cell coordinates <m>15 11</m>.</p>

<bullet>The combination of the <o>pack</o> <m>0 0 0</m> object and the <o>message</o> box helps us to format a proper <m>setcell</m> message for <o>jit.matrix</o>. First we set the <i>x</i> and <i>y</i> positions where we want to store the value, then we specify a value to be stored there. With the <i>x</i> and <i>y</i> positions at <m>0 0</m>, use the <o>number</o> box labeled "value" to send the number <m>127</m> into the left inlet of <o>pack</o> <m>0 0 0</m>. This will cause the message <m>setcell 0 0 val 127</m> to be sent from the <o>message</o> box to the <o>jit.matrix</o>.</bullet>

<illustration><img src="images/jitterchapter02d.png"/>The message <m>setcell 0 0 val 127</m> sets the value of cell position 0, 0 to 127.</illustration>
<p>(If there were more than one plane in this matrix, we could set the values in a particular plane of a cell, or in all planes of the cell. However, this matrix has only one plane, so we'll leave that for another time.)</p>

<bullet>Just to demonstrate what we said earlier about the numbering of cell positions, try sending the message <m>setcell 15 11 val 255</m> to <o>jit.matrix</o>. First enter the number <m>15</m> into the "x position" <o>number</o> box and the number <m>11</m> into the "y position", then enter the number <m>255</m> in via the "value" <o>number</o> box. Now click on the button marked "output" to see how the matrix has been changed. Once again the entire matrix will be printed in the Max console via <o>jit.print</o>. Notice that the values in cell positions 0, 0 and 15, 11 have been changed to 127 and 255.</bullet>

<illustration><img src="images/jitterchapter02e.png"/>The message <m>setcell 15 11 val 255</m> sets the value of cell position 15, 11 to 255.</illustration>
<p>In your Patcher window you may have noticed a change in the black rectangular region. The upper-left and lower-right corners of  it have changed. </p>

<illustration><img src="images/jitterchapter02f.png"/>The <o>jit.pwindow</o> object displays numerical values as colors (or greyscale values).</illustration>
<p>This region is a user interface object called <o>jit.pwindow</o>. In the Add Object palette it appears like this:</p>

<illustration><img src="images/jitterchapter02g.png"/>The <o>jit.pwindow</o> icon in the object palette</illustration>
<p>When you click this object in the Add Object palette or drag it into the Patcher window, it creates a small rectangular object. (You can drag the grow bar in the lower-right corner of the object to adjust its dimensions.) This object is pretty much equivalent in function to the <o>jit.window</o> object, but it displays matrix data inside the Patcher window, rather than in a separate window.</p>

<p>So, here we see quite literally the display of numerical values (in this case, <i>char</i> data in the range from 0 to 255) as color. Because there is only one plane in this matrix we're displaying, the display is monochrome&#x2014;that is, greyscale. The 0 values are totally black, and the other values are some level of gray, up to 255 which is totally white. Thus, the 255 value at cell 15, 11 is displayed as white, and the 127 value at 0, 0 is displayed as a 50% gray, halfway between black and white.</p>

<p>You might say, "That's all very well, but it will be pretty tedious to fill a large matrix this way." And you'd be right. But of course Max allows us to write another part of the program that will automate the process.</p>

<h2>Filling a matrix algorithmically</h2>
<bullet>Double-click on the <o>patcher</o> <m>fillmatrix</m> object to open the subpatcher window <i>fillmatrix</i>. This subpatcher generates 192 different values, one for each position in the matrix, by feeding different numbers into a mathematical expression.</bullet>

<illustration><img src="images/jitterchapter02h.png"/>You can generate values algorithmically to fill the cells of a matrix.</illustration>
<p>When the <o>uzi</o> <m>12</m> object receives a <m>bang</m> (from the <o>button</o> labeled "fill" in the main Patcher window) it quickly counts from 1 to 12 out its right outlet and sends a <m>bang</m> for each count out its left outlet. Those <m>bang</m>s trigger the <o>uzi</o> <m>16</m> object, so that it sends out numbers from 1 to 16 each time. We subtract 1 from these numbers so that they actually go from 0 to 11 and from 0 to 15, and we use the resulting numbers as <i>y</i> and <i>x</i> positions in the matrix. For each of the 12 <i>y</i> positions, the <o>uzi</o> <m>16</m> object specifies all the <i>x</i> positions, and then uses those numbers in a mathematical expression (in <o>expr</o>) to calculate the value to be stored at that position. These numbers are sent out the outlets, and are used to create well-formed <m>setcell</m> messages in the main patch, just as we did by hand earlier.</p>

<p>The mathematical expression here is relatively unimportant. It could be any formula that generates an interesting pattern of data. In this case we have chosen a formula that will produce a sinusoidal gradation of brightness in each column, and the will cause the overall brightness of  the columns to increase from left to right (i.e., as <i>x</i> increases).</p>

<bullet>Close the <i>fillmatrix</i> subpatch window and click on the <o>button</o> labeled "fill". The matrix is filled with values (generated by the <o>uzi</o> objects in the subpatch) in a single tick of Max's scheduler. Now click on the <o>button</o> labeled "output" to view the contents of the matrix. The numerical values will be printed in the Max Console, and displayed in the <o>jit.pwindow</o>.</bullet>

<p>Even for a small 16x12 matrix like this, it's tough for us to perceive a trend in numerical data just by looking at a printout of numbers in the Max Console. However, the display in the <o>jit.pwindow</o> gives us a very clear and immediate idea of how the values vary within the matrix. This demonstrates one of the benefits of visualization of numerical data.</p>

<p>You can no doubt imagine other ways to fill a matrix algorithmically in Max, and in fact we'll demonstrate other ways in later tutorial chapters.</p>

<h2>Other messages to jit.matrix</h2>
<p>There are many other messages understood by <o>jit.matrix</o>, more than we can demonstrate fully here. On the right side of the Patcher we show a couple of other handy messages for filling a <o>jit.matrix</o> instantly with all the same values. The <m>clear</m> message to <o>jit.matrix</o> sets all its values to 0, and the <m>setall</m> message (the word <m>setall</m> followed by a value) sets every position in the matrix to that value.</p>

<p>We also demonstrate the <m>getcell</m> message. The word <m>getcell</m> followed by a location in the matrix (<i>x</i> and <i>y</i> positions) will cause <o>jit.matrix</o> to send the cell coordinates and value of  that position out its right outlet.</p>

<bullet>Enter a <i>y</i> value and then an <i>x</i> value into the <o>number</o> boxes above the <m>getcell $1 $2</m> <o>message</o> box, and observe what is printed in the Max Console. Note that the value at that matrix position is reported out the <i>right</i> outlet of <o>jit.matrix</o>.</bullet>

<illustration><img src="images/jitterchapter02i.png"/>Query the value(s) at matrix position 8, 6; reports <m>cell 8 6 val [value(s)]</m></illustration>
<p>In future tutorial chapters you will see various ways to use values retrieved from a matrix.</p>
<h2>Summary</h2>
<p>The <o>jit.matrix</o> object creates a storage space for a named matrix of data, with whatever dimensions, planes, and data type you specify. This matrix can be filled with data from another Jitter object (such as <o>jit.movie</o>), or by messages such as <m>setall [value]</m> to set the value in all cells or <m>setcell [position] val [value(s)]</m> to set a specific cell. You can use an algorithm elsewhere in the patch to fill the matrix according to a formula or a set of rules.</p>

<p>To get the data in a specific cell, you can use the <m>getcell [position]</m> message. To see all of the numerical data printed out in the Max Console, use the <o>jit.print</o> object to format the matrix data and print it. To see the matrix data displayed as colors, use the <o>jit.pwindow</o> object. This is similar to the use of the <o>jit.window</o> object demonstrated in Tutorial 1.</p>

<p>In this tutorial we viewed numerical data that we generated ourselves, rather than digital video as in the preceding chapter. The principle of storage is the same in both cases. Whether a matrix is used to store color information for each pixel from a frame of digital video, or abstract numbers which we wish to view as color, the numbers in both chapters are stored in a two-dimensional matrix and are easily displayed in a <o>jit.window</o> or <o>jit.pwindow</o>.</p>

	<seealsolist>
		<seealso display="Video and Graphics Tutorial 5: Jitter Matrix Exploration Part 1" module="Video and Graphics" name="jitterchapter00g_Jitter Matrix 1" type="tutorial" />
		<seealso name="expr">Evaluate a mathematical expression</seealso>
		<seealso name="jit.matrix">The Jitter Matrix!</seealso>
		<seealso name="jit.print">Print a matrix as text in the Max Console</seealso>
		<seealso name="jit.pwindow">In-Patcher Window</seealso> (this had obs. screenshots!)
		<seealso name="pack">Combine numbers and symbols into a list</seealso>
		<seealso name="print">Print any message in the Max Console</seealso>
		<seealso name="uzi">Send a specific number of bang messages</seealso>
	</seealsolist>

</chapter>
