<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>

<chapter name="Max Basic Tutorial 10: Random Drawing">

<setdocpatch name="10mRandomDrawing" patch="10mRandomDrawing.maxpat"/>
<previous name="basicchapter09">Mouse Drawing</previous>
<next name="basicchapter11">Procedural Drawing</next>
<parent name="00_maxindex">Max Tutorials</parent>

<indexinfo category="Basics" title="Random Drawing">Working with random numbers</indexinfo>

<h1>Tutorial 10: Random Drawing</h1>

<h2>Introduction</h2>

<p>In this tutorial, we will further explore drawing using the <o>lcd</o> object.  However, instead of explicitly drawing shapes, we will look at ways of automatically generating draw commands using the <o>random</o> and <o>drunk</o> objects.</p>

<p>Many different art forms use random and pseudo-random techniques for generating interesting or unexpected content.  We will see how to use the <o>random</o> object to produce a range of numbers for source material, since this is the method used within Max to create random material. The <o>drunk</o> object provides a way to perform a <i>random walk</i> through a number range, which can provide the unexpectedness of random number generation while avoiding undesired large jumps in the number generated.</p>

<p>To open the tutorial patch, click on the <b>Open Tutorial</b> button in the upper right-hand corner of the documentation window.</p>

<h2>Drawing with <o>random</o></h2>

<p>Take a look at the tutorial patcher. At the top left of the patcher is a patch that uses the <o>random</o> object (colored green) to generate a random number.  When we hit the <o>button</o> connected to it, the output of the object is a number between <m>0</m> and <m>999</m> – giving us a range of <m>1000</m> potential random numbers.  That is the purpose of the object argument; it sets the range of numbers the object can generate.</p>

<p>Each time you click on the <o>button</o>, the <o>random</o> object generates another number.  If you want to change the range of the output, you can change the argument – or you can send a new value into the right inlet of the <o>random</o> object.  If we enter <m>20</m> into the connected <o>number</o> box at the top, we can see that hitting the <o>button</o> will now generate numbers between <m>0</m> and <m>19</m>.  Now, let’s use this to generate some interesting graphics in the <o>lcd</o> object at the bottom-left of the patch.</p>

<p>The <o>patcher</o> object labeled <b>example 1</b> is an automated graphics generator for the <o>lcd</o> below. A <o>metro</o> object provides a steady stream of <m>bang</m> messages into five <o>random</o> objects, each with a range that is appropriate to the size of the <o>lcd</o> object (which is <m>320</m> pixels wide and <m>240</m> pixels tall). The output of the the first two <o>random</o> objects are manipulated with some math objects to create the numbers we need; everything is then packed together to create a list of seven numbers (via the <o>pack</o> object); the message <m>paintoval</m> is placed before the list (via the <o>prepend</o> object), and then sent to the <o>lcd</o>.</p>

<p>In order to see what the seven numbers in the list represent, we should check the <o>lcd</o> reference text. We can do this by unlocking the patcher, selecting the <o>lcd</o> object, then choosing <b>Reference</b> from the <b>Help</b> menu.  This displays the <o>lcd</o> manual page, where we can review the <m>paintoval</m> message.</p>

<p>According to the reference manual, the arguments are left, top, right, bottom and color (sent as a list of three values representing the red, green, and blue amounts of the color to be used). Looking at the automated drawing code, we see that the first <o>random</o> object provides the left and right location (with 5 pixels added and subtracted to provide a 10 pixel-wide shape); the second <o>random</o> object is similar, but provides the top and bottom locations for the shape.  Finally, the last three <o>random</o> objects create three random numbers (in the range of <m>0</m>–<m>255</m>) that will create a random RGB color for drawing.</p>

<p>When we turn on the <o>metro</o> with the <o>toggle</o> box, we see that the <o>lcd</o> quickly becomes filled with small (10 pixel) circles of random color.  This is a great example of truly random location and color selection.  But what if we want to exert a bit more control over the drawing location?</p>


<h2>Drawing with <o>drunk</o></h2>

<p>There are many types of random behavior that can be modeled by the computer.  The <o>random</o> object provides the closest approximation to "pure" randomness we can get; every number within its range has an equal probability of being selected.  An alternative to the <o>random</o> object is the <o>drunk</o> object, so-called because it allows you to perform the “drunken walk” through a range of numbers; this randomization (technically a variant of something called <i>brownian motion</i>) characterizes many "random" processes in nature.</p>

<p>Just below our <o>random</o> example (at the top left of the patch) is a second test patch for the <o>drunk </o>object. If you click on the connected <o>button</o>, you will see that it gives us a random number based on the range provided by its first argument (an argument of <m>1000</m> gives us numbers between <m>0</m> and <m>999</m>).  Hitting the <o>button</o> a second time, however, gives us a somewhat different result: we still get a random number, but it remains within the range of +/- <m>20</m> of the previous value.  Continue hitting the <o>button</o>, and you will see the value will always stay within <m>20</m> steps of the previously chose number.  The second argument to <o>drunk</o> gives us the maximum step size for each receipt of a <m>bang</m>.</p>

<p>As with the <o>random</o> object, both arguments to <o>drunk</o> can be changed by connecting <o>number</o> boxes to the provided inlets.  In the case of the <o>drunk</o> object, the second inlet changes the <i>range</i> value, while the right (third) inlet changes the <i>step</i> value.  If we change the range and step sizes to smaller numbers (like <m>10</m> and <m>2</m> respectively), we can see how the output is clamped to a smaller range when we click the <o>button</o> again.</p>

<p>We can wipe the <o>lcd</o> canvas clean by clicking the <o>message</o> box labeled <m>clear</m> just above the <o>lcd</o> in the tutorial patch.  The <o>patcher</o> object labeled <b>example 2</b> shows how we can use the <o>drunk</o> object to perform another automated drawing task. In appearance, it is very similar to the drawing routine that we used to demonstrate the <o>random</o> object, merely with one object substituted for another.  After clearing the <o>lcd</o> object, start the <o>metro</o> by clicking the <o>toggle</o> above it. The <o>lcd</o> object is sent <m>paintrect</m> messages with a list of generated integer values; the resulting rectangles are scattered around the <o>lcd</o>, but never make a large leap because they are constrained by the small step size (<m>20</m> by <m>15</m> pixels) of the <o>drunk</o> objects.  You will also note that the color changes very slowly, because the color arguments created are also constrained by the step size (<m>5</m>) of the <o>drunk</o> objects.</p>

<h2>More random drawing</h2>

<p>The third set of automated drawing objects is in the <o>patcher</o> object labeled <b>example 3</b>. This section of the patch looks somewhat more complicated, and uses a new drawing message for the <o>lcd</o> object: <m>framepoly</m>.  If we reopen the <o>lcd</o> reference page, we see that this message expects a series of x/y pairs for creating a polygon frame, where each x/y pair represents a corner or vertex.  Our automated routine uses eight <o>random</o> objects to create four pairs of coordinates, these are combined into a list (with <o>pack</o>), prepended with the <m>framepoly</m> message (with <o>prepend</o>), then sent to the <o>lcd</o>.  Rather than embed the framepoly message with color information, we separately calculate a random set of three values, make them into a list, and create an <m>frgb</m> (for <i>foreground RGB</i>) message that is also sent to <o>lcd</o>.</p>

<p>This routine takes a different approach to the random point selection.  Rather than randomly selecting any point on the <o>lcd</o> surface, the random numbers generate a value from <m>0</m>-<m>9</m>, then <link name="*" type="refpage">multiply</link> the result to complete the coordinate selection.  In the case of horizontal (x) coordinates, the value is multiplied by <m>32</m>; for vertical (y) coordinates, the value is multiplied by <m>24</m>.  Thus, the lcd surface is divided into a 10x10 grid, and all coordinates are "locked" into this grid.</p>

<p>When we turn on the <o>metro</o> for this section of the patch (via the <o>toggle</o> object above it), we see that the polygon’s frame is drawn in the generated (random) color, but we also quickly see the result of limiting the random number selection: the graphic takes on a web-like quality, especially noticeable along the edges. By slightly changing the way we use the <o>random</o> object, we have implied some control on the generated result.</p>

<p>A slightly different result can be seen if we replace the <o>random</o> objects used for coordinate creation with <o>drunk</o> objects.  Replace all of the <o>random</o> <m>10</m> objects with <o>drunk</o> <m>10 2</m> objects.  Now, when you run the patch, the creation of the web seems even more controlled.  You can further tweak the drawing function by replacing the color generators, changing all <o>random</o> <m>255</m> objects to something like <o>drunk</o> <m>255</m><space/> <m>15</m>.  This will cause the color to change smoothly, giving you a different perspective on the generated drawing.</p>

<h2>Summary</h2>

<p>We’ve learned a little more about drawing in the <o>lcd</o> object, using the <m>paintoval</m> (to create small circles), <m>paintrect</m> (to create small squares) and <m>framepoly</m> (to create jointed lines) messages. More interestingly, we’ve also learned to have Max perform the drawing for us, using the <o>random</o> and <o>drunk</o> objects to generate coordinates and colors on the <o>lcd</o> surface. We’ve also seen, using ranges and multiplication, that we can manipulate the random number generation to fit application-specific needs.  It should be no surprise that the <o>random</o> and <o>drunk</o> objects are at the heart of many generative music and graphics applications.</p>

<seealsolist>
<seealso name="random">Generate a random number</seealso>
<seealso name="drunk">Take a random walk</seealso>
</seealsolist>

</chapter>
