Quartz Tutorial: Video Image Distortion 4


Quartz Tutorial: Video Image Distortion


Continuing on with Quartz Composition I am going introduce a couple more patches for you to play around with. If you haven’t already, I suggest you check out the Introduction and Image Reflection, both of these are a good complement to this tutorial. This tutorial today will go through the method of pulling a live video through an iSight camera and then letting you apply some funky effects to it. I will explain in detail what each of the patches will mean and what they do. We will create something like the image below. If you want to learn more I recommend Learning Quartz Composer from Amazon.

Step 1) The first step is to define our inputs. We will need both the mouse, to track mouse movements, and a video, to capture the image. In the Patch Inspector, of the video patch, change the video device in the settings pane to iSight. If you don’t have an iSight use the method described in the previous tutorial to set it to an image.

Step 2) The next step will be needed to convert the mouse movements into pixel ranges. It took me a while to figure out why this wasn’t working originally with the filters. Insert two Math patches and rename them X and Y by double clicking on the titles.

In the first patch (X), in the inspector, set the number of Operations to 3. In the Parameters pane set the first Operand to Add and then the value to one. Moving down set the values to Divide by 2 and the last one to multiply. The third operand will be configured through a Patch connection.

In the second (Y) patch, have 4 operations. Set the operands to multiply by 1.333, add 1, divide by 2 and then multiply and leave the final box blank like the previous Patch. These values are for the boxes moving down the pane.

Once you are done connection from the mouse Patch X Position >> Initial Value (X), and Y Position >> Initial Value (Y).

Step 3) So far we have our image coming from the video Patch but we need to format it in a way so everything else know what size it is running at. Insert an Image Dimension Patch and connect Image >> Image from the Video Input. Then connection Pixels Wide >> Operand #3 (X) and Pixels High >> Operand #4 (Y). It should look something like the image below.

Step 4) The next step is where the fun happens. This is where we bring in our mouse values and apply some image filters. You can pick any image filters you want from the list but they must have some Centre (X and Y) inputs to enable this method to work properly. I have chosen Twirl Distortion and Zoom Blur. Try some filters out and see what happens

Once as you have picked your Patches (any you want) connect Image >> Image on both patches from the video source. On the X Math Patch connect Resulting Value >> Centre X on both patches. To finish off connection Resulting Value >> Centre Y on both Patches again. There should be 3 input leads, refer to the image below for more information.

As a side note it might be a good idea at the time to reduce the values in the Parameters pane of the filters. It can, when the image is rendered, cause some problems if the effect your are applying is to large.

Step 5) The next step is to mix the inputs back together. Search for Multiplexer and add it to the work area. Connect both of the output Image values to Source #0 and #1. It matters which way round you input them. So connect your first filter to Source #0 and second to #1 and so on. Finally connect Left Click >> Source Index from the mouse Patch.

Step 6) To make sure that the filters are filling up the whole screen and are not shrunk or cause any other problems insert the Image Crop Patch. Connect the output from the Multiplexer to Image. As well as this we need to give some crop values. Connect, from Image Dimensions, Pixels Wide >> Crop Width and Pixels High >> Crop Height.

Step 7) The final step is to add the rendering Patches. Firstly add a Clear patch so the background is black (not shown below) and then add a Billboard patch. If you remember in the previous tutorial the Sprite patch was used as more complex operations were needed. As we just want to show a simple image we are going to use the Billboard patch. It is the more cut down and simpler version. Finally connect Cropped Image >> Image.

Step 8) If you run the visualization you should be able to apply some funky filters to your live iSight capture. Very cool, and very simple to do. You can see an example of what happens to ugly looking me below. If you click the left mouse the second filter should kick in.

If you want to change what happens to the filters go to the filters patches and change the values. You can then apply how much twirling or blurring happens. Its very fun. Mess around with the different filter patches and see what happens. Some might not work, Kaleidoscope is a very fun one to use.

To learn more about Quartz Composer I recommend Learning Quartz Composer from Amazon.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips