<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>

<chapter name="Video and Graphics 2: Live Capture">

<previous name="jitterchapter00c_Display a Video">Display a Video</previous>
<next name="jitterchapter00e_Control Jitter with Messages">Control Jitter with Messages</next>
<parent name="jitindex">Jitter Tutorials</parent>

<openfile name="Live Capture" patch="jitter_core_-_2_-_live_capture.maxpat"/>

<h1>Video and Graphics Tutorial 2: Live Capture</h1>



<h2>Intro</h2>



<p>Now that we have video playback working, we’ll turn to using live video input as source material for image processing.  To do that, we’ll use your computer’s built-in camera.
</p>

<h2>Setup</h2>

<p>As in the previous lesson, we’ll be using <o>jit.world</o> to display the output of our Jitter patch, so add <o>jit.world</o> and <o>toggle</o> objects to your patch. Next, create a <o>jit.grab</o> object and connect the left outlet to the inlet of your <o>jit.world</o> object. To start up the camera, add a <o>message</o> box containing the message <m>open</m>, connect it to your <o>jit.grab</o>, then lock the patch and click on the <o>message</o> box. Finally, turn on the toggle connected to jit.world to see the camera image in the window.</p>

<illustration><img src="images/jitter_core - 2a.png"/></illustration>

<h2>Image Control</h2>

<p>Now that the live image is being captured, let’s introduce some image processing into the signal flow. Create a new <o>jit.brcosa</o> object , an all-in-one brightness, contrast and saturation effect.</p>

<illustration><img src="images/jitter_core - 2b.png"/></illustration>

<p>Connect this between the outlet of the <o>jit.grab</o> and the inlet of the <o>jit.world</o> objects. To adjust the image, we need to send messages to change the brightness, contrast and saturation. For now, we’ll do this using a special object called <o>attrui</o> (attribute user-interface) that exposes the attributes of any object it is connected to.</p>

<p>To attach an <o>attrui</o> control, click the left-hand side of the <o>jit.brcosa</o> object box to display the object menu.</p>

<illustration><img src="images/jitter_core - 2c.png"/></illustration>

<p>From there, navigate to the Attributes section and select <b>Brightness</b>. This will automatically create an attrui connected to <o>jit.brcosa</o> with the desired attribute.</p>

<illustration><img src="images/jitter_core - 2d.png"/></illustration>

<p>Notice that a floating point number appears on the right side of the <o>attrui</o>.</p>


<illustration><img src="images/jitter_core - 2e.png"/></illustration>

<p>Follow the same steps to add <o>attrui</o> controls for the Contrast and Saturation attributes, lock the patch, then play around with these values to see how they affect the image.</p>

<illustration><img src="images/jitter_core - 2f.png"/></illustration>



<div>
	<techdetail>

		<h2>Explore Further</h2>

		<p>Now that you have successfully added an effect, you can use the same technique (insert an object, connect <o>attrui</o> objects to the object, change parameters) to explore a variety of other video processing possibilities within Jitter. Try out <o>jit.fluoride</o> for selective neon tinting, <o>jit.hue</o> for some dramatic color shifting, <o>jit.slide</o> for quick and fun frame blending and <o>jit.wake</o> for classic video feedback.</p>

		<p>Some objects (such as <o>jit.brcosa</o> and <o>jit.slide</o>) will have only a few attributes while others (<o>jit.wake</o> and <o>jit.plur</o>) will have a lot more. You’ll find you can get to know a lot about Jitter objects by just connecting them and using <o>attrui</o> to try out their attributes.</p>

		<illustration><img src="images/jitter_core - 2g.png"/></illustration>

	</techdetail>
</div>





</chapter>
