Quartz Composer is an ideal tool for artists because it allows one to make small visual-oriented programs, without the need to learn computer code. Instead it relies on nodes and macros patches.
Nodes are controlled by inserting the values straight in an input field in the node or by connecting the output of one node (say a math equation) to the input of another node (like the width of a square).
A Macro is like a box that contains nodes or other macros. It can be used to modify the behaviour or output of the patches inside it or, much like a real box, simply to contain the patches without affecting them in order to clean up the editor space.
This tutorial focuses on the use of Macros, and in particular the one called “Iterator”. I like to think of this as a sort of “magic box” capable of creating multiple instances of a base object. Furthermore, each instance can have its own properties, rather than just inheriting the properties of the original object.
To get started, we drag a Sprite patch into the editor. This displays a basic square object. We can control the size, placement, color and rotation of the square. We can also assign an image to be displayed in the square.
We give the Sprite a Width and Height of 0.2 to make it smaller, and place it on the upper left side of the Viewer, with X= -0.7 and Y= 0.7 .
(Note that for the purposes of this tutorial, I set the ratio of the viewer to a fixed value so it’s always square, rather than being freeform. I can resize the viewer, but the rendering area will always have the same height and width ratio).
Now that we have our Sprite ready, we select an Iterator macro patch, and copy-paste our Sprite patch inside it. We can delete the original. Our Sprite is now inside the Iterator, and the Macro tells us we have 10 instances of the sprite. Despite this, nothing seems to happen, and the sprite is still where we left it.
The next step is to introduce another patch in our composition called Iterator Variables. This patch is very important as it works in tandem with the Iterator. it has to be placed inside the Iterator macro in order to work, on the same level as the object you want to affect, in this case our Sprite.
We place the Iterator Variables patch inside the macro, and we see no inputs, and 3 outputs. The first is Current Index: this corresponds to the index of all the object instances created, and assigns a number to it. It will output a max amount of numbers (0,1,2,3,4,...) depending on the number of instances. Note that these are not idle numbers, but correspond to each instance of the object.
Next is Current Position. This will output numbers corresponding to each instance as before, but only from 0 to 1.
Third is Iterations, which outputs the number of iterations produced by the iterator. This corresponds to how many copies we’re making.
Now, let’s assume we want to make 5 copies of our sprite, and we want them to go horizontally from one end of the rendering area to the other. Our sprite is now on the upper left side of the rendering area, corresponding to (X=-07, Y=0.7). Since we want to create one row of sprites, we only need to influence the X value of the Sprite. The Y value will stay the same. The start value for X is -0.7, corresponding to the left side of the rendering area. We want the last Sprite to have an X value of 0.7 ( the right side), and we want to have 5 instances in total.
For the next step, we’re going to introduce another extremely useful patch, called Interpolation. This is an animation patch, meaning it does what it does according to a timeline which starts as soon as we run our composition, and stops when the operation is concluded (assuming we haven’t set it on a loop, in which case it will repeat the operation over and over).
We drag the Interpolation patch inside the Iterator, because we need it to interact with both the Sprite patch and the all-important Iterator Variables. In our case, we need it to provide our sprites with a value for their X position. This value needs to be unique for each instance of the Sprite, and we want it to begin at -0.7, and end at 0.7.
This, by the way , is what the interpolator does. In interpolates continuously between a start value and an end value. It does so according to a timeline, and it also does it according to a set duration, meaning how long it will take for it to go from the start value to the end value. For instance, we could set it to go from 0 to 2 in the course of 60 seconds, or however long we wish.
There are more input settings on the Interpolator patch, such a tension (holds back or pushes forward the interpolation curve) , repeat mode (allows to loop the animation) and interpolation (selects different interpolations curves).
For of our project, we will have to place the Interpolation patch on a different timeline. This is a bit of a hidden setting in QC, but every animation patch that relies on a timeline can actually be set to also operate on an external or separate timeline. This means that instead of having the interpolator start automatically as soon as we run the composition, and ending only when we stop it, we can set the interpolator to start whenever we please according to the values we decide to use.
Looking around the editor, the only other patch that can immediately provide any input to the interpolator is the Iterator Variables patch. We right-click on top of the Interpolation patch, where the patch name is, and we are presented with a few options. We select option number 3, and now our interpolator has a brand new input field, called patch time. This is how we control the patch animation according to our needs.
Going back to our iterator variables, we look at Current Position: as I mentioned before, this gives us a unique number from 0 to 1 for every instance we create. In our Iterator macro patch, we change the number of iterations from the default 10 to 5.
In the Interpolator patch, we set the values of start value and end value to -0.7 and 0.7 respectively. We then connect the Current Position output to the Patch Time input of the interpolator. We set the Repeat Mode of the Interpolation path to “none”, meaning the action will not loop on itself. Finally, we change the Duration of the interpolation to 1.
What we have done here is we have given the interpolator a different moment in the timeline for each instance of the sprite, so that each sprite has a set, clean value between -0.7 and 0.7 on the X axis. The duration of the interpolation equals the max value that is passed on from the Current Position output (1), so the different sprites are like snapshots of the different stages of the animation frozen in time.
We now pass the output value of the Interpolation patch to the X value input Sprite patch, and we can see that we have 5 squares in our render area, each in its own place.
You can play around with the number of iterations, and no matter how many sprites, they will always be ordered and placed. A large number of sprites will eventually blend into each other, so try to play around with the sprite size as well.
You can see why earlier I referred to the Iterator macro as a a sort of “magic box”. With very little manual work , we are able to produce endless copies of an object. This allows the artist not only to save time, but also to think of a composition in a completely abstract way. I personally find it an hugely empowering tool, and one that opens several creative avenues.
In this tutorial I gave a very basic example of the power of Quartz Composer, I hope it can be helpful to someone! I’ll make sure to follow it with some more tutorials in the future, as there seems to be a distinct lack of these on the web.
Next Tutorials:
-Part 2
-Part 3
Next Tutorials:
-Part 2
-Part 3
(Leave a comment here to request new tutorials)